search

博客列表 >作业_0706

作业_0706

bloght5386
bloght5386原创
2021年07月21日 15:45:50694浏览

作业内容：将仿京东移动端首页的”秒杀区”样式, 参考代码放在QQ群中了

  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.     <title>index4推荐商品区</title>
  8.     <link rel="stylesheet" href="static/css/index.css" />
  9.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  10.     <link rel="stylesheet" href="static/css/header.css" />
  11.     <link rel="stylesheet" href="static/css/footer.css" />
  12.     <link rel="stylesheet" href="static/css/nav.css" />
  13.     <link rel="stylesheet" href="static/css/tj.css" />
  14.     <link rel="stylesheet" href="static/css/ms.css">
  15.   </head>
  16.   <body>
  17.     <!-- 页眉 -->
  18.     <div class="header">
  19.       <!-- 左： 菜单按钮 -->
  20.       <div class="menu iconfont icon-menu"></div>
  22.       <!-- 中：搜索框 -->
  23.       <div class="search">
  24.         <div class="logo">JD</div>
  25.         <div class="zoom iconfont icon-search"></div>
  26.         <input type="text" value="台式机组装" class="words" />
  27.       </div>
  29.       <!-- 右： 登录按钮 -->
  30.       <a href="" class="login">登录</a>
  31.     </div>
  33.     <!-- 主体 -->
  34.     <div class="main">
  35.       <!-- 主导航区 -->
  36.       <ul class="nav">
  37.         <li>
  38.           <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  39.           <a href="">京东超市</a>
  40.         </li>
  41.         <li>
  42.           <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  43.           <a href="">数码电器</a>
  44.         </li>
  45.         <li>
  46.           <a href=""><img src="static/images/dh/nav-3.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-5.png" alt="" /></a>
  55.           <a href="">京东到家</a>
  56.         </li>
  58.         <!-- 第二组 -->
  59.         <li>
  60.           <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  61.           <a href="">充值缴费</a>
  62.         </li>
  63.         <li>
  64.           <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  65.           <a href="">9.9元拼</a>
  66.         </li>
  67.         <li>
  68.           <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  69.           <a href="">领券</a>
  70.         </li>
  71.         <li>
  72.           <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  73.           <a href="">领金贴</a>
  74.         </li>
  75.         <li>
  76.           <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  77.           <a href="">PLUS会员</a>
  78.         </li>
  79.       </ul>
  81.            <!-- 秒杀区 -->
  82.    <div class="ms">
  83.     <!-- 秒杀头部 -->
  84.     <div class="ms-top">
  85.      <div class="left">
  86.        <div class="title">京东秒杀</div>
  87.        <div class="notice">
  88.          <div class="tips">20点专场</div>
  89.          <div class="time">01:40:33</div>
  90.        </div>
  91.      </div>
  92.      <div class="right">更多秒杀</div>
  93.    </div>
  94.    <!-- 秒杀主体区 -->
  95.     <ul class="ms-body">
  96.       <li class="item">
  97.         <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  98.         <div class="iconfont icon-rmb">338</div>
  99.         <div class="iconfont icon-rmb">558</div>
  100.       </li>
  101.       <li class="item">
  102.         <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  103.         <div class="iconfont icon-rmb">3456</div>
  104.         <div class="iconfont icon-rmb">4567</div>
  105.       </li>
  106.       <li class="item">
  107.         <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  108.         <div class="iconfont icon-rmb">789</div>
  109.         <div class="iconfont icon-rmb">999</div>
  110.       </li>
  111.       <li class="item">
  112.         <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  113.         <div class="iconfont icon-rmb">3213</div>
  114.         <div class="iconfont icon-rmb">4532</div>
  115.       </li>
  117.     </ul>
  118. </div>
  120.       <!-- 推荐商品区 -->
  121.       <ul class="tj">
  122.         <li class="item">
  123.           <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  124.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  125.           <div class="price">
  126.             <div class="iconfont icon-rmb">79</div>
  127.             <div>看相似</div>
  128.           </div>
  129.         </li>
  130.         <li class="item">
  131.           <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  132.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  133.           <div class="price">
  134.             <div class="iconfont icon-rmb">79</div>
  135.             <div>看相似</div>
  136.           </div>
  137.         </li>
  138.         <li class="item">
  139.           <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  140.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  141.           <div class="price">
  142.             <div class="iconfont icon-rmb">79</div>
  143.             <div>看相似</div>
  144.           </div>
  145.         </li>
  146.         <li class="item">
  147.           <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  148.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  149.           <div class="price">
  150.             <div class="iconfont icon-rmb">79</div>
  151.             <div>看相似</div>
  152.           </div>
  153.           <li class="item">
  154.             <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  155.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  156.             <div class="price">
  157.               <div class="iconfont icon-rmb">79</div>
  158.               <div>看相似</div>
  159.             </div>
  160.           </li>
  161.           <li class="item">
  162.             <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  163.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  164.             <div class="price">
  165.               <div class="iconfont icon-rmb">79</div>
  166.               <div>看相似</div>
  167.             </div>
  168.           </li>
  169.           <li class="item">
  170.             <a href=""><img src="static/images/sp/sp-7.webp" alt="" /></a>
  171.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  172.             <div class="price">
  173.               <div class="iconfont icon-rmb">79</div>
  174.               <div>看相似</div>
  175.             </div>
  176.           </li>
  177.           <li class="item">
  178.             <a href=""><img src="static/images/sp/sp-8.webp" alt="" /></a>
  179.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  180.             <div class="price">
  181.               <div class="iconfont icon-rmb">79</div>
  182.               <div>看相似</div>
  183.             </div>
  184.           </li>
  185.         </li>
  186.       </ul>
  187.     </div>
  189.     <!-- 页脚 -->
  190.     <div class="footer">
  191.       <div>
  192.         <!-- 上面放图标 -->
  193.         <div class="iconfont icon-home"></div>
  194.         <!-- 下面放文本 -->
  195.         <span>首页</span>
  196.       </div>
  198.       <div>
  199.         <div class="iconfont icon-home"></div>
  200.         <span>分类</span>
  201.       </div>
  202.       <div>
  203.         <div class="iconfont icon-home"></div>
  204.         <span>京喜</span>
  205.       </div>
  206.       <div>
  207.         <div class="iconfont icon-home"></div>
  208.         <span>购物车</span>
  209.       </div>
  210.       <div>
  211.         <div class="iconfont icon-home"></div>
  212.         <span>未登录</span>
  213.       </div>
  214.     </div>
  215.   </body>
  216. </html>

Css代码

  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.     <title>index4推荐商品区</title>
  8.     <link rel="stylesheet" href="static/css/index.css" />
  9.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  10.     <link rel="stylesheet" href="static/css/header.css" />
  11.     <link rel="stylesheet" href="static/css/footer.css" />
  12.     <link rel="stylesheet" href="static/css/nav.css" />
  13.     <link rel="stylesheet" href="static/css/tj.css" />
  14.     <link rel="stylesheet" href="static/css/ms.css">
  15.   </head>
  16.   <body>
  17.     <!-- 页眉 -->
  18.     <div class="header">
  19.       <!-- 左： 菜单按钮 -->
  20.       <div class="menu iconfont icon-menu"></div>
  22.       <!-- 中：搜索框 -->
  23.       <div class="search">
  24.         <div class="logo">JD</div>
  25.         <div class="zoom iconfont icon-search"></div>
  26.         <input type="text" value="台式机组装" class="words" />
  27.       </div>
  29.       <!-- 右： 登录按钮 -->
  30.       <a href="" class="login">登录</a>
  31.     </div>
  33.     <!-- 主体 -->
  34.     <div class="main">
  35.       <!-- 主导航区 -->
  36.       <ul class="nav">
  37.         <li>
  38.           <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  39.           <a href="">京东超市</a>
  40.         </li>
  41.         <li>
  42.           <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  43.           <a href="">数码电器</a>
  44.         </li>
  45.         <li>
  46.           <a href=""><img src="static/images/dh/nav-3.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-5.png" alt="" /></a>
  55.           <a href="">京东到家</a>
  56.         </li>
  58.         <!-- 第二组 -->
  59.         <li>
  60.           <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  61.           <a href="">充值缴费</a>
  62.         </li>
  63.         <li>
  64.           <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  65.           <a href="">9.9元拼</a>
  66.         </li>
  67.         <li>
  68.           <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  69.           <a href="">领券</a>
  70.         </li>
  71.         <li>
  72.           <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  73.           <a href="">领金贴</a>
  74.         </li>
  75.         <li>
  76.           <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  77.           <a href="">PLUS会员</a>
  78.         </li>
  79.       </ul>
  81.            <!-- 秒杀区 -->
  82.    <div class="ms">
  83.     <!-- 秒杀头部 -->
  84.     <div class="ms-top">
  85.      <div class="left">
  86.        <div class="title">京东秒杀</div>
  87.        <div class="notice">
  88.          <div class="tips">20点专场</div>
  89.          <div class="time">01:40:33</div>
  90.        </div>
  91.      </div>
  92.      <div class="right">更多秒杀</div>
  93.    </div>
  94.    <!-- 秒杀主体区 -->
  95.     <ul class="ms-body">
  96.       <li class="item">
  97.         <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  98.         <div class="iconfont icon-rmb">338</div>
  99.         <div class="iconfont icon-rmb">558</div>
  100.       </li>
  101.       <li class="item">
  102.         <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  103.         <div class="iconfont icon-rmb">3456</div>
  104.         <div class="iconfont icon-rmb">4567</div>
  105.       </li>
  106.       <li class="item">
  107.         <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  108.         <div class="iconfont icon-rmb">789</div>
  109.         <div class="iconfont icon-rmb">999</div>
  110.       </li>
  111.       <li class="item">
  112.         <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  113.         <div class="iconfont icon-rmb">3213</div>
  114.         <div class="iconfont icon-rmb">4532</div>
  115.       </li>
  117.     </ul>
  118. </div>
  120.       <!-- 推荐商品区 -->
  121.       <ul class="tj">
  122.         <li class="item">
  123.           <a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a>
  124.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  125.           <div class="price">
  126.             <div class="iconfont icon-rmb">79</div>
  127.             <div>看相似</div>
  128.           </div>
  129.         </li>
  130.         <li class="item">
  131.           <a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a>
  132.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  133.           <div class="price">
  134.             <div class="iconfont icon-rmb">79</div>
  135.             <div>看相似</div>
  136.           </div>
  137.         </li>
  138.         <li class="item">
  139.           <a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a>
  140.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  141.           <div class="price">
  142.             <div class="iconfont icon-rmb">79</div>
  143.             <div>看相似</div>
  144.           </div>
  145.         </li>
  146.         <li class="item">
  147.           <a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a>
  148.           <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  149.           <div class="price">
  150.             <div class="iconfont icon-rmb">79</div>
  151.             <div>看相似</div>
  152.           </div>
  153.           <li class="item">
  154.             <a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a>
  155.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  156.             <div class="price">
  157.               <div class="iconfont icon-rmb">79</div>
  158.               <div>看相似</div>
  159.             </div>
  160.           </li>
  161.           <li class="item">
  162.             <a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a>
  163.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  164.             <div class="price">
  165.               <div class="iconfont icon-rmb">79</div>
  166.               <div>看相似</div>
  167.             </div>
  168.           </li>
  169.           <li class="item">
  170.             <a href=""><img src="static/images/sp/sp-7.webp" alt="" /></a>
  171.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  172.             <div class="price">
  173.               <div class="iconfont icon-rmb">79</div>
  174.               <div>看相似</div>
  175.             </div>
  176.           </li>
  177.           <li class="item">
  178.             <a href=""><img src="static/images/sp/sp-8.webp" alt="" /></a>
  179.             <p>icon艾肯声卡手机直播转换器，苹果安卓通用直播转换器，苹果安卓通用</p>
  180.             <div class="price">
  181.               <div class="iconfont icon-rmb">79</div>
  182.               <div>看相似</div>
  183.             </div>
  184.           </li>
  185.         </li>
  186.       </ul>
  187.     </div>
  189.     <!-- 页脚 -->
  190.     <div class="footer">
  191.       <div>
  192.         <!-- 上面放图标 -->
  193.         <div class="iconfont icon-home"></div>
  194.         <!-- 下面放文本 -->
  195.         <span>首页</span>
  196.       </div>
  198.       <div>
  199.         <div class="iconfont icon-home"></div>
  200.         <span>分类</span>
  201.       </div>
  202.       <div>
  203.         <div class="iconfont icon-home"></div>
  204.         <span>京喜</span>
  205.       </div>
  206.       <div>
  207.         <div class="iconfont icon-home"></div>
  208.         <span>购物车</span>
  209.       </div>
  210.       <div>
  211.         <div class="iconfont icon-home"></div>
  212.         <span>未登录</span>
  213.       </div>
  214.     </div>
  215.   </body>
  216. </html>
上一条：定位原理、模态框以及三列布局下一条：Jquery 与 原生 js的对比
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多