Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简单淘宝首页案例
Blogger Information
Blog 17
fans 0
comment 0
visits 8263
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
简单淘宝首页案例
想做一个躺平的程序员
Original
409 people have browsed it

页面效果

直接看图



看完上面图片的效果，我们再来看看代码部分

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="css/reset.css">
  8.     <link rel="stylesheet" href="css/header.css">
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3332366_vouiuorsybs.css">
  10.     <link rel="stylesheet" href="css/footer.css">
  11.     <link rel="stylesheet" href="css/main.css">
  12. </head>
  13. <body>
  14.     <!-- 首页头部  -->
  15.     <header class="header">
  16.                 <!-- 搜索框 -->
  17.             <div class="apptop">
  18.                     <img src="img/taobao.png" alt="">
  19.                     <div class="search">
  20.                         <span>寻找宝贝店铺</span>
  21.                         <div>
  22.                             <span> 搜索</span>
  23.                         </div>
  24.                     </div>
  25.                     <a href="">
  26.                         <img src="img/qiandao.png" alt="">
  27.                     </a>
  28.             </div>
  29.             <!-- 导航 -->
  30.             <div class="nav">
  31.                     <div class="item">
  32.                         <img src="img/nav/nav1.png" alt="">
  33.                         <span>购物车</span>
  34.                     </div>
  35.                     <div class="item">
  36.                         <img src="img/nav/nav2.png" alt="">
  37.                         <span>手机类型</span>
  38.                     </div>
  39.                     <div class="item">
  40.                         <img src="img/nav/nav3.png" alt="">
  41.                         <span>今日爆款</span>
  42.                     </div>
  43.                     <div class="item">
  44.                         <img src="img/nav/nav4.png" alt="">
  45.                         <span>土鲜好货</span>
  46.                     </div>
  47.                     <div class="item">
  48.                         <img src="img/nav/nav5.png" alt="">
  49.                         <span>飞猪旅行</span>
  50.                     </div>
  51.                     <div class="item">
  52.                         <img src="img/nav/nav6.png" alt="">
  53.                         <span>天猫新品</span>
  54.                     </div>
  55.                     <div class="item">
  56.                         <img src="img/nav/nav7.png" alt="">
  57.                         <span>阿里拍卖</span>
  58.                     </div>
  59.                     <div class="item">
  60.                         <img src="img/nav/nav8.png" alt="">
  61.                         <span>领淘金币</span>
  62.                     </div>
  63.                     <div class="item">
  64.                         <img src="img/nav/nav9.png" alt="">
  65.                         <span>天猫国际</span>
  66.                     </div>
  67.                     <div class="item">
  68.                         <img src="img/nav/nav10png.png" alt="">
  69.                         <span>淘宝吃货</span>
  70.                     </div>
  71.             </div>
  72.     </header>
  73.     <!-- 主体 -->
  74.     <main>
  75.         <!-- 优惠价格区 -->
  76.         <div class="main-start">
  77.             <div class="item">
  78.                 <div class="item-between">
  79.                     <div  class="discount">
  80.                         <div>聚划算</div>
  81.                         <div>品牌折扣</div>
  82.                     </div>
  83.                     <a href=""><img src="img/youhuo/1.webp" alt=""></a>
  84.                 </div>
  85.                 <a href=""><img src="img/youhuo/2.webp" alt=""></a>
  86.             </div>
  87.             <div class="item">
  88.                 <div class="item-between">
  89.                     <div  class="discount">
  90.                         <div>天天特卖</div>
  91.                         <div>1元秒杀</div>
  92.                     </div>
  93.                     <a href=""><img src="img/youhuo/3.webp" alt=""></a>
  94.                 </div>
  95.                 <a href=""><img src="img/youhuo/4.webp" alt=""></a>
  96.             </div>
  97.             <div class="item">
  98.                 <div class="item-between">
  99.                     <div class="discount">
  100.                         <div>有好货</div>
  101.                         <div>好口碑</div>
  102.                     </div>
  103.                     <a href=""><img src="img/youhuo/5.webp" alt=""></a>
  104.                 </div>
  105.                 <a href=""><img src="img/youhuo/6.webp" alt=""></a>
  106.             </div>
  107.             <div class="item">
  108.                 <div class="item-between">
  109.                     <div class="discount">
  110.                         <div>每日好店</div>
  111.                         <div>特色</div>
  112.                     </div>
  113.                     <a href=""><img src="img/youhuo/7.webp" alt=""></a>
  114.                 </div>
  115.                 <a href=""><img src="img/youhuo/8.webp" alt=""></a>
  116.             </div>
  119.         </div>
  120.         <!-- 中心内容 -->
  121.         <div class="main-center">
  122.             <!-- 左边商品列表 -->
  123.             <div>
  124.                    <!-- 每一个商品 -->
  125.                 <a href="" class="item">
  127.                     <img src="img/center/1.webp" alt="">
  128.                     <div class="item-title">
  129.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  130.                     </div>
  131.                     <div class="item-center">
  132.                         <span class="iconfont icon-jinqian"></span>
  133.                         <span class="item-price"> 245</span>
  134.                         <span class="item-pur">100+人已购买</span>
  135.                     </div>
  136.                 </a>
  137.                    <!-- 每一个商品 -->
  138.                    <a href="" class="item">
  140.                     <img src="img/center/3.webp" alt="">
  141.                     <div class="item-title">
  142.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  143.                     </div>
  144.                     <div class="item-center">
  145.                         <span class="iconfont icon-jinqian"></span>
  146.                         <span class="item-price"> 245</span>
  147.                         <span class="item-pur">100+人已购买</span>
  148.                     </div>
  149.                 </a>
  150.                    <!-- 每一个商品 -->
  151.                    <a href="" class="item">
  153.                     <img src="img/center/5.webp" alt="">
  154.                     <div class="item-title">
  155.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  156.                     </div>
  157.                     <div class="item-center">
  158.                         <span class="iconfont icon-jinqian"></span>
  159.                         <span class="item-price"> 245</span>
  160.                         <span class="item-pur">100+人已购买</span>
  161.                     </div>
  162.                 </a>
  163.                    <!-- 每一个商品 -->
  164.                    <a href="" class="item">
  166.                     <img src="img/center/7.webp" alt="">
  167.                     <div class="item-title">
  168.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  169.                     </div>
  170.                     <div class="item-center">
  171.                         <span class="iconfont icon-jinqian"></span>
  172.                         <span class="item-price"> 245</span>
  173.                         <span class="item-pur">100+人已购买</span>
  174.                     </div>
  175.                 </a>
  176.                    <!-- 每一个商品 -->
  177.                    <a href="" class="item">
  179.                     <img src="img/center/9.webp" alt="">
  180.                     <div class="item-title">
  181.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  182.                     </div>
  183.                     <div class="item-center">
  184.                         <span class="iconfont icon-jinqian"></span>
  185.                         <span class="item-price"> 245</span>
  186.                         <span class="item-pur">100+人已购买</span>
  187.                     </div>
  188.                 </a>
  189.                    <!-- 每一个商品 -->
  190.                    <a href="" class="item">
  192.                     <img src="img/center/11.webp" alt="">
  193.                     <div class="item-title">
  194.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  195.                     </div>
  196.                     <div class="item-center">
  197.                         <span class="iconfont icon-jinqian"></span>
  198.                         <span class="item-price"> 245</span>
  199.                         <span class="item-pur">100+人已购买</span>
  200.                     </div>
  201.                 </a>
  202.                    <!-- 每一个商品 -->
  203.                    <a href="" class="item">
  205.                     <img src="img/center/13.webp" alt="">
  206.                     <div class="item-title">
  207.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  208.                     </div>
  209.                     <div class="item-center">
  210.                         <span class="iconfont icon-jinqian"></span>
  211.                         <span class="item-price"> 245</span>
  212.                         <span class="item-pur">100+人已购买</span>
  213.                     </div>
  214.                 </a>             
  215.             </div>
  216.             <!-- 右边商品列表 -->
  217.             <div>
  218.                    <!-- 每一个商品 -->
  219.                    <a href="" class="item">
  221.                     <img src="img/center/2.webp" alt="">
  222.                     <div class="item-title">
  223.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  224.                     </div>
  225.                     <div class="item-center">
  226.                         <span class="iconfont icon-jinqian"></span>
  227.                         <span class="item-price"> 245</span>
  228.                         <span class="item-pur">100+人已购买</span>
  229.                     </div>
  230.                 </a>
  231.                    <!-- 每一个商品 -->
  232.                    <a href="" class="item">
  234.                     <img src="img/center/4.webp" alt="">
  235.                     <div class="item-title">
  236.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  237.                     </div>
  238.                     <div class="item-center">
  239.                         <span class="iconfont icon-jinqian"></span>
  240.                         <span class="item-price"> 245</span>
  241.                         <span class="item-pur">100+人已购买</span>
  242.                     </div>
  243.                 </a>
  244.                    <!-- 每一个商品 -->
  245.                    <a href="" class="item">
  247.                     <img src="img/center/6.webp" alt="">
  248.                     <div class="item-title">
  249.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  250.                     </div>
  251.                     <div class="item-center">
  252.                         <span class="iconfont icon-jinqian"></span>
  253.                         <span class="item-price"> 245</span>
  254.                         <span class="item-pur">100+人已购买</span>
  255.                     </div>
  256.                 </a>
  257.                    <!-- 每一个商品 -->
  258.                    <a href="" class="item">
  260.                     <img src="img/center/8.webp" alt="">
  261.                     <div class="item-title">
  262.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  263.                     </div>
  264.                     <div class="item-center">
  265.                         <span class="iconfont icon-jinqian"></span>
  266.                         <span class="item-price"> 245</span>
  267.                         <span class="item-pur">100+人已购买</span>
  268.                     </div>
  269.                 </a>
  270.                    <!-- 每一个商品 -->
  271.                    <a href="" class="item">
  273.                     <img src="img/center/10.webp" alt="">
  274.                     <div class="item-title">
  275.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  276.                     </div>
  277.                     <div class="item-center">
  278.                         <span class="iconfont icon-jinqian"></span>
  279.                         <span class="item-price"> 245</span>
  280.                         <span class="item-pur">100+人已购买</span>
  281.                     </div>
  282.                 </a>
  283.                    <!-- 每一个商品 -->
  284.                    <a href="" class="item">
  286.                     <img src="img/center/12.webp" alt="">
  287.                     <div class="item-title">
  288.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  289.                     </div>
  290.                     <div class="item-center">
  291.                         <span class="iconfont icon-jinqian"></span>
  292.                         <span class="item-price"> 245</span>
  293.                         <span class="item-pur">100+人已购买</span>
  294.                     </div>
  295.                 </a>
  296.                    <!-- 每一个商品 -->
  297.                    <a href="" class="item">
  299.                     <img src="img/center/14.webp" alt="">
  300.                     <div class="item-title">
  301.                         <span>高级感全棉纯棉60支贡缎棉南通床上四件套可定制床笠款柔软北欧风</span>
  302.                     </div>
  303.                     <div class="item-center">
  304.                         <span class="iconfont icon-jinqian"></span>
  305.                         <span class="item-price"> 245</span>
  306.                         <span class="item-pur">100+人已购买</span>
  307.                     </div>
  308.                 </a>
  310.             </div>
  312.         </div>
  313.     </main>
  314.     <!-- 底部 -->
  315.     <footer class="footer">
  316.         <div >
  317.             <span class="iconfont icon-taobao"></span>
  318.         </div>
  319.         <div>
  320.             <span class="iconfont icon-gouwuche "></span>
  321.             <span>购物车</span>
  322.         </div>
  323.         <div>
  324.             <span class="iconfont icon-wode "></span>
  325.             <span>我的淘宝</span>
  326.         </div>
  327.     </footer>
  329. </body>
  330. </html>

CSS代码部分

偷个懒，就不写注释

初始化部分

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6.     /* 首先确认1vw?  */
  7. html{
  9.     font-size: calc(100vw/3.75);
  10. }
  11. li{
  12.     list-style: none;
  13. }
  14. a{
  15.     text-decoration: none;
  16. }
  18. @media (max-width:350px){
  19.     :root{
  20.         font-size: .85rem;
  21.     }
  23. }
  24. @media(min-width:780px){
  25.     :root{
  26.         font-size: 1.5rem;
  27.     }
  28. }
  29. body{
  31.     font-size: .16rem;
  32.     background-color:#f4f4f4 ;
  33. }

heade部分

  1. .header{
  2.     width: 100vw;
  3.     /* 设置为相对定位 */
  4.     position: relative;
  6. }
  7. .header .apptop{
  8.     position: fixed;
  9.     top: 0;
  10.     left: 0;
  11.     right: 0;
  12.     z-index: 99;
  13.     display: grid;
  14.     grid-template-columns: .6rem 1fr .40rem;
  15.     place-items: center;
  16.     background-color: white;
  17. }
  18. .header .apptop>img{
  19.     padding-left: .1rem;
  20.     width: 100%;
  22. }
  23. .header .apptop .search{
  24.     width: 2.5rem;
  25.     background-color: white;
  26.    border: .01rem solid coral;
  27.     display: grid;
  28.     grid-template-columns: 1fr .6rem; 
  30.     border-radius: .4rem;
  32. }
  33. .header .apptop .search>span{
  35.     place-self: start;
  36.     padding: .1rem ;
  37.     color:#666666;
  39. }
  40. .header .apptop .search>div{
  41.     margin: .05rem 0;
  42.     justify-self: end;
  43.     background-color: coral;
  44.     border-radius: 1rem;
  45.     width: .6rem;
  46.     display: grid;
  47.     place-items: center;
  49. }
  50. .header .apptop .search>div>span{
  51.         color: aliceblue;    
  52. }
  55. .header .apptop>a>img{
  56.     width: 100%;
  57.     padding-right: .1rem;
  58.     place-self: center;
  59. }
  61. /* 导航 */
  62. .header .nav{
  63.     position: absolute;
  64.     top: .55rem;
  65.     left: 0;
  66.     right: 0;
  67.     background-color: white;
  68.     border-radius: .1rem;
  69.     display: grid;
  70.     grid-template-columns: repeat(5,1fr);
  71. }
  72. .header .nav .item{
  73.     padding: .02rem;
  74.     display: grid;
  75.     place-items: center;
  76. }
  77. .header .nav .item>img{
  78.     width: 100%;
  80. }

main

  1. main{
  2.     position: absolute;
  3.     top:2.3rem;
  4.     left: 0;
  5.     right: 0; 
  6. }
  7. main .main-start{
  8.     background-color: white;
  9.     display: grid;
  10.     gap: .05rem;
  11.     grid-template-columns: repeat(2,1fr);
  12.     border-radius: .1rem;
  13.     padding: .01rem .05rem;
  14. }
  15. main .main-start .item{
  16.     display: grid;
  17.     grid-template-columns: repeat(2,1fr);
  18.     place-items: center;
  19. }
  21. main .main-start .item .item-between .discount{
  22.     display: grid;
  23.     grid-template-columns: repeat(2,1fr);
  24.     place-items: center;
  25.     font-size: .1rem;
  26.     /* 文本不会换 */
  27.     white-space: nowrap; 
  28. }
  29. main .main-start .item .item-between .discount>div:first-of-type{
  30.     font-size: .15rem;
  31.     margin-right: .05rem;
  32. }
  33. main .main-start .item .item-between .discount>div:last-of-type{
  34.     background-color: rgb(255, 66, 0);
  35.     color: white;
  36. }
  37. main .main-start .item a img{
  38.     width: 100%;
  39. }
  41. /* 中心商品 */
  42. main .main-center{
  43.     height: 19.2rem;
  44.     display: grid;
  45.     gap: .05rem;
  46.     grid-template-columns: repeat(2,1fr);
  47.     border-radius: .1rem;
  48.     margin-top: .15rem;
  50. }
  51. main .main-center .item{
  52.     background-color: white;
  53.     border-radius: .1rem;
  54.     padding: .04rem;
  55.     margin-bottom: .05rem;
  56.     display: grid;
  57. }
  58. main .main-center .item img{
  59.     width: 100%;
  60. }
  61. main .main-center .item .item-title{
  62.     color: black;
  63.     padding-left: .02rem;
  64.     font-size: .13rem;
  65. }
  66. main .main-center .item .item-center{
  67.     margin-top: .05rem;
  68. }
  69. main .main-center .item .icon-jinqian{
  70.     color: #999999;
  71. }
  72. main .main-center .item .item-price{
  73.     color: #ff5500;
  74.     font-size: .14rem;
  75. }
  76. main .main-center .item .item-pur{
  77.     font-size: .11rem;
  78.     color: #999999;
  79. }
  1. .footer{
  3.     position:fixed;
  4.     left: 0;
  5.     right: 0;
  6.     bottom: 0;
  7.     display: grid;
  8.     grid-template-columns: repeat(3,1fr);
  9.     place-items: center;   
  10.     background-color: white;
  11.     border-radius: .1rem;
  12. }
  13. .footer>div{
  14.     display: grid;
  15.     place-items: center;
  16. }
  17. .footer>div  .icon-taobao{
  18.     color: coral;
  19. }
  20. .footer>div .icon-wode{
  21.     color: skyblue;
  22. }
  23. .footer>div>span:first-of-type{
  25.     font-size: .3rem;
  27. }
  28. .footer>div>span:nth-of-type(2){
  29.     font-size: .13rem;
  30. }

还有用到的图片以及图标就不一一说了,都是千篇一律

Correcting teacher：PHPzPHPz

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