靜態網頁高仿正方教育系統網頁（HTML+CSS）

王菜鳥發表於2020-09-23
網頁HTMLCSS

今天來給大家分享一下高仿正方教育系統的首頁，先來看看要模仿的網頁！

原圖

在這裡插入圖片描述

效果圖

接下來上高仿的靜態頁面效果圖：
在這裡插入圖片描述

程式碼

廢話不多說，下面直接上硬核內容：

<!--
 * @Author: OriginalCoder
 * @Date: 2020-09-23 14:12:55
 * @version: 
 * @LastEditTime: 2020-09-23 19:14:18
 * @LastEditors: OriginalCoder
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>XXXXXXX教學資訊服務平臺</title>
    <style type="text/css">
      body {
        background: #fafafa;
      }
      a {
        text-decoration: none;
      }
      p {
        padding: 0 15px;
      }
      /* 自動適應螢幕寬度 */
      /* @media  screen and (max-width: 1599px) and (min-width: 1440px){
        .all{
          width: 1170px !important;
        }
      } */
      .all {
        /* display: flex;
        flex-direction: column; */
        padding-right: 200px;
        padding-left: 137px;
        margin-right: auto;
        margin-left: auto;
      }
      .row {
        padding-left: 15px;
        padding-right: 15px;
      }
      .top-content *{
        /* 文字在圖片後面居中對齊 */
        display:inline-block;
        vertical-align: middle;
        padding: 20px 0 30px 0;
        /* left: 120px; */
      }
      .container {
        width: 1160px;
        height: 520px;
        margin: 0 auto;
        display: flex;
        border: 4px solid #ededed;
        border-radius: 4px;
        background: #f5f5f5;
      }

      .edu-system-title {
        font-size: 24px;
        color: #1069a4;
      }
      .middle-left {
        float: left;
      }
      .middle-right {
        float: right;
        width: 400px;
        height: 520px;
        padding-left: 20px;
        color: #333;
        font-size: 14px;
        box-sizing: border-box;
        margin: 0;
        font-weight: normal;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 15px;
      }
      .form-group {
        color: #333;
        font-size: 14px;
        font-weight: normal;
        box-sizing: border-box;
        margin-bottom: 8px !important;
        margin: 0px 0px 15px;
        padding-left: 15px;
        padding-right: 15px;
      }
      .input-group {
        color: #333;
        font-size: 14px;
        font-weight: normal;
        box-sizing: border-box;
        position: relative;
        display: table;
        border-collapse: separate;
      }
      .input-group-addon {
        font-size: 14px;
        box-sizing: border-box;
        display: table-cell;
        width: 1%;
        white-space: nowrap;
        vertical-align: middle;
        font-size: 14px;
        font-weight: normal;
        line-height: 1;
        color: #555;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 18px;
        border-right: 0;
        background: #fff;
      }
      .form-control {
        font-size: 14px;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        line-height: 28px;
        padding: 0 5px;
        height: 30px;
        position: relative;
        z-index: 2;
        float: left;
        width: 96%;
        margin-bottom: 0;
      }
      #secret {
        float: right;
        line-height: 30px;
      }
      .btn {
        width: 320px;
        height: 30px;
        background: #0076c1;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 5px;
        box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
        color: #fff;
        text-decoration: none;
      }
      .tips {
        background-color: #f2dede;
        width: 310px;
        height: auto;
        line-height: 22px;
        border: 1px solid transparent;
        color: #a94442;
        border-color: #ebccd1;
        border-radius: 10px;
        margin: 40px 20px 10px 20px;
      }

      .footer {
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 12px;
        color: #8099af;
        text-align: center;
      }

      .sl_log_ewm {
        display: flex;
        padding: 30px 20px 20px 20px;
      }
    </style>
  </head>
  <body>
    <div class="all">
        <div class="top-content">
          <img
            src="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/logo/logo_jw_d.png"
            alt=""
          />
          <span class="edu-system-title">XXXXXXX教學資訊服務平臺</span>
        </div>
        <div class="container">
          <div class="middle-left row">
            <img
              src="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/login_bg_pic.jpg"
              alt=""
              style="background-size: 100% 100%"
            />
          </div>
          <div class="middle-right row">
            <form action="">
              <input type="hidden" />
                <div>
                  <div class="tab-pane">
                    <h2>使用者登入</h2>
                    <div class="form-group">
                      <div class="input-group">
                        <div class="input-group-addon">
                          <img
                            src="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/log_ic01.png"
                            alt=""
                            width="16"
                            height="16"
                          />
                        </div>
                        <input
                          type="text"
                          class="form-control"
                          placeholder="使用者名稱"
                          autocomplete="off"
                        />
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="input-group">
                        <div class="input-group-addon">
                          <img
                            src="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/log_ic02.png"
                            alt=""
                            width="16"
                            height="16"
                          />
                        </div>
                        <input type="password" style="display: none" />
                        <input
                          type="text"
                          class="form-control"
                          placeholder="密碼"
                          onfocus="this.type='password'"
                        />
                      </div>
                      <input type="password" style="display: none" />
                    </div>
                    <div class="form-group" id="secret">
                      <a href="" target="blank">忘記密碼？</a>
                    </div>
                    <div class="form-group">
                      <button type="button" class="btn">登入</button>
                    </div>
                    <div class="tips">
                      <p>
                        1：學生賬號為學號，教職工賬號為職工號，初始密碼均為證件號碼後六位<br>
                        2：密碼忘記請聯絡學院的教學祕書或輔導員
                      </p>
                    </div>
                    <div class="sl_log_ewm">
                      <img
                        src="http://jwgl1.whmc.edu.cn/zftal-ui-v5-1.0.2/assets/images/login_ewm.gif"
                        width="90"
                        height="90"
                      />&nbsp;&nbsp;
                      <div style="margin-top: 30px">
                        用手機掃一掃,<br />安全、便捷登入
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div id="footerID" class="footer">
        <p>
          版權所有&copy; Copyright 1999-2017
          正方軟體股份有限公司　　中國·杭州西湖區紫霞街176號
          網際網路創新創業園2號301
        </p>
      </div>
    </div>
  </body>
</html>

其他

前端入門菜鳥寫的程式碼，難免有些不合理之處，還望見解！如有不正確之處，煩請指出，鄙人感激不盡！！

相關文章