devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端开发——淘宝购物列表_html淘宝商品页面代码

作者：我家小花儿 | 2024-08-18 08:02:03

赞

踩

html淘宝商品页面代码

前言

这一篇博客也是本人用于复习前端知识，写的静态网页，通过淘宝购物列表为案例。

下面是网页特效： 

 

 思路：按照盒子模型的角度，我们首先可把这张截图看一个大盒子里面放有5个小盒子，在将具体内容放入到每个盒子当中。

html主要部分（代码实现）：

  1.    <div class="box">
  2.        <ul class="list_box">
  3.            <li class="list1">
  4.                <img src="./images/list1.webp" alt="购物清单1">
  5.                <div class="list1_say">
  6.                    <span class="title_text">王小鸭风衣外套2022年新款女秋宽松韩系风格穿搭系带气质中长大衣</span>
  7.                </div>
  8.                <div class="price_con">
  9.                     <span class="list_price_title">￥</span>  
  10.                     <span class="list_price_after">1199.00</span>
  11.                     <span class="list_price_old">1199.00</span>
  12.                </div>
  13.                <div class="dian-name">
  14.                     <span class="dian_name_span"></span>
  15.                     王小鸭旗舰店
  16.                </div>
  17.                <div class="list_foot">
  18.                    <div class="list_tags"></div>
  19.                    <div class="sell_info">
  20.                         月额 21
  21.                    </div>
  22.                </div>
  23.            </li>
  24.            <li class="list2">
  25.                 <img src="./images/list2.webp" alt="购物清单2">
  26.                 <div class="list1_say">
  27.                     <span class="title_text">王小鸭风衣外套2022秋新款韩式休闲宽松显瘦流行中.....</span>
  28.                 </div>
  29.                 <div class="price_con">
  30.                     <span class="list_price_title">￥</span>  
  31.                     <span class="list_price_after">949.00</span>
  32.                     <span class="list_price_old">949.00</span>
  33.                 </div>
  34.                 <div class="dian-name">
  35.                     <span class="dian_name_span"></span>
  36.                     王小鸭旗舰店
  37.                 </div>
  38.                 <div class="list_foot">
  39.                     <div class="list_tags"></div>
  40.                     <div class="sell_info">
  41.                         月额 15
  42.                     </div>
  43.                 </div>
  44.            </li>
  45.            <li class="list3">
  46.                 <img src="./images/list3.webp" alt="购物清单3">
  47.                 <div class="list1_say">
  48.                     <span class="title_text">格子小西装女外套韩版2022新款秋装修身短款女西服长袖上.....</span>
  49.                 </div>
  50.                 <div class="price_con">
  51.                     <span class="list_price_title">￥</span>  
  52.                     <span class="list_price_after">298.00</span>
  53.                     <span class="list_price_old">298.00</span>
  54.                 </div>
  55.                 <div class="dian-name">
  56.                     <span class="dian_name_span"></span>
  57.                     侃侃衣诚旗舰店
  58.                 </div>
  59.                 <div class="list_foot">
  60.                     <div class="list_tags"></div>
  61.                     <div class="sell_info">
  62.                         月额 20
  63.                     </div>
  64.                 </div>
  65.            </li>
  66.            <li class="list4">
  67.                 <img src="./images/list4.webp" alt="购物清单4">
  68.                 <div class="list1_say">
  69.                     <span class="title_text">公主国度 高端披肩领连帽长款毛呢外套双面双色羊绒大衣女.....</span>
  70.                 </div>
  71.                 <div class="price_con">
  72.                     <span class="list_price_title">￥</span>  
  73.                     <span class="list_price_after">5188.00</span>
  74.                     <span class="list_price_old">5188.00</span>
  75.                 </div>
  76.                 <div class="dian-name">
  77.                     <span class="dian_name_span"></span>
  78.                     公主国度旗舰店
  79.                 </div>
  80.                 <div class="list_foot">
  81.                     <div class="list_tags"></div>
  82.                     <div class="sell_info">
  83.                         月额 55
  84.                     </div>
  85.                 </div>
  86.            </li>
  87.            <li class="list5">
  88.                 <img src="./images/list5.webp" alt="购物清单5">
  89.                 <div class="list1_say">
  90.                     <span class="title_text">公主国度 高端连帽羊毛呢外套修身显瘦过膝长款双面羊绒大.....</span>
  91.                 </div>
  92.                 <div class="price_con">
  93.                     <span class="list_price_title">￥</span>  
  94.                     <span class="list_price_after">5188.00</span>
  95.                     <span class="list_price_old">5188.00</span>
  96.                 </div>
  97.                 <div class="dian-name">
  98.                     <span class="dian_name_span"></span>
  99.                     公主国度旗舰店
  100.                 </div>
  101.                 <div class="list_foot">
  102.                     <div class="list_tags"></div>
  103.                     <div class="sell_info">
  104.                         月额 69
  105.                     </div>
  106.                 </div>
  107.            </li>
  108.        </ul>
  109.     </div>

 Css主要实现部分（代码实现）：

  1.   <style>
  2.           *{
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         li{
  7.             list-style: none;
  8.         }
  9.         .box{
  10.             width: 1485px;
  11.             height: 460px;
  12.             border: #fd3f31;
  13.             /* background-color: pink; */
  14.             margin: 0 auto;
  15.         }
  16.         .list_box li{
  17.             width: 295px;
  18.             height: 460px;
  19.             float: left;
  20.             color: #9b9b9b;
  21.             line-height: 20px;
  22.             border-color:rgba(0,0,0, 0.1);
  23.             border-width: 1px;
  24.             border-style: solid;
  25.         }
  26.         .list_box li img{
  27.             width: 245px;
  28.             height: 243px;
  29.             margin: 30px 26px 14px;
  30.         }
  31.         .list1_say{
  32.             font-size: 14px;
  33.             height: 60px;
  34.             width: 198px;
  35.             margin: 0 26px;
  36.         }
  37.         .price_con{
  38.             height: 25px;
  39.             padding: 6px 26px;
  40.             line-height: 1.6;
  41.         }
  42.         .list_price_title{
  43.             font-size: 18px;
  44.             color: #fd3f31;
  45.         }
  46.         .list_price_after{
  47.             font-size: 18px;
  48.              color: #fd3f31;
  49.         }
  50.         .list_price_old{
  51.             margin-left: 8px;
  52.             vertical-align: baseline;
  53.             text-decoration: line-through;
  54.             line-height: 20px;
  55.             font-family: PingFangSC-Regular;
  56.             font-size: 14px;
  57.             color: #9b9b9b;
  58.         }
  59.         .dian_name{
  60.             font-size: 12px;
  61.             color: #9b9b9b;
  62.             line-height: 17px;
  63.             background-color: #fff;
  64.         }
  65.         .dian_name_span{
  66.             color: #fd3f31;
  67.             margin: 18px 26px;
  68.         }
  69.         .list_foot{
  70.             height: 12px;
  71.             /* background-color:purple;  */
  72.             margin-top: 20px;
  73.             border-top: 1px solid #f2f2f2;
  74.             padding: 9px 0;
  75.             vertical-align: bottom;
  76.             position: relative;
  77.             
  78.         }
  79.         .list_tags{
  80.             overflow: hidden;
  81.             white-space: nowrap;
  82.             vertical-align: middle;
  83.         }
  84.         .sell_info{
  85.             position: absolute;
  86.             right: 0;
  87.             top: 9px;
  88.             color: #9b9b9b;
  89.             font-size: 12px;
  90.             line-height: 17px;
  91.             background: #fff;
  92.             padding-left: 12px;
  93.             
  94.         }
  95.     </style>

 淘宝购物列表代码实现：

  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.     <title>购物列表</title>
  8.     <style>
  9.           *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         li{
  14.             list-style: none;
  15.         }
  16.         .box{
  17.             width: 1485px;
  18.             height: 460px;
  19.             border: #fd3f31;
  20.             /* background-color: pink; */
  21.             margin: 0 auto;
  22.         }
  23.         .list_box li{
  24.             width: 295px;
  25.             height: 460px;
  26.             float: left;
  27.             color: #9b9b9b;
  28.             line-height: 20px;
  29.             border-color:rgba(0,0,0, 0.1);
  30.             border-width: 1px;
  31.             border-style: solid;
  32.         }
  33.         .list_box li img{
  34.             width: 245px;
  35.             height: 243px;
  36.             margin: 30px 26px 14px;
  37.         }
  38.         .list1_say{
  39.             font-size: 14px;
  40.             height: 60px;
  41.             width: 198px;
  42.             margin: 0 26px;
  43.         }
  44.         .price_con{
  45.             height: 25px;
  46.             padding: 6px 26px;
  47.             line-height: 1.6;
  48.         }
  49.         .list_price_title{
  50.             font-size: 18px;
  51.             color: #fd3f31;
  52.         }
  53.         .list_price_after{
  54.             font-size: 18px;
  55.              color: #fd3f31;
  56.         }
  57.         .list_price_old{
  58.             margin-left: 8px;
  59.             vertical-align: baseline;
  60.             text-decoration: line-through;
  61.             line-height: 20px;
  62.             font-family: PingFangSC-Regular;
  63.             font-size: 14px;
  64.             color: #9b9b9b;
  65.         }
  66.         .dian_name{
  67.             font-size: 12px;
  68.             color: #9b9b9b;
  69.             line-height: 17px;
  70.             background-color: #fff;
  71.         }
  72.         .dian_name_span{
  73.             color: #fd3f31;
  74.             margin: 18px 26px;
  75.         }
  76.         .list_foot{
  77.             height: 12px;
  78.             /* background-color:purple;  */
  79.             margin-top: 20px;
  80.             border-top: 1px solid #f2f2f2;
  81.             padding: 9px 0;
  82.             vertical-align: bottom;
  83.             position: relative;
  84.             
  85.         }
  86.         .list_tags{
  87.             overflow: hidden;
  88.             white-space: nowrap;
  89.             vertical-align: middle;
  90.         }
  91.         .sell_info{
  92.             position: absolute;
  93.             right: 0;
  94.             top: 9px;
  95.             color: #9b9b9b;
  96.             font-size: 12px;
  97.             line-height: 17px;
  98.             background: #fff;
  99.             padding-left: 12px;
  100.             
  101.         }
  102.     </style>
  103. </head>
  104. <body>
  105.     <div class="box">
  106.        <ul class="list_box">
  107.            <li class="list1">
  108.                <img src="./images/list1.webp" alt="购物清单1">
  109.                <div class="list1_say">
  110.                    <span class="title_text">王小鸭风衣外套2022年新款女秋宽松韩系风格穿搭系带气质中长大衣</span>
  111.                </div>
  112.                <div class="price_con">
  113.                     <span class="list_price_title">￥</span>  
  114.                     <span class="list_price_after">1199.00</span>
  115.                     <span class="list_price_old">1199.00</span>
  116.                </div>
  117.                <div class="dian-name">
  118.                     <span class="dian_name_span"></span>
  119.                     王小鸭旗舰店
  120.                </div>
  121.                <div class="list_foot">
  122.                    <div class="list_tags"></div>
  123.                    <div class="sell_info">
  124.                         月额 21
  125.                    </div>
  126.                </div>
  127.            </li>
  128.            <li class="list2">
  129.                 <img src="./images/list2.webp" alt="购物清单2">
  130.                 <div class="list1_say">
  131.                     <span class="title_text">王小鸭风衣外套2022秋新款韩式休闲宽松显瘦流行中.....</span>
  132.                 </div>
  133.                 <div class="price_con">
  134.                     <span class="list_price_title">￥</span>  
  135.                     <span class="list_price_after">949.00</span>
  136.                     <span class="list_price_old">949.00</span>
  137.                 </div>
  138.                 <div class="dian-name">
  139.                     <span class="dian_name_span"></span>
  140.                     王小鸭旗舰店
  141.                 </div>
  142.                 <div class="list_foot">
  143.                     <div class="list_tags"></div>
  144.                     <div class="sell_info">
  145.                         月额 15
  146.                     </div>
  147.                 </div>
  148.            </li>
  149.            <li class="list3">
  150.                 <img src="./images/list3.webp" alt="购物清单3">
  151.                 <div class="list1_say">
  152.                     <span class="title_text">格子小西装女外套韩版2022新款秋装修身短款女西服长袖上.....</span>
  153.                 </div>
  154.                 <div class="price_con">
  155.                     <span class="list_price_title">￥</span>  
  156.                     <span class="list_price_after">298.00</span>
  157.                     <span class="list_price_old">298.00</span>
  158.                 </div>
  159.                 <div class="dian-name">
  160.                     <span class="dian_name_span"></span>
  161.                     侃侃衣诚旗舰店
  162.                 </div>
  163.                 <div class="list_foot">
  164.                     <div class="list_tags"></div>
  165.                     <div class="sell_info">
  166.                         月额 20
  167.                     </div>
  168.                 </div>
  169.            </li>
  170.            <li class="list4">
  171.                 <img src="./images/list4.webp" alt="购物清单4">
  172.                 <div class="list1_say">
  173.                     <span class="title_text">公主国度 高端披肩领连帽长款毛呢外套双面双色羊绒大衣女.....</span>
  174.                 </div>
  175.                 <div class="price_con">
  176.                     <span class="list_price_title">￥</span>  
  177.                     <span class="list_price_after">5188.00</span>
  178.                     <span class="list_price_old">5188.00</span>
  179.                 </div>
  180.                 <div class="dian-name">
  181.                     <span class="dian_name_span"></span>
  182.                     公主国度旗舰店
  183.                 </div>
  184.                 <div class="list_foot">
  185.                     <div class="list_tags"></div>
  186.                     <div class="sell_info">
  187.                         月额 55
  188.                     </div>
  189.                 </div>
  190.            </li>
  191.            <li class="list5">
  192.                 <img src="./images/list5.webp" alt="购物清单5">
  193.                 <div class="list1_say">
  194.                     <span class="title_text">公主国度 高端连帽羊毛呢外套修身显瘦过膝长款双面羊绒大.....</span>
  195.                 </div>
  196.                 <div class="price_con">
  197.                     <span class="list_price_title">￥</span>  
  198.                     <span class="list_price_after">5188.00</span>
  199.                     <span class="list_price_old">5188.00</span>
  200.                 </div>
  201.                 <div class="dian-name">
  202.                     <span class="dian_name_span"></span>
  203.                     公主国度旗舰店
  204.                 </div>
  205.                 <div class="list_foot">
  206.                     <div class="list_tags"></div>
  207.                     <div class="sell_info">
  208.                         月额 69
  209.                     </div>
  210.                 </div>
  211.            </li>
  212.        </ul>
  213.     </div>
  214. </body>
  215. </html>

别看代码写了这么多其实只要你会写第一个小盒子，其它盒子就只要复制粘贴就行（再改一改html中的内容,Css不用做任何修改）。

给你们看看，这就是第一个盒子代码实现（你们去对比以下结果如何）：

  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.     <title>Document</title>
  8.     <style>
  9.           *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         li{
  14.             list-style: none;
  15.         }
  16.         .box{
  17.             width: 1485px;
  18.             height: 460px;
  19.             border: #fd3f31;
  20.             /* background-color: pink; */
  21.             margin: 0 auto;
  22.         }
  23.         .list_box li{
  24.             width: 295px;
  25.             height: 460px;
  26.             float: left;
  27.             color: #9b9b9b;
  28.             line-height: 20px;
  29.             border-color:rgba(0, 0, 0, 0.1);
  30.             border-width: 1px;
  31.             border-style: solid;
  32.         }
  33.         .list_box li img{
  34.             width: 245px;
  35.             height: 243px;
  36.             margin: 30px 26px 14px;
  37.         }
  38.         .list1_say{
  39.             font-size: 14px;
  40.             height: 60px;
  41.             width: 198px;
  42.             margin: 0 26px;
  43.         }
  44.         .price_con{
  45.             height: 25px;
  46.             padding: 6px 26px;
  47.             line-height: 1.6;
  48.         }
  49.         .list_price_title{
  50.             font-size: 18px;
  51.             color: #fd3f31;
  52.         }
  53.         .list_price_after{
  54.             font-size: 18px;
  55.              color: #fd3f31;
  56.         }
  57.         .list_price_old{
  58.             margin-left: 8px;
  59.             vertical-align: baseline;
  60.             text-decoration: line-through;
  61.             line-height: 20px;
  62.             font-family: PingFangSC-Regular;
  63.             font-size: 14px;
  64.             color: #9b9b9b;
  65.         }
  66.         .dian_name{
  67.             font-size: 12px;
  68.             color: #9b9b9b;
  69.             line-height: 17px;
  70.             background-color: #fff;
  71.         }
  72.         .dian_name_span{
  73.             color: #fd3f31;
  74.             margin: 18px 26px;
  75.         }
  76.         .list_foot{
  77.             height: 12px;
  78.             /* background-color:purple;  */
  79.             margin-top: 20px;
  80.             border-top: 1px solid #f2f2f2;
  81.             padding: 9px 0;
  82.             vertical-align: bottom;
  83.             position: relative;
  84.             
  85.         }
  86.         .list_tags{
  87.             overflow: hidden;
  88.             white-space: nowrap;
  89.             vertical-align: middle;
  90.         }
  91.         .sell_info{
  92.             position: absolute;
  93.             right: 0;
  94.             top: 9px;
  95.             color: #9b9b9b;
  96.             font-size: 12px;
  97.             line-height: 17px;
  98.             background: #fff;
  99.             padding-left: 12px;
  100.             
  101.         }
  102.     </style>
  103. </head>
  104. <body>
  105.     <div class="box">
  106.        <ul class="list_box">
  107.            <li class="list1">
  108.                <img src="./images/list1.webp" alt="购物清单1">
  109.                <div class="list1_say">
  110.                    <span class="title_text">王小鸭风衣外套2022年新款女秋宽松韩系风格穿搭系带气质中长大衣</span>
  111.                </div>
  112.                <div class="price_con">
  113.                     <span class="list_price_title">￥</span>  
  114.                     <span class="list_price_after">1199.00</span>
  115.                     <span class="list_price_old">1199.00</span>
  116.                </div>
  117.                <div class="dian-name">
  118.                     <span class="dian_name_span"></span>
  119.                     王小鸭旗舰店
  120.                </div>
  121.                <div class="list_foot">
  122.                    <div class="list_tags"></div>
  123.                    <div class="sell_info">
  124.                         月额 21
  125.                    </div>
  126.                </div>
  127.            </li>
  128.            <li class="list2"></li>
  129.            <li class="list3"></li>
  130.            <li class="list4"></li>
  131.            <li class="list5"></li>
  132.        </ul>
  133.     </div>
  134. </body>
  135. </html>

页面效果：

代码中使用的图片，我放下面的百度网盘中，大家可以自己去提取：

链接：https://pan.baidu.com/s/1foUNvCh3uY1_3d-nb9cJgw?pwd=71tb 
提取码：71tb

  文章到这也到了末尾，下期我还会为大家继续更新前端网页开发相关博文，如果感觉写的还好的博友，希望大家能够关注我后期写的博文，感谢大家的支持！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/996699
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号