search

博客列表 >flex实战项目：模仿某东首页

flex实战项目：模仿某东首页

番茄炒蛋
番茄炒蛋原创
2021年07月07日 15:54:23490浏览

效果

代码

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. }
上一条：html前端常用控件的用法下一条：2021.7.6表格作业，
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议