亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 37
粉絲 0
評論 0
訪問量 43373
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
京東app首頁頁眉，頁腳組件
手機(jī)用戶1607314868
原創(chuàng)
1362人瀏覽過

京東首頁頁眉頁腳代碼


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>京東首頁模仿</title>
  7.         <!-- 字體圖標(biāo) -->
  8.         <link rel="stylesheet"  href="static/icon-font/iconfont.css">
  9.      <style>
  10.          *{
  11.              margin: 0;
  12.              padding: 0;
  13.              box-sizing: border-box;
  14.          }
  15.          li{
  16.              list-style: none;
  17.          }
  18.          a{
  19.              color: #7b7b7b;
  20.              text-decoration: none;
  21.          }
  22.          body{
  23.              background-color: #f6f6f6;
  24.          }
  25.          html{
  26.              font-size: 10px;
  27.          }
  28.          /* 媒體查詢 */
  29.          @media screen and (min-width:480px){
  30.             html{
  31.                 font-size: 12px;
  32.             }
  33.         }
  34.         @media screen and (min-width:640px){
  35.             html{
  36.                 font-size: 14px;
  37.             }
  38.         }
  39.         @media screen and (min-width:720px){
  40.             html{
  41.                 font-size: 16px;
  42.             }
  43.         }
  44.         .header{
  45.             background-color: #e43130;
  46.             color: white;
  47.             height: 4rem;
  48.             /* 固定定位 */
  49.             position: fixed;
  50.             top: 0;
  51.             left: 0;
  52.             right: 0;
  53.             z-index: 100;
  54.         }
  55.         .header{
  56.             display: flex;
  57.             align-items: center;
  58.         }
  59.         .header .menu{
  60.            text-align: center;
  61.            flex:1;
  62.            font-size: 2.5rem;
  63.         }
  64.         .header .search{
  65.            flex:6;
  66.            background-color: #ffffff;
  67.            padding: 0.5rem;
  68.            border-radius: 3rem;
  69.            display: flex;
  70.         }
  71.         .header .login{
  72.             flex: 1;
  73.             color:white;
  74.            text-align: center;
  75.         }
  76.         .header .search .logo{
  77.             color:#e43130;
  78.             flex:0 1 4rem;
  79.             text-align: center;
  80.             line-height: 2rem;
  81.         }
  82.         .header .search .zoom{
  83.             border-left: 1px solid;
  84.             color:#ccc;
  85.             flex:0 1 4rem;
  86.             line-height: 2rem;
  87.             text-align: center;
  88.         }
  89.         .header .search .words{
  90.             color:#aaa;
  91.             border: none;
  92.             outline: none;
  93.         }
  94.         .main{
  95.              /* 絕對定位 */
  96.             position: absolute;
  97.             top: 4.4rem;
  98.             bottom: 4.4rem;
  99.             left: 0;
  100.             right: 0;
  101.         }
  102.         .footer{
  103.             color:#666;
  104.             background-color: #fafafa;
  105.             height: 4.4rem;
  106.             box-shadow: 0 0 3px #999;
  107.             /* 固定定位 */
  108.             position: fixed;
  109.             bottom: 0;
  110.             left: 0;
  111.             right: 0;
  112.             z-index: 100;           
  113.         }
  114.         .footer{
  115.             display: flex;
  116.             justify-content: space-around;
  117.             align-items: center;
  118.         }
  119.         .footer > div{
  120.             display: flex;
  121.             flex-flow: column nowrap;
  122.             align-items: center;
  123.         }
  124.         .footer > div > .iconfont{
  125.             font-size: 2rem;
  126.         }
  127.         .footer > div > span{
  128.             font-size: 1rem;
  129.         }  
  131.      </style>
  132. </head>
  133. <body>
  134.     <div class="header">
  135.      <div class="menu iconfont icon-menu"></div>
  136.      <div class="search">
  137.          <div class="logo">JD</div>
  138.         <div class="zoom iconfont icon-search"></div>
  139.          <input type="text" class="words"   value="雷克薩斯">
  140.      </div>
  141.      <a href="" class="login">登錄</a>
  142.     </div>
  143.     <div class="main">
  144.         <ul class="nav">
  145.            <!-- 第一組 -->
  146.            <li>
  147.                <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  148.                <a href="">京東超市</a>
  149.            </li>
  150.            <li>
  151.             <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  152.             <a href="">京東超市</a>
  153.            </li>
  154.            <li>
  155.             <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  156.             <a href="">京東超市</a>
  157.            </li>
  158.            <li>
  159.             <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  160.             <a href="">京東超市</a>
  161.            </li>
  162.            <li>
  163.             <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  164.             <a href="">京東超市</a>
  165.            </li>
  166.            <li>
  167.             <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
  168.             <a href="">京東超市</a>
  169.         </li>
  170.         <li>
  171.          <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
  172.          <a href="">京東超市</a>
  173.         </li>
  174.         <li>
  175.          <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
  176.          <a href="">京東超市</a>
  177.         </li>
  178.         <li>
  179.          <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
  180.          <a href="">京東超市</a>
  181.         </li>
  182.         <li>
  183.          <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
  184.          <a href="">京東超市</a>
  185.         </li>
  186.        </ul>
  187.        <div class="ms">
  188.            <div class="ms-top">
  189.                <div class="left">
  190.                    <div class="title">京東秒殺</div>
  191.                     <div class="notice">
  192.                         <div class="tips">22點(diǎn)專場</div>
  193.                         <div class="times">01:11:22</div>
  194.                     </div>
  195.                 </div>
  196.                 <div class="right">更多秒殺</div>
  197.            </div>
  198.            <ul class="ms-body">
  199.                <li class="item">
  200.                    <img src="static/images/ms/ms-1.jpg" alt="">
  201.                     <div class="iconfont icon-rmb">338</div>
  202.                     <div class="iconfont icon-rmb">558</div>
  203.                 </li>
  204.                 <li class="item">
  205.                     <img src="static/images/ms/ms-2.jpg" alt="">
  206.                      <div class="iconfont icon-rmb">338</div>
  207.                      <div class="iconfont icon-rmb">558</div>
  208.                  </li>
  209.                  <li class="item">
  210.                     <img src="static/images/ms/ms-3.jpg" alt="">
  211.                      <div class="iconfont icon-rmb">338</div>
  212.                      <div class="iconfont icon-rmb">558</div>
  213.                  </li>
  214.                  <li class="item">
  215.                     <img src="static/images/ms/ms-4.jpg" alt="">
  216.                      <div class="iconfont icon-rmb">338</div>
  217.                      <div class="iconfont icon-rmb">558</div>
  218.                  </li>
  220.             </ul>
  221.        </div>
  222.        <!-- 推薦 -->
  223.        <h3 class="title">猜你喜歡</h3>
  224.        <ul class="tj">
  225.            <li class="item">
  226.                <a href=""><img src="static/images/sp/sp-1.webp" alt=""></a>
  227.                <p>商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹</p>
  228.                <div class="price">
  229.                     <div class="iconfont icon-rmb">203</div>
  230.                     <div>看相似</div>
  231.                </div>
  232.             </li>
  233.             <li class="item">
  234.                 <a href=""><img src="static/images/sp/sp-2.webp" alt=""></a>
  235.                 <p>商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹</p>
  236.                 <div class="price">
  237.                      <div class="iconfont icon-rmb">203</div>
  238.                      <div>看相似</div>
  239.                 </div>
  240.              </li>
  241.              <li class="item">
  242.                 <a href=""><img src="static/images/sp/sp-3.webp" alt=""></a>
  243.                 <p>商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹</p>
  244.                 <div class="price">
  245.                      <div class="iconfont icon-rmb">203</div>
  246.                      <div>看相似</div>
  247.                 </div>
  248.              </li>
  249.              <li class="item">
  250.                 <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  251.                 <p>商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹</p>
  252.                 <div class="price">
  253.                      <div class="iconfont icon-rmb">203</div>
  254.                      <div>看相似</div>
  255.                 </div>
  256.              </li>
  257.              <li class="item">
  258.                 <a href=""><img src="static/images/sp/sp-5.webp" alt=""></a>
  259.                 <p>商品介紹商品介紹商品介紹商品介紹</p>
  260.                 <div class="price">
  261.                      <div class="iconfont icon-rmb">203</div>
  262.                      <div>看相似</div>
  263.                 </div>
  264.              </li>   
  265.              <li class="item">
  266.                 <a href=""><img src="static/images/sp/sp-6.webp" alt=""></a>
  267.                 <p>商品介紹商品介紹商品介紹商品介紹</p>
  268.                 <div class="price">
  269.                      <div class="iconfont icon-rmb">203</div>
  270.                      <div>看相似</div>
  271.                 </div>
  272.              </li>                                                         
  273.        </ul>
  274.     </div>
  275.     <div class="footer">
  276.         <div>
  277.             <div class="iconfont icon-home"> </div>
  278.              <span>主頁</span>
  279.         </div>
  280.         <div>
  281.             <div class="iconfont icon-layers"> </div>
  282.              <span>分類</span>
  283.         </div>
  284.         <div>
  285.             <div class="iconfont icon-layers"> </div>
  286.              <span>京喜</span>
  287.         </div>
  288.         <div>
  289.             <div class="iconfont icon-shopping-cart"> </div>
  290.              <span>購物車</span>
  291.         </div>
  292.         <div>
  293.             <div class="iconfont icon-user"> </div>
  294.              <span>主頁</span>
  295.         </div>
  296.     </div>
  297. </body>
  298. </html>
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：不錯(cuò),繼續(xù)
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)