search

博客列表 >京东app首页页眉，页脚组件

京东app首页页眉，页脚组件

手机用户1607314868
手机用户1607314868原创
2020年12月24日 22:03:501168浏览

京东首页页眉页脚代码


  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.         <!-- 字体图标 -->
  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点专场</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>
上一条：酱茄pro小程序发布直播和地理位置功能（WordPress小程序）下一条：实现仿京东商城移动端首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多