ASCII码 ASCII码

简单淘宝首页案例

发布于：2022-04-17 14:13:57  栏目：技术文档

页面效果

直接看图

看完上面图片的效果，我们再来看看代码部分" class="reference-link">看完上面图片的效果，我们再来看看代码部分

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代码部分

偷个懒，就不写注释" class="reference-link">偷个懒，就不写注释

初始化部分

  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. }

还有用到的图片以及图标就不一一说了,都是千篇一律" class="reference-link">还有用到的图片以及图标就不一一说了,都是千篇一律

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行