search

博客列表 >淘宝首页flex仿写

淘宝首页flex仿写

月光下，遗忘黑暗
月光下，遗忘黑暗原创
2021年03月29日 20:26:12734浏览

淘宝首页效果图

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. }
上一条：「公众号吸粉神级插件」实现网站下载文件需要公众号获取验证码下一条：php实现多文件上传和mvc基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议