Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 淘宝首页flex仿写
Blogger Information
Blog 41
fans 2
comment 0
visits 29293
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
淘宝首页flex仿写
月光下，遗忘黑暗
Original
735 people have browsed it

淘宝首页效果图

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="static/image/header/font_2449243_u7g1gxzso2q/iconfont.css">
  7.     <link rel="stylesheet" href="static/css/header.css">
  8.     <link rel="stylesheet" href="static/css/footer.css">
  9.     <link rel="stylesheet" href="static/css/main.css">
  10. </head>
  11. <body>
  12.     <div class="header">
  13.         <div class="iconfont icon-shejiaotubiao-08"></div>
  14.         <div class="search" >
  15.             <div class="img">
  16.                 <img src="static/image/header/搜索.png" alt="">
  17.             </div>
  18.             <input type="text" class="words" value="寻找宝贝店铺">
  19.         </div>
  20.     </div>
  21. <div class="main">
  22.     <ul class="nav">
  23.         <li>
  24.             <a href=""><img src="static/image/dh/1.png" alt=""></a>
  25.             <a href="">天猫新品</a>
  26.         </li>
  27.         <li>
  28.             <a href=""><img src="static/image/dh/2.png" alt=""></a>
  29.             <a href="">今日爆款</a>
  30.         </li>
  31.         <li>
  32.             <a href=""><img src="static/image/dh/3.png" alt=""></a>
  33.             <a href="">天猫国际</a>
  34.         </li>
  35.         <li>
  36.             <a href=""><img src="static/image/dh/4.png" alt=""></a>
  37.             <a href="">饿了么</a>
  38.         </li>
  39.         <li>
  40.             <a href=""><img src="static/image/dh/5.png" alt=""></a>
  41.             <a href="">天猫超市</a>
  42.         </li>
  43.         <li>
  44.             <a href=""><img src="static/image/dh/6.png" alt=""></a>
  45.             <a href="">充值中心</a>
  46.         </li>
  47.         <li>
  48.             <a href=""><img src="static/image/dh/7.png" alt=""></a>
  49.             <a href="">机票酒店</a>
  50.         </li>
  51.         <li>
  52.             <a href=""><img src="static/image/dh/8.png" alt=""></a>
  53.             <a href="">金币庄园</a>
  54.         </li>
  55.         <li>
  56.             <a href=""><img src="static/image/dh/9.png" alt=""></a>
  57.             <a href="">阿里拍卖</a>
  58.         </li>
  59.         <li>
  60.             <a href=""><img src="static/image/dh/10.png" alt=""></a>
  61.             <a href="">淘宝吃货</a>
  62.         </li>
  63.     </ul>
  64.     <ul class="shop">
  65.         <li>
  66.             <div> <a href=""><img src="//gw.alicdn.com/bao/uploaded/i1/51890164/O1CN0157MFrP1D59ZeJm7Yt_!!51890164-0-lubanu-s.jpg_500x500q90.jpg_.webp" alt=""></a></div>
  68.             <p href="">商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  69.             <div class="price">
  70.                 <div class="iconfont icon-jiage">138.00</div>
  71.                 <div class="people">100人已购买</div>
  72.             </div>
  73.         </li>
  74.         <li>
  75.             <div> <a href=""><img src="//gw.alicdn.com/bao/uploaded/i1/51890164/O1CN0157MFrP1D59ZeJm7Yt_!!51890164-0-lubanu-s.jpg_500x500q90.jpg_.webp" alt=""></a></div>
  76.             <p href="">商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  77.             <div class="price">
  78.                 <div class="iconfont icon-jiage">138.00</div>
  79.                 <div class="people">100人已购买</div>
  80.             </div>
  81.         </li>
  82.         <li>
  83.             <div> <a href=""><img src="//gw.alicdn.com/bao/uploaded/i1/51890164/O1CN0157MFrP1D59ZeJm7Yt_!!51890164-0-lubanu-s.jpg_500x500q90.jpg_.webp" alt=""></a></div>
  84.             <p href="">商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  85.             <div class="price">
  86.                 <div class="iconfont icon-jiage">138.00</div>
  87.                 <div class="people">100人已购买</div>
  88.             </div>
  89.         </li>
  90.         <li>
  91.             <div> <a href=""><img src="//gw.alicdn.com/bao/uploaded/i1/51890164/O1CN0157MFrP1D59ZeJm7Yt_!!51890164-0-lubanu-s.jpg_500x500q90.jpg_.webp" alt=""></a></div>
  92.             <p href="">商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  93.             <div class="price">
  94.                 <div class="iconfont icon-jiage">138.00</div>
  95.                 <div class="people">100人已购买</div>
  96.             </div>
  97.         </li>
  98.     </ul>
  99. </div>
  100. <div class="footer">
  101.     <div>
  102.         <div class="iconfont icon-rhome-fill"></div>
  103.         <span>首页</span>
  104.     </div>
  105.     <div>
  106.         <div class="iconfont icon-rhome-fill"></div>
  107.         <span>购物车</span>
  108.     </div>
  109.     <div>
  110.         <div class="iconfont icon-rhome-fill"></div>
  111.         <span>订单列表</span>
  112.     </div>
  113.     <div>
  114.         <div class="iconfont icon-rhome-fill"></div>
  115.         <span>我的淘宝</span>
  116.     </div>
  117.     <div>
  118.         <div class="iconfont icon-rhome-fill"></div>
  119.         <span>更多</span>
  120.     </div>
  121. </div>
  122. </body>
  123. </html>

css代码

header部分

  1. @import "reset.css";
  2. .header {
  3.     /*转为flex容器*/
  4.     display: flex;
  5.     /*默认主轴水平*/
  6.     flex-flow: row nowrap;
  7.     /*垂直方向的对齐方式*/
  8.     align-items: center;
  9.     background-color: rgb(255,133,42);
  10.     color: #F6F6F6;
  11.     height: 10rem;
  12.     /*固定定位*/
  13.     position: fixed;
  14.     left: 0;
  15.     top: 0;
  16.     right: 0;
  17.     /*内容放在视口最前端*/
  18.     z-index: 100;
  19. }
  20. .header .iconfont {
  21.     text-align: center;
  22.     flex: 1;
  23.     font-size: 7rem;
  24. }
  25. .header .search {
  26.     background-color: rgb(255,78,34);
  27.     flex: 7;
  28.     padding: 0.5rem;
  29.     border-radius: 1rem;
  30.     /*弹性布局*/
  31.     display: flex;
  32.     text-align: center;
  33. }
  35. .search .img{
  36.     width: 5rem;
  37.     margin-left: 20rem;
  38. }
  39. img {
  40.     width: 100%;
  41. }
  42. .search .words {
  43.     background-color: rgb(255,78,34);
  44.     color: white;
  45.     font-size: 4rem;
  46.     border:none;
  47.     border-radius: 1rem;
  48.     /*轮廓线*/
  49.     outline: none;
  50. }
  51. .main {
  52.     position: absolute;
  53.     top: 10rem;
  54.     left: 0;
  55.     right: 0;
  56.     bottom: 10rem;
  57. }
  58. .footer {
  59.     height: 10rem;
  60.     /*固定定位*/
  61.     position: fixed;
  62.     left: 0;
  63.     bottom: 0;
  64.     right: 0;
  65.     /*内容放在视口最前端*/
  66.     z-index: 100;
  67. }

main部分

  2. .main .nav img {
  3.     height: 12rem;
  4.     width: 12rem;
  5. }
  6. .main .nav{
  7.     display: flex;
  8.     /*转为多行容器*/
  9.     flex-flow: row wrap;
  10.     padding: 0.5rem;
  11.     font-size: 2rem;
  12. }
  13. .main .nav li {
  14.     /*允许放大*/
  15.     /*flex-grow: 1;*/
  16.     /*flex-shrink: 1;*/
  17.     /*flex-basis: 20%;*/
  18.     flex: 1 1 20%;
  19.     /*转为flex容器*/
  20.     display: flex;
  21.     /*垂直排列，禁止换行*/
  22.     flex-flow: column nowrap;
  23.     /*交叉轴居中*/
  24.     align-items: center;
  25. }
  26. .main .shop {
  27.     display: flex;
  28.     color: #555;
  29.     /*转为多行容器，并允许换行*/
  30.     flex-flow: row wrap;
  31.     justify-content: center;
  32.     padding: 0.5rem;
  33.     font-size: 2rem;
  34. }
  35. .main .shop li {
  36.     flex: 1 1 50%;
  37.     padding: 1rem;
  39. }
  40. .shop li img {
  41.     width: 100%;
  42.     height: 100%;
  43.     border-radius: 1.5rem;
  44. }
  45. .shop .iconfont {
  46.     color: red;
  47.     font-size: 3rem;
  48. }
  49. .price {
  50.     padding: 2rem;
  51.     display: flex;
  52. }
  53. .people {
  54.     color: #969896;
  55.     padding-left: 3rem;
  56.     padding-top: 0.5rem;
  57. }

footer部分

  1. .footer {
  2.     display: flex;
  3.     background-color: white;
  4.     justify-content: space-around;
  5.     align-items: center;
  6.     color: #969896;
  7.     height: 10rem;
  8.     /*固定定位*/
  9.     position: fixed;
  10.     left: 0;
  11.     bottom: 0;
  12.     right: 0;
  13.     /*内容放在视口最前端*/
  14.     z-index: 100;
  15. }
  16. .footer>div {
  17.      display: flex;
  18.      /*主轴垂直*/
  19.      flex-flow: column nowrap;
  20.      /*交叉轴水平居中*/
  21.      align-items: center;
  22.  }
  24. .footer .iconfont {
  25.     font-size: 5rem;
  26. }
  28. .footer div>span {
  29.     font-size: 2.5rem;
  30. }
  31. .footer>div {
  32.     cursor: pointer;
  33. }
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