網站後臺案例練習

正達建築內部管理平臺

採用BFC規範使左側固定，主體部分自適應

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>正達建築內部管理平臺</title>
    <!-- 引入公共樣式 -->
    <link rel="stylesheet" href="./css/commoon.css" />
    <!-- 引入字體圖標樣式 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <!-- 引入首頁樣式 -->
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <!-- header start -->
    <header id="header">
      <hgroup class="header_logo fl">
        <h1 class="fl"><img src="./images/logo.png" alt="" /></h1>
        <h2 class="fl">正達建築內部管理平臺</h2>
      </hgroup>
      <ul class="header_nav fr">
        <li><i class="iconfont iconwode"></i> 歡迎您，武劍 管理員</li>
        <li><i class="iconfont iconyuechi"></i> <a href="#">修改密碼</a></li>
        <li><i class="iconfont iconshouye"></i> <a href="#">公司官網</a></li>
        <li><i class="iconfont iconplus-share"></i><a href="#"> 退出</a></li>
      </ul>
    </header>
    <!-- header end -->

    <!-- 主體 start -->
    <!-- 採用BFC規範做左邊固定，右邊自適應 -->
    <aside id="menu" class="fl">
      <ul>
        <li class="active">
          <a href="#">
            <i class="iconfont iconloukongguanli"></i>
            <p>項目管理</p>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont iconyonghuxinxi"></i>
            <p>用戶管理</p>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont iconshezhi"></i>
            <p>系統設置</p>
          </a>
        </li>
      </ul>
    </aside>
    <!-- main start -->
    <main id="main">
      <section class="main_container">
        <section id="projectTitle" class="clear">
          <div class="projectTitle_text fl">
            <h2>
              青田高灣綠園一期、二期工程 <i class="iconfont iconbianji"></i>
            </h2>
            <p>
              項目編號：<span>CN0000507</span><br />
              項目類型：<span>在建工程</span><br />
              項目負責人：<span>梅海麗</span><br />
              手機號碼：<span>15869168967</span>
            </p>
          </div>
          <div class="projectTitle_img fr">
            <img src="./images/prpject.jpg" alt="" />
          </div>
        </section>
        <section id="projectList">
          <div class="projectList_btns">
            <ul>
              <li>視頻監控</li>
              <li>考勤管理</li>
              <li>安全巡查</li>
              <li class="active">資料管理</li>
            </ul>
          </div>
          <div class="projectList_cons">
            <div>視頻監控</div>
            <div>考勤管理</div>
            <div>安全巡查</div>
            <div class="show">
              <div class="zl_upload1 fl">
                <label for="#">
                  <input type="file" />
                  <i class="iconfont iconshangchuan1"></i>
                  單個上傳
                </label>
              </div>
              <div class="zl_upload2 fl">
                <label for="#">
                  <input type="file" multiple />
                  <i class="iconfont iconshangchuan"></i>
                  批量上傳
                </label>
              </div>
              <div class="zl_search fr">
                <input type="text" placeholder="請輸入關鍵字" /><button>
                  <i class="iconfont iconsuosou"></i>
                </button>
              </div>
              <table class="zl_table">
                <thead>
                  <tr>
                    <th width="49" ><input type="checkbox" /></th>
                    <th>文檔名稱</th>
                    <th width="167" >文檔大小</th>
                    <th width="148">上傳者</th>
                    <th width="168">上傳時間</th>
                    <th width="81">操作</th>
                  </tr>
                  <tbody>
                     
                      <tr>
                          <td><input type="checkbox"></td>
                          <td> <i class="iconfont iconword"></i> 安全專項方案.doc</td>
                          <td>21.3KB</td>
                          <td>陳文耀</td>
                          <td>2016-03-14</td>
                          <td><i class="iconfont iconxiazai"></i><i class="iconfont iconshanchushaixuanxiang
                            "></i></td>
                      </tr>
                      
                      <tr>
                          <td><input type="checkbox"></td>
                          <td> <i class="iconfont iconword"></i> 安全專項方案.doc</td>
                          <td>21.3KB</td>
                          <td>陳文耀</td>
                          <td>2016-03-14</td>
                          <td><i class="iconfont iconxiazai"></i><i class="iconfont iconshanchushaixuanxiang
                            "></i></td>
                      </tr>
                      <tr>
                          <td><input type="checkbox"></td>
                          <td> <i class="iconfont iconword"></i> 安全專項方案.doc</td>
                          <td>21.3KB</td>
                          <td>陳文耀</td>
                          <td>2016-03-14</td>
                          <td><i class="iconfont iconxiazai"></i><i class="iconfont iconshanchushaixuanxiang
                            "></i></td>
                      </tr>
                      <tr>
                          <td><input type="checkbox"></td>
                          <td> <i class="iconfont iconword"></i> 安全專項方案.doc</td>
                          <td>21.3KB</td>
                          <td>陳文耀</td>
                          <td>2016-03-14</td>
                          <td><i class="iconfont iconxiazai"></i><i class="iconfont iconshanchushaixuanxiang
                            "></i></td>
                      </tr>
                      <tr>
                          <td><input type="checkbox"></td>
                          <td> <i class="iconfont iconword"></i> 安全專項方案.doc</td>
                          <td>21.3KB</td>
                          <td>陳文耀</td>
                          <td>2016-03-14</td>
                          <td><i class="iconfont iconxiazai"></i><i class="iconfont iconshanchushaixuanxiang
                            "></i></td>
                      </tr>
                      
                      <tr>
                          <td><input type="checkbox"></td>
                          <td> <i class="iconfont iconword"></i> 安全專項方案.doc</td>
                          <td>21.3KB</td>
                          <td>陳文耀</td>
                          <td>2016-03-14</td>
                          <td><i class="iconfont iconxiazai"></i><i class="iconfont iconshanchushaixuanxiang
                            "></i></td>
                      </tr>
                  </tbody>
                </thead>
              </table>
              <div class="zl_footer">
                  <button class="zl_remove">批量刪除</button>
                  <button class="zl_download">批量下載</button>
                  <div class="zl_page fr">
                      <a href="#">共12條</a>
                      <a href="#">首頁</a>
                      <a href="#">上一頁</a>
                      <a href="#" class="active">1</a>
                      <a href="#">2</a>
                      <a href="#">3</a>
                      <a href="#">下一頁</a>
                      <a href="#">尾頁</a>
                  </div>
              </div>
            </div>
          </div>
        </section>
      </section>
    </main>
    <!-- footer start -->
    <footer id="footer">
      Copyright © 2009 -2016 麗水市正達建築工程有限公司 All rights reserved.
      技術支持：紅點智能
    </footer>
  </body>
</html>

index.css

/* header strat */

#header {
    height: 80px;
    background-color: #018FFB;
}

#header .header_logo h1 {
    margin: 19px 14px 25px 20px;
}

#header .header_logo h2 {
    color: white;
    font-size: 24px;
    line-height: 25px;
    margin-top: 28px;
}

#header .header_nav {
    font-size: 14px;
    line-height: 14px;
    margin-top: 33px;
    color: white;
}

#header .header_nav li {
    float: left;
    margin-right: 25px;
}

#header .header_nav a {
    color: white;
}

#header .header_nav i {
    margin-right: 8px;
}

#header .header_nav i.iconwode {
    position: relative;
    top: 4px;
    line-height: 8px;
    font-size: 24px;
}

#header .header_nav i.iconshouye {
    position: relative;
    top: 2px;
    line-height: 12px;
    font-size: 20px;
}

/*  menu start*/

#menu {
    width: 200px;
    background-color: #424147;
    height: calc(100% - 85px);
}

#menu ul {
    color: #9A999E;
    text-align: center;
}

#menu ul li {
    height: 140px;
    border-bottom: 1px solid #3A393E;
    border-top: 1px solid #49484E;
}

#menu li a {
    /* 繼承 */
    color: inherit;
    height: 100%;
    display: block;
    padding-top: 35px;
    box-sizing: border-box;
}

#menu li i {
    font-size: 40px;
}

#menu .active {
    color: #FFFFFF;
    background-color: #4E4D53;
}

#menu li p {
    margin-top: 15px;
}

/* main start */

#main {
    /* 觸發BFC */
    overflow: hidden;
    height: calc(100% - 85px - 50px);
}

#main .main_container {
    height: 100%;
    overflow: auto;
}

#main .projectTitle_text {
    padding-left: 22px;
}

#main .projectTitle_text h2 {
    font-size: 24px;
    color: #333333;
    margin-top: 21px;
}

#main .projectTitle_text h2 i {
    font-size: 22px;
    color: #cccccc;
    padding-left: 30px;
}

#main .projectTitle_text p {
    font-size: 14px;
    line-height: 30px;
    margin: 10px 0 13px 0;
}

#main .projectTitle_text p span {
    color: #999999;
}

#main .projectTitle_img {
    width: 200px;
    height: 149px;
    margin-right: 20px;
    margin-top: 20px;
}

#projectList .projectList_btns {
    height: 54px;
    background-color: #F1F9FC;
    border-top: 1px solid #E0EAEF;
    border-bottom: 1px solid #DBE7ED;
}

#projectList .projectList_btns ul {
    margin: 14px 0 0 20px;
}

#projectList .projectList_btns ul li {
    float: left;
    width: 108px;
    height: 39px;
    border: solid 1px #DBE7ED;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 12px;
    background-color: #FBFEFF;
    font-size: 16px;
    line-height: 39px;
    color: #666666;
    text-align: center;
    cursor: pointer;
}

#projectList .projectList_btns ul li.active {
    position: relative;
    background-color: #018FFB;
    color: #FFFFFF;
}

#projectList .projectList_btns ul li.active::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -6px;
    width: 11px;
    height: 6px;
    background: url("../images/arrow.png") no-repeat;
}

#projectList .projectList_cons {
    margin: 20px;
}

#projectList .projectList_cons>div {
    display: none;
}

#projectList .projectList_cons>div.show {
    display: block;
}

#projectList .zl_upload1,
#projectList .zl_upload2 {
    width: 110px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#projectList .zl_upload1 input,
#projectList .zl_upload2 input {
    display: none;
}

#projectList .zl_upload1 label,
#projectList .zl_upload2 label {
    cursor: pointer;
}

#projectList .zl_upload1 {
    background: #5FD15C;
}

#projectList .zl_upload2 {
    background: #34C1DA;
    margin-left: 20px;
}

#projectList .iconshangchuan1 {
    font-size: 12px;
    position: relative;
    top: -1px;
}

#projectList .zl_search {
    width: 210px;
    height: 30px;
    border: 1px #dbe7ed solid;
    border-radius: 5px;
    overflow: hidden;
}

#projectList .zl_search input {
    border: none;
    width: 177px;
    height: 100%;
    color: #999999;
    font-size: 14px;
    text-indent: 9px;
    position: relative;
    top: -3px;
    outline: none;
}

#projectList .zl_search button {
    width: 32px;
    height: 32px;
    border: none;
    border-left: 1px #dbe7ed solid;
    background-image: linear-gradient(#FCFDFD, #F1F9FC);
    cursor: pointer;
}

#projectList .zl_search i {
    font-size: 18px;
    font-weight: bold;
    color: #A1C6D4;
}

/* table部分 */
#projectList .zl_table {
    /* 與上面的距離不建議使用margin,因爲上面有浮動元素 */
    /* 這裏使用相對定位 */
    position: relative;
    top: 20px;
    clear: both;
    width: 100%;
    border: 1px solid #DBE7ED;
    font-size: 12px;
    border-collapse: collapse;
}

#projectList .zl_table tr {
    height: 32px;
    border-bottom: 1px solid #E7EFF3;
}

#projectList .zl_table tr:hover {
    background-color: #F1F9FC;
}

#projectList .zl_table th {
    border-right: 1px solid #DBE7ED;
    color: #666666;
    font-weight: normal;
    text-align: left;
    text-indent: 12px;
    background-color: #F1F9FC;
}

#projectList .zl_table td:first-child,
#projectList .zl_table th:first-child {
    text-align: center;
    text-indent: 0;
}

#projectList .zl_table td {
    text-indent: 12px;
}

#projectList .zl_table .iconword {
    margin-right: 13px;
    color: #0073CC;
}

#projectList .zl_table .iconxiazai {
    color: #3DA2F0;
    margin-right: 18px;
}

#projectList .zl_table .iconshanchushaixuanxiang {
    color: #D94141;
}


/* 尾部 */
#projectList .zl_footer {
    height: 70px;
    border: 1px solid #DBE7ED;
    border-top: none;
    margin-top: 20px;
    overflow: hidden;
}

#projectList .zl_remove,
#projectList .zl_download {
    width: 78px;
    height: 24px;
    border: 1px solid #C9E4F1;
    font-size: 12px;
    color: #1B84BA;
    border-radius: 5px;
    margin-top: 18px;
    cursor: pointer;

    /* 漸變色 */
    background-image: linear-gradient(#F7FCFF, #E7F4FA);
}

#projectList .zl_remove {
    margin-right: 15px;
    margin-left: 22px;
}

#projectList .zl_page {

    margin: 18px 22px 0 0;
    /* 解決a之間的空隙  */
    font-size: 0;
}

#projectList .zl_page a {
    font-size: 12px;
    line-height: 24px;
    padding: 6px 9px;
    background-color: #FAFAFA;
    border: 1px solid #E6E6E6;
    margin-left: 10px;
}

#projectList .zl_page a.active {
    background-color: #42ADFF;
    border: 1px solid #3797E0;
}



/* footer start */
#footer {
    height: 49px;
    color: #909191;
    font-size: 12px;
    line-height: 49px;
    text-align: right;
    padding-right: 20px;
    border-top: 1px solid #DBE7ED;
    background-color: #F1F9FC;
}

common.css

/* 清除默認樣式 */
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

img {
    display: block;
}

h1,
h2,
h3 {
    font-size: 16px;
    font-weight: normal;

}

a {
    /* 去掉下劃線 */
    text-decoration: none;
    color: #333333;
}

html,
body {
    height: 100%;
    font-family: Arial;
    /* 不使滾動條出現 */
    overflow-y: hidden;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

/* 清除浮動 */
.clear:after {
    content: "";
    display: block;
    clear: both;
}

效果：

網站後臺案例練習

正達建築內部管理平臺

移動web開發學習整理

博學谷案例練習

小米首頁案例練習

蘇寧易購首頁局部案例練習

簡書首頁案例練習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結