Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1223 京东移动端首页
Blogger Information
Blog 15
fans 0
comment 0
visits 9225
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1223 京东移动端首页
fanyigle_php
Original
517 people have browsed it

按照老师的思路把首页DOM写了一遍

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <!-- 页眉-->
  8.     <link rel="stylesheet" href="static/css/header.css" />
  9.     <!-- 主页 -->
  10.     <link rel="stylesheet" href="static/css/index.css" />
  11.     <!-- 字体图标 -->
  12.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  13.     <!-- 导航 -->
  14.     <link rel="stylesheet" href="static/css/nav.css" />
  15.     <!-- 秒杀     -->
  16.     <link rel="stylesheet" href="static/css/ms.css" />
  17.     <!-- 推荐区 -->
  18.     <link rel="stylesheet" href="static/css/tj.css" />
  19.     <!-- 页脚 -->
  20.     <link rel="stylesheet" href="static/css/footer.css" />
  21.     <title>京东</title>
  22.   </head>
  23.   <body>
  24.     <!-- 页眉 -->
  25.     <div class="header">
  26.       <!--菜单-->
  27.       <div class="menu iconfont icon-menu"></div>
  28.       <!-- 输入框 -->
  29.       <div class="search">
  30.         <div class="logo">JD</div>
  31.         <div class="zoom iconfont icon-search"></div>
  32.         <input type="text" name="" id="" class="words" />
  33.       </div>
  34.       <!-- 登录按钮 -->
  35.       <a href="" class="login">登录</a>
  36.     </div>
  37.     <!-- 主体 -->
  38.     <div class="main">
  39.       <!-- 导航区 -->
  40.       <ul class="nav">
  41.         <li>
  42.           <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  43.           <a href="">京东超市</a>
  44.         </li>
  45.         <li>
  46.           <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  47.           <a href="">数码电器</a>
  48.         </li>
  49.         <li>
  50.           <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  51.           <a href="">京东服饰</a>
  52.         </li>
  53.         <li>
  54.           <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  55.           <a href="">京东生鲜</a>
  56.         </li>
  57.         <li>
  58.           <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  59.           <a href="">京东到家</a>
  60.         </li>
  61.         <li>
  62.           <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  63.           <a href="">充值缴费</a>
  64.         </li>
  65.         <li>
  66.           <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  67.           <a href="">9.9元拼</a>
  68.         </li>
  69.         <li>
  70.           <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  71.           <a href="">领券</a>
  72.         </li>
  73.         <li>
  74.           <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  75.           <a href="">领金贴</a>
  76.         </li>
  77.         <li>
  78.           <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  79.           <a href="">PLUS会员</a>
  80.         </li>
  81.       </ul>
  83.       <!-- 秒杀区 -->
  84.       <!-- 秒杀头部 -->
  85.       <div class="ms">
  86.         <div class="ms-top">
  87.           <div class="left">
  88.             <div class="title">京东秒杀</div>
  89.             <div class="notice">
  90.               <div class="tips">22点场</div>
  91.               <div class="time">01:02:03</div>
  92.             </div>
  93.           </div>
  94.           <div class="right">更多秒杀</div>
  95.         </div>
  97.         <!-- 秒杀商品列表 -->
  98.         <ul class="ms-body">
  99.           <li class="item">
  100.             <a href=""><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  101.             <div class="iconfont icon-rmb">388</div>
  102.             <div class="iconfont icon-rmb">588</div>
  103.           </li>
  105.           <li class="item">
  106.             <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  107.             <div class="iconfont icon-rmb">3881</div>
  108.             <div class="iconfont icon-rmb">5881</div>
  109.           </li>
  110.           <li class="item">
  111.             <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  112.             <div class="iconfont icon-rmb">288</div>
  113.             <div class="iconfont icon-rmb">388</div>
  114.           </li>
  115.           <li class="item">
  116.             <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  117.             <div class="iconfont icon-rmb">1388</div>
  118.             <div class="iconfont icon-rmb">1588</div>
  119.           </li>
  120.         </ul>
  121.       </div>
  123.       <!-- 推荐区 -->
  125.       <h2 class="title">猜你喜欢</h2>
  126.       <ul class="tj">
  127.         <li class="item">
  128.           <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  129.           <p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p>
  130.           <div class="price">
  131.             <div class="iconfont icon-rmb">233</div>
  132.             <div>看相似</div>
  133.           </div>
  134.         </li>
  135.         <li class="item">
  136.           <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  137.           <p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p>
  138.           <div class="price">
  139.             <div class="iconfont icon-rmb">233</div>
  140.             <div>看相似</div>
  141.           </div>
  142.         </li>
  143.         <li class="item">
  144.           <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  145.           <p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p>
  146.           <div class="price">
  147.             <div class="iconfont icon-rmb">233</div>
  148.             <div>看相似</div>
  149.           </div>
  150.         </li>
  151.         <li class="item">
  152.           <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  153.           <p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p>
  154.           <div class="price">
  155.             <div class="iconfont icon-rmb">233</div>
  156.             <div>看相似</div>
  157.           </div>
  158.         </li>
  159.         <li class="item">
  160.           <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  161.           <p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p>
  162.           <div class="price">
  163.             <div class="iconfont icon-rmb">233</div>
  164.             <div>看相似</div>
  165.           </div>
  166.         </li>
  167.         <li class="item">
  168.           <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  169.           <p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p>
  170.           <div class="price">
  171.             <div class="iconfont icon-rmb">233</div>
  172.             <div>看相似</div>
  173.           </div>
  174.         </li>
  175.       </ul>
  176.     </div>
  177.     <!-- 页脚 -->
  178.     <div class="footer">
  179.       <div>
  180.         <div class="iconfont icon-home"></div>
  181.         <span>首页</span>
  182.       </div>
  183.       <div>
  184.         <div class="iconfont icon-layers"></div>
  185.         <span>分类</span>
  186.       </div>
  187.       <div>
  188.         <div class="iconfont icon-kehuguanli"></div>
  189.         <span>京喜</span>
  190.       </div>
  191.       <div>
  192.         <div class="iconfont icon-shopping-cart"></div>
  193.         <span>购物车</span>
  194.       </div>
  195.       <div>
  196.         <div class="iconfont icon-shopping-cart"></div>
  197.         <span>用户中心</span>
  198.       </div>
  199.     </div>
  200.   </body>
  201. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实不合格,没图
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post