效果

代码

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="./css/index.css" />
  8.     <link rel="stylesheet" href="./font_ch8frlcjaoc/iconfont.css" />
  9.     <title>Document</title>
  10.   </head>
  11.   <body>
  12.     <div class="header">
  13.       <!-- 左侧菜单 -->
  14.       <div class="menu iconfont icon-caidan"></div>
  15.       <!-- 中间搜索框 -->
  16.       <div class="search">
  17.         <div class="logo">JD</div>
  18.         <div class="zoom iconfont icon-fangdajing"></div>
  19.         <div class="inputq">
  20.           <input type="text" placeholder="飞行堡垒9" />
  21.         </div>
  22.       </div>
  23.       <!-- 右侧登录 -->
  24.       <div class="login">登录</div>
  25.     </div>
  26.     <div class="main">
  27.       <div class="banner">
  28.         <img src="./img/banner.dpg" alt="" />
  29.       </div>
  30.       <ul class="nav">
  31.         <li>
  32.           <a href="javascript:;"><img src="./img/nav.webp" alt="" /></a>
  33.           <a href="javascript:;">京东生鲜</a>
  34.         </li>
  35.         <li>
  36.           <a href="javascript:;"><img src="./img/nav1.webp" alt="" /></a>
  37.           <a href="javascript:;">京东超市</a>
  38.         </li>
  39.         <li>
  40.           <a href="javascript:;"><img src="./img/nav2.webp" alt="" /></a>
  41.           <a href="javascript:;">数码电器</a>
  42.         </li>
  43.         <li>
  44.           <a href="javascript:;"><img src="./img/nav3.webp" alt="" /></a>
  45.           <a href="javascript:;">京东服饰</a>
  46.         </li>
  47.         <li>
  48.           <a href="javascript:;"><img src="./img/nav4.webp" alt="" /></a>
  49.           <a href="javascript:;">京东到家</a>
  50.         </li>
  51.         <li>
  52.           <a href="javascript:;"><img src="./img/nav5.webp" alt="" /></a>
  53.           <a href="javascript:;">充值缴费</a>
  54.         </li>
  55.         <li>
  56.           <a href="javascript:;"><img src="./img/nav6.webp" alt="" /></a>
  57.           <a href="javascript:;">9.9元拼</a>
  58.         </li>
  59.         <li>
  60.           <a href="javascript:;"><img src="./img/nav7.webp" alt="" /></a>
  61.           <a href="javascript:;">领券</a>
  62.         </li>
  63.         <li>
  64.           <a href="javascript:;"><img src="./img/nav8.webp" alt="" /></a>
  65.           <a href="javascript:;">领金帖</a>
  66.         </li>
  67.         <li>
  68.           <a href="javascript:;"><img src="./img/nav9.webp" alt="" /></a>
  69.           <a href="javascript:;">Plus会员</a>
  70.         </li>
  71.       </ul>
  72.       <div class="ms">
  73.         <div class="msa">
  74.           <div class="ms-header">
  75.             <div>
  76.               <span>京东秒杀</span>
  77.               <span class="ers">20点场</span>
  78.               <div style="color: white">
  79.                 <span class="ms1">00</span>
  80.                 <span>:</span>
  81.                 <span class="ms1">00</span>
  82.                 <span>:</span>
  83.                 <span class="ms1">00</span>
  84.               </div>
  85.             </div>
  86.             <div>
  87.               <span style="color: red">更多秒杀></span>
  88.             </div>
  89.           </div>
  90.           <div class="ms-main">
  91.             <ul>
  92.               <li>
  93.                 <img src="./img/ms1.dpg" alt="" />
  94.                 <p>￥37.1</p>
  95.               </li>
  96.               <li>
  97.                 <img src="./img/ms1.dpg" alt="" />
  98.                 <p>￥37.1</p>
  99.               </li>
  100.               <li>
  101.                 <img src="./img/ms1.dpg" alt="" />
  102.                 <p>￥37.1</p>
  103.               </li>
  104.               <li>
  105.                 <img src="./img/ms1.dpg" alt="" />
  106.                 <p>￥37.1</p>
  107.               </li>
  108.             </ul>
  109.           </div>
  110.         </div>
  111.       </div>
  112.       <div class="tj">
  113.         <ul>
  114.           <li class="item">
  115.             <img src="./img/tj1.webp" alt="" />
  116.             <p>
  117.               御泥坊套装
  118.               葡萄籽原花青素抵御氧化提亮护肤品化妆品水乳套装男女士学生送礼（爽肤水乳洁面眼霜精华霜
  119.             </p>
  120.             <div class="ote">
  121.               <div>￥216.5</div>
  122.               <div>看相似</div>
  123.             </div>
  124.           </li>
  125.           <li class="item">
  126.             <img src="./img/tj1.webp" alt="" />
  127.             <p>
  128.               御泥坊套装
  129.               葡萄籽原花青素抵御氧化提亮护肤品化妆品水乳套装男女士学生送礼（爽肤水乳洁面眼霜精华霜
  130.             </p>
  131.             <div class="ote">
  132.               <div>￥216.5</div>
  133.               <div>看相似</div>
  134.             </div>
  135.           </li>
  136.           <li class="item">
  137.             <img src="./img/tj1.webp" alt="" />
  138.             <p>
  139.               御泥坊套装
  140.               葡萄籽原花青素抵御氧化提亮护肤品化妆品水乳套装男女士学生送礼（爽肤水乳洁面眼霜精华霜
  141.             </p>
  142.             <div class="ote">
  143.               <div>￥216.5</div>
  144.               <div>看相似</div>
  145.             </div>
  146.           </li>
  147.           <li class="item">
  148.             <img src="./img/tj1.webp" alt="" />
  149.             <p>
  150.               御泥坊套装
  151.               葡萄籽原花青素抵御氧化提亮护肤品化妆品水乳套装男女士学生送礼（爽肤水乳洁面眼霜精华霜
  152.             </p>
  153.             <div class="ote">
  154.               <div>￥216.5</div>
  155.               <div>看相似</div>
  156.             </div>
  157.           </li>
  158.         </ul>
  159.       </div>
  160.     </div>
  161.     <div class="footer">
  162.       <div>
  163.         <div class="iconfont icon-shouye_huaban1"></div>
  164.         <div class="wz">首页</div>
  165.       </div>
  166.       <div>
  167.         <div class="iconfont icon-fenlei_"></div>
  168.         <div class="wz">分类</div>
  169.       </div>
  170.       <div>
  171.         <div class="iconfont icon-niu"></div>
  172.         <div class="wz">京喜</div>
  173.       </div>
  174.       <div>
  175.         <div class="iconfont icon-gouwuche"></div>
  176.         <div class="wz">购物车</div>
  177.       </div>
  178.       <div>
  179.         <div class="iconfont icon-denglu"></div>
  180.         <div class="wz">未登录</div>
  181.       </div>
  182.     </div>
  183.   </body>
  184. </html>

CSS

reset.css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. li{
  7.     list-style-type: none;
  8. }
  9. a{
  10.     text-decoration:none;
  11.     color: #7b7b7b;
  12. }
  13. body{
  14.     background-color: #f6f6f6;
  15. }
  16. :root{
  17.     font-size: 10px;
  18. }
  19. body{
  20.     font-size: 1.6rem;
  21. }
  23. @media screen and (min-width: 480px) {
  24.     :root{
  25.         font-size: 12px;
  26.     }
  27. }
  29. @media screen and (min-width:680px){
  30.     :root{
  31.         font-size: 14px;
  32.     }
  33. }
  34. @media screen and (min-width:980px){
  35.     :root{
  36.         font-size: 16px;
  37.     }
  38. }

index.css

  1. @import url(./reset.css);
  2. @import url(./header.css);
  3. @import url(./footer.css);
  4. @import url(./main.css);
  5. /* header  start  */
  7. .header{
  8.     height: 4.4rem;
  9.     background-color:#c82519 ;
  10.     position: fixed;
  11.     left: 0;right: 0;top: 0;
  12.     z-index: 2;
  13. }
  14. /* header  end  */
  16. .main{
  17.     position:absolute;
  18.     top: 4.4rem;left: 0;right: 0;
  19.     height: 107rem;
  20. }
  22. .footer{
  23.     height: 4.4rem;
  24.     background-color: #8b8b8b;
  25.     position: fixed;
  26.     bottom: 0;left: 0;
  27.     right: 0;
  28. }

header.css

  1. .header{
  2.     display:flex;
  3.     align-items: center;
  4. }
  5. .header > .menu{
  6.     color: white;
  7.     font-size: 2rem;
  8.     flex: 1;
  9.     text-align: center;
  10. }
  11. .header > .search{
  12.     background-color: white;
  13.     flex: 6;
  14.     display:flex;
  15.     padding: 0.2rem;
  16.     border-radius: 2rem;
  17.     align-items: center;
  18. }
  19. .header > .search > .logo{
  20.     flex: 0 1 4rem;
  21.     text-align: center;
  22.     font-size: 900;
  23.     color: #ea4648;
  24. }
  25. .header > .search > .zoom{
  26.     color: #d8d8d8;
  27.     text-align: center;
  28.     padding-left: 1rem;
  29.     line-height:2rem;
  30.     flex:0 1 2rem;
  31.     border-left: 1px solid #d8d8d8;
  32. }
  33. .header > .search >.inputq > input{
  34.     border:none;
  35.     outline: none;
  36.     padding-left: 1rem;
  37.     margin-bottom: 0.5rem;
  38. }
  39. .header > .login{
  40.     flex: 1;
  41.     color: white;
  42.     text-align: center;
  43. }
  1. .footer {
  2.     display:flex;
  3.     justify-content: space-around;
  4.     align-items: content;
  5.     background-color: #fff !important;
  6.     box-shadow: 0 0 5px #ccc;
  7. }
  9. .footer div{
  10.     display:flex;
  11.     flex-flow: column nowrap;
  12.     align-items: center;
  13.     margin-top: 0.1rem;
  14. }
  15. .footer div .iconfont{
  16.     font-size: 2rem;
  17.     color: #8b8b8b;
  18. }
  19. .footer div .wz{
  20.     font-size: 1rem;
  21.     color: #ccc;
  22. }

main.css

  1. .main{
  2.     margin-top: 1rem;
  3. }
  4. .main .banner{
  5.     display:flex;
  6.     justify-content:center;
  7. }
  8. .main .banner img{
  9.     /* width: 50rem; */
  10.     flex-basis: 80%;
  11.     /* flex: 1 1; */
  12.     height: 16rem;
  13.     border-radius: 1rem;
  14. }
  15. .nav{
  16.     margin-top: 2rem;
  17. }
  18. .nav img{
  19.     width: 5rem;
  20.     height: 5rem;
  21. }
  22. .main .nav{
  23.     display:flex;
  24.     flex-wrap: wrap;
  25.     justify-content: space-around;
  27. }
  28. .main .nav  li{
  29.     flex-basis: 19%;
  30.     display:flex;
  31.     flex-flow: column nowrap;
  32.     align-items:center
  33. }
  34. .main .ms{
  35.     display:flex;
  36.     justify-content: center;
  37.     margin-top: 2rem;
  38. }
  39. .main .ms img{
  40.     width: 8rem;
  41. }
  42. .main .ms .msa{
  43.     padding: 0.5rem 0.5rem 0.5rem;
  44.     border-radius: 1rem;
  45.     box-shadow: 0 0 1px #ccc;
  46.     width: 95vw;
  47.     background-color: white;
  48.     flex-flow: column nowrap;
  49. }
  50. .main  .ms-header{
  51.     display:flex;
  52.     color: black;
  53.     font-size: 1.5rem;
  54. }
  55. .main  .ms-header div:first-of-type{
  56.     margin: 0 1rem 1rem 1rem;
  57.     flex: 1;
  58.     display:flex;
  59. }
  60. .main ,.ms-header .ers{
  61.     color: red;
  62.     padding-left: 0.5rem;
  63. }
  64. .main .ms-header .ms1{
  65.     background-color: red;
  66.     border-radius: 0.5rem;
  67. }
  68. .main .ms-main > ul{
  69.     display:flex;
  70. }
  71. .main .ms-main > ul>li{
  72.     display:flex;
  73.     flex-flow: column wrap;
  74.     align-items: center;
  75.     flex:1 1 auto;
  77. }
  79. .main .tj > ul{
  80.     display:flex;
  81.     flex-flow: row wrap;
  82.     margin: 2rem 1.5rem 0 1.5rem;
  83.     border-radius: 2rem;
  84.     font-size: 1.1rem;
  85.     justify-content:center;
  86. }
  87. .main .tj > ul img{
  88.     width: 100%;
  89.     height: 100%;
  90. }
  91. .main .tj > ul  .item p {
  92.     color: #1a1a1a;
  93.     font-size: 1rem;
  94. }
  95. .main .tj > ul  .item{
  96.     flex-basis: 50%;
  97.     display:flex;
  98.     flex-flow: column nowrap;
  99.     padding: 1rem;
  100. }
  101. .main .tj > ul  .item div{
  102.     display:flex;
  103.     justify-content:space-between;
  104.     flex:row nowrap;
  105. }
  107. .main .tj > ul  .item .ote div:last-of-type{
  108.     color: #80809e;
  109.     background-color: #f0f2f5;
  110.     border-radius: 2rem;
  111.     font-size: 1rem;
  112.     padding: 0.5rem;
  113. }
  114. .main .tj > ul  .item .ote div:first-of-type{
  115.     color: red;
  116.     font-size: 1.5rem;
  117. }

更多相关文章

  1. linux centos 宝塔主机控制面板安装和安全狗安装过程记录
  2. Android Things：“1024工场”店铺开张啦！树莓派套装首发—专为Andr

随机推荐

  1. Android多屏幕支持Multi-WindowSupport
  2. Android中获取屏幕相关信息（屏幕大小，状态
  3. android配置文件——ConfigChanges
  4. Android:漫画APP开发笔记之ListView中图
  5. PhoneGap Android环境搭建
  6. Android的源代码下载教程
  7. android第一行代码实战篇——一个小错误
  8. 2010.11.28(2)———android 展示网页 和
  9. UI组件之AdapterView及其子类（二）GridView
  10. 什么是Android-Android中文SDK