前端开发——淘宝购物列表

已于 2022-11-28 08:42:55 修改
阅读量2.7k 收藏 28
点赞数 3
分类专栏： 前端 文章标签： css css3 html
于 2022-11-25 19:31:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gjbss/article/details/128042898
版权

前言

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

下面是网页特效： 

 

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

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

   <div class="box">
       <ul class="list_box">
           <li class="list1">
               <img src="./images/list1.webp" alt="购物清单1">
               <div class="list1_say">
                   <span class="title_text">王小鸭风衣外套2022年新款女秋宽松韩系风格穿搭系带气质中长大衣</span>
               </div>
               <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">1199.00</span>
                    <span class="list_price_old">1199.00</span>
               </div>
               <div class="dian-name">
                    <span class="dian_name_span"></span>
                    王小鸭旗舰店
               </div>
               <div class="list_foot">
                   <div class="list_tags"></div>
                   <div class="sell_info">
                        月额 21
                   </div>
               </div>
           </li>
           <li class="list2">
                <img src="./images/list2.webp" alt="购物清单2">
                <div class="list1_say">
                    <span class="title_text">王小鸭风衣外套2022秋新款韩式休闲宽松显瘦流行中.....</span>
                </div>
                <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">949.00</span>
                    <span class="list_price_old">949.00</span>
                </div>
                <div class="dian-name">
                    <span class="dian_name_span"></span>
                    王小鸭旗舰店
                </div>
                <div class="list_foot">
                    <div class="list_tags"></div>
                    <div class="sell_info">
                        月额 15
                    </div>
                </div>
           </li>
           <li class="list3">
                <img src="./images/list3.webp" alt="购物清单3">
                <div class="list1_say">
                    <span class="title_text">格子小西装女外套韩版2022新款秋装修身短款女西服长袖上.....</span>
                </div>
                <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">298.00</span>
                    <span class="list_price_old">298.00</span>
                </div>
                <div class="dian-name">
                    <span class="dian_name_span"></span>
                    侃侃衣诚旗舰店
                </div>
                <div class="list_foot">
                    <div class="list_tags"></div>
                    <div class="sell_info">
                        月额 20
                    </div>
                </div>
           </li>
           <li class="list4">
                <img src="./images/list4.webp" alt="购物清单4">
                <div class="list1_say">
                    <span class="title_text">公主国度 高端披肩领连帽长款毛呢外套双面双色羊绒大衣女.....</span>
                </div>
                <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">5188.00</span>
                    <span class="list_price_old">5188.00</span>
                </div>
                <div class="dian-name">
                    <span class="dian_name_span"></span>
                    公主国度旗舰店
                </div>
                <div class="list_foot">
                    <div class="list_tags"></div>
                    <div class="sell_info">
                        月额 55
                    </div>
                </div>
           </li>
           <li class="list5">
                <img src="./images/list5.webp" alt="购物清单5">
                <div class="list1_say">
                    <span class="title_text">公主国度 高端连帽羊毛呢外套修身显瘦过膝长款双面羊绒大.....</span>
                </div>
                <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">5188.00</span>
                    <span class="list_price_old">5188.00</span>
                </div>
                <div class="dian-name">
                    <span class="dian_name_span"></span>
                    公主国度旗舰店
                </div>
                <div class="list_foot">
                    <div class="list_tags"></div>
                    <div class="sell_info">
                        月额 69
                    </div>
                </div>
           </li>
       </ul>
    </div>

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

  <style>
          *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .box{
            width: 1485px;
            height: 460px;
            border: #fd3f31;
            /* background-color: pink; */
            margin: 0 auto;
        }
        .list_box li{
            width: 295px;
            height: 460px;
            float: left;
            color: #9b9b9b;
            line-height: 20px;
            border-color:rgba(0,0,0, 0.1);
            border-width: 1px;
            border-style: solid;
        }
        .list_box li img{
            width: 245px;
            height: 243px;
            margin: 30px 26px 14px;
        }
        .list1_say{
            font-size: 14px;
            height: 60px;
            width: 198px;
            margin: 0 26px;
        }
        .price_con{
            height: 25px;
            padding: 6px 26px;
            line-height: 1.6;
        }
        .list_price_title{
            font-size: 18px;
            color: #fd3f31;
        }
        .list_price_after{
            font-size: 18px;
             color: #fd3f31;
        }
        .list_price_old{
            margin-left: 8px;
            vertical-align: baseline;
            text-decoration: line-through;
            line-height: 20px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #9b9b9b;
        }
        .dian_name{
            font-size: 12px;
            color: #9b9b9b;
            line-height: 17px;
            background-color: #fff;
        }
        .dian_name_span{
            color: #fd3f31;
            margin: 18px 26px;
        }
        .list_foot{
            height: 12px;
            /* background-color:purple;  */
            margin-top: 20px;
            border-top: 1px solid #f2f2f2;
            padding: 9px 0;
            vertical-align: bottom;
            position: relative;
            
        }
        .list_tags{
            overflow: hidden;
            white-space: nowrap;
            vertical-align: middle;
        }
        .sell_info{
            position: absolute;
            right: 0;
            top: 9px;
            color: #9b9b9b;
            font-size: 12px;
            line-height: 17px;
            background: #fff;
            padding-left: 12px;
            
        }
    </style>

 淘宝购物列表代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物列表</title>
    <style>
          *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .box{
            width: 1485px;
            height: 460px;
            border: #fd3f31;
            /* background-color: pink; */
            margin: 0 auto;
        }
        .list_box li{
            width: 295px;
            height: 460px;
            float: left;
            color: #9b9b9b;
            line-height: 20px;
            border-color:rgba(0,0,0, 0.1);
            border-width: 1px;
            border-style: solid;
        }
        .list_box li img{
            width: 245px;
            height: 243px;
            margin: 30px 26px 14px;
        }
        .list1_say{
            font-size: 14px;
            height: 60px;
            width: 198px;
            margin: 0 26px;
        }
        .price_con{
            height: 25px;
            padding: 6px 26px;
            line-height: 1.6;
        }
        .list_price_title{
            font-size: 18px;
            color: #fd3f31;
        }
        .list_price_after{
            font-size: 18px;
             color: #fd3f31;
        }
        .list_price_old{
            margin-left: 8px;
            vertical-align: baseline;
            text-decoration: line-through;
            line-height: 20px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #9b9b9b;
        }
        .dian_name{
            font-size: 12px;
            color: #9b9b9b;
            line-height: 17px;
            background-color: #fff;
        }
        .dian_name_span{
            color: #fd3f31;
            margin: 18px 26px;
        }
        .list_foot{
            height: 12px;
            /* background-color:purple;  */
            margin-top: 20px;
            border-top: 1px solid #f2f2f2;
            padding: 9px 0;
            vertical-align: bottom;
            position: relative;
            
        }
        .list_tags{
            overflow: hidden;
            white-space: nowrap;
            vertical-align: middle;
        }
        .sell_info{
            position: absolute;
            right: 0;
            top: 9px;
            color: #9b9b9b;
            font-size: 12px;
            line-height: 17px;
            background: #fff;
            padding-left: 12px;
            
        }
    </style>
</head>
<body>
    <div class="box">
       <ul class="list_box">
           <li class="list1">
               <img src="./images/list1.webp" alt="购物清单1">
               <div class="list1_say">
                   <span class="title_text">王小鸭风衣外套2022年新款女秋宽松韩系风格穿搭系带气质中长大衣</span>
               </div>
               <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">1199.00</span>
                    <span class="list_price_old">1199.00</span>
               </div>
               <div class="dian-name">
                    <span class="dian_name_span"></span>
                    王小鸭旗舰店
               </div>
               <div class="list_foot">
                   <div class="list_tags"></div>
                   <div class="sell_info">
                        月额 21
                   </div>
               </div>
           </li>
           <li class="list2">
                <img src="./images/list2.webp" alt="购物清单2">
                <div class="list1_say">
                    <span class="title_text">王小鸭风衣外套2022秋新款韩式休闲宽松显瘦流行中.....</span>
                </div>
                <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">949.00</span>
                    <span class="list_price_old">949.00</span>
                </div>
                <div class="dian-name">
                    <span class="dian_name_span"></span>
                    王小鸭旗舰店
                </div>
                <div class="list_foot">
                    <div class="list_tags"></div>
                    <div class="sell_info">
                        月额 15
                    </div>
                </div>
           </li>
           <li class="list3">
                <img src="./images/list3.webp" alt="购物清单3">
                <div class="list1_say">
                    <span class="title_text">格子小西装女外套韩版2022新款秋装修身短款女西服长袖上.....</span>
                </div>
                <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">298.00</span>
                    <span class="list_price_old">298.00</span>
                </div>
                <div class="dian-name">
                    <span class="dian_name_span"></span>
                    侃侃衣诚旗舰店
                </div>
                <div class="list_foot">
                    <div class="list_tags"></div>
                    <div class="sell_info">
                        月额 20
                    </div>
                </div>
           </li>
           <li class="list4">
                <img src="./images/list4.webp" alt="购物清单4">
                <div class="list1_say">
                    <span class="title_text">公主国度 高端披肩领连帽长款毛呢外套双面双色羊绒大衣女.....</span>
                </div>
                <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">5188.00</span>
                    <span class="list_price_old">5188.00</span>
                </div>
                <div class="dian-name">
                    <span class="dian_name_span"></span>
                    公主国度旗舰店
                </div>
                <div class="list_foot">
                    <div class="list_tags"></div>
                    <div class="sell_info">
                        月额 55
                    </div>
                </div>
           </li>
           <li class="list5">
                <img src="./images/list5.webp" alt="购物清单5">
                <div class="list1_say">
                    <span class="title_text">公主国度 高端连帽羊毛呢外套修身显瘦过膝长款双面羊绒大.....</span>
                </div>
                <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">5188.00</span>
                    <span class="list_price_old">5188.00</span>
                </div>
                <div class="dian-name">
                    <span class="dian_name_span"></span>
                    公主国度旗舰店
                </div>
                <div class="list_foot">
                    <div class="list_tags"></div>
                    <div class="sell_info">
                        月额 69
                    </div>
                </div>
           </li>
       </ul>
    </div>
</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .box{
            width: 1485px;
            height: 460px;
            border: #fd3f31;
            /* background-color: pink; */
            margin: 0 auto;
        }
        .list_box li{
            width: 295px;
            height: 460px;
            float: left;
            color: #9b9b9b;
            line-height: 20px;
            border-color:rgba(0, 0, 0, 0.1);
            border-width: 1px;
            border-style: solid;
        }
        .list_box li img{
            width: 245px;
            height: 243px;
            margin: 30px 26px 14px;
        }
        .list1_say{
            font-size: 14px;
            height: 60px;
            width: 198px;
            margin: 0 26px;
        }
        .price_con{
            height: 25px;
            padding: 6px 26px;
            line-height: 1.6;
        }
        .list_price_title{
            font-size: 18px;
            color: #fd3f31;
        }
        .list_price_after{
            font-size: 18px;
             color: #fd3f31;
        }
        .list_price_old{
            margin-left: 8px;
            vertical-align: baseline;
            text-decoration: line-through;
            line-height: 20px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #9b9b9b;
        }
        .dian_name{
            font-size: 12px;
            color: #9b9b9b;
            line-height: 17px;
            background-color: #fff;
        }
        .dian_name_span{
            color: #fd3f31;
            margin: 18px 26px;
        }
        .list_foot{
            height: 12px;
            /* background-color:purple;  */
            margin-top: 20px;
            border-top: 1px solid #f2f2f2;
            padding: 9px 0;
            vertical-align: bottom;
            position: relative;
            
        }
        .list_tags{
            overflow: hidden;
            white-space: nowrap;
            vertical-align: middle;
        }
        .sell_info{
            position: absolute;
            right: 0;
            top: 9px;
            color: #9b9b9b;
            font-size: 12px;
            line-height: 17px;
            background: #fff;
            padding-left: 12px;
            
        }
    </style>
</head>
<body>
    <div class="box">
       <ul class="list_box">
           <li class="list1">
               <img src="./images/list1.webp" alt="购物清单1">
               <div class="list1_say">
                   <span class="title_text">王小鸭风衣外套2022年新款女秋宽松韩系风格穿搭系带气质中长大衣</span>
               </div>
               <div class="price_con">
                    <span class="list_price_title">￥</span>  
                    <span class="list_price_after">1199.00</span>
                    <span class="list_price_old">1199.00</span>
               </div>
               <div class="dian-name">
                    <span class="dian_name_span"></span>
                    王小鸭旗舰店
               </div>
               <div class="list_foot">
                   <div class="list_tags"></div>
                   <div class="sell_info">
                        月额 21
                   </div>
               </div>
           </li>
           <li class="list2"></li>
           <li class="list3"></li>
           <li class="list4"></li>
           <li class="list5"></li>
       </ul>
    </div>
</body>
</html>

页面效果：

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

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

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

Luck&Strive
关注
  • 3
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html淘宝商品小窗口
weixin_54986763的博客
11-08 556
【代码】html淘宝商品小窗口。
简约淘宝——网上购物系统的实现
05-21
《简约淘宝——网上购物系统的实现》是一个典型的电子商务项目，旨在模拟和实现淘宝网的主要功能，为用户提供便捷的在线购物体验。这个系统涵盖了电子商务的核心模块，包括用户管理、商品浏览、购物车、订单处理以及...
html+css简单仿制淘宝商品界面
树下一少年的博客
02-08 5142
html+css简单仿制淘宝商品界面 一.主要思路 二.完整代码 三.最终效果
淘宝购物车页面实现
m0_53119722的博客
03-21 1295
【代码】淘宝购物车页面实现。
淘宝网 商城主题 网页设计 html源码 五页带轮播带注释
最新发布
XueZhangJiuWo的博客
05-08 585
dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。页面内有JavaScript 轮播图 （注：这些东西不需要可以删除）【html+css+js】淘宝网五页带轮播带注释。： logo、导航、轮播图、猜你喜欢、底部。： logo、导航、轮播图、热卖推荐、底部。： logo、导航、轮播图、水果生鲜、底部。： logo、导航、轮播图、科技数码、底部。： logo、导航、轮播图、服装百货、底部。
淘宝网首页仿写(html+css+js）
weixin_46811890的博客
08-10 2万+
【代码】淘宝网首页仿写(html+css+js）
淘宝主页+女装会场+详情页（html+css+js）
天天的博客
01-08 8544
淘宝网是中国电商行业的领军企业，其前端网站技术一直处于国内领先水平。本博客旨在分享淘宝网前端在技术方面的积累与探索。内容涵盖前端开发、性能优化、移动端适配、架构设计等诸多方面，对于前端开发人员有着较高的技术参考价值。注：不含源码
HTML .CSS实现商品列表
qq_67519129的博客
06-14 1万+
HTML .CSS实现商品列表
前端毕业设计——淘宝网
10-14
【前端毕业设计——淘宝网】项目是一个以Vue2.0和Vuex为核心技术构建的电商网站，旨在模拟淘宝网的基本功能。在这个项目中，开发者利用现代前端技术栈，实现了用户友好的界面和交互，以及一些关键的电商特性。以下是...
PHP实例开发源码——老人手机淘宝客程序.zip
11-25
【描述】"PHP实例开发源码——老人手机淘宝客程序"说明了这是一个实际操作的项目，旨在为老年人提供友好的淘宝购物体验。它可能考虑到了老年人在使用智能手机时的特殊需求，如大字体、简洁界面和易操作性。源码的...
js防京东淘宝小列子。。。
02-17
3. `购物前必领淘宝内部优惠券.url`：这同样可能是书签，指向一个淘宝优惠券领取页面，可能与示例中的应用场景有关——防止优惠券被自动领取或者滥用。 4. `css`：这是一个目录，存放了CSS样式文件，用于控制网页的...
HTML项目淘宝网完整代码
01-08
给以资源以及关键代码参考！ 需要的人，请放心下载！
【天池大赛】淘宝用户购物行为数据可视化分析——基于Kmeans的用户转换率曲线（生存分析）.zip
02-19
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
HTML+CSS实现淘宝首页
热门推荐
道阻且长，行则将至。
01-03 3万+
一、HTML+CSS实现淘宝首页 仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦，我会不定期的跟大家分享文章。 二、页面结构如下： ...
用html写一个写一个H5瀑布流商品列表网页，它将包括图像、文本、价格和购买按钮，以帮助用户快速浏览和购买商品...
weixin_42601134的博客
02-18 710
要用HTML编写一个瀑布流商品列表网页，首先需要准备商品的图像、文本描述以及价格信息，并用HTML元素将这些内容放置在网页中，比如用div元素作为商品信息容器，img元素来显示商品图片，p元素来显示商品文本，span元素来显示商品价格，a元素来显示购买按钮。其次，需要将这些商品信息使用css样式文件定义出一个瀑布流布局，比如将div元素的宽度设置为固定值，给div元素设置float属性，使其自动换...
商品购物网页设计（HTML）
weixin_65314914的博客
08-05 4434
HTML网页设计是计算机科学领域中的一个重要分支，它涉及到网页的布局、设计、交互等方面。随着互联网的发展，HTML网页设计已成为了一个必备的技能，无论是企业还是个人都需要掌握这一技能。本教程将介绍HTML的基础知识，包括HTML标签、CSS样式、JavaScript脚本等内容，帮助读者快速入门HTML网页设计，并能够创建出美观、实用、交互性强的网页。同时，我们也将介绍一些实用的工具和技巧，帮助读者更加高效地完成网页设计工作。希望本教程能够对广大网页设计爱好者有所帮助！
淘宝网简易实现, Html + css + Javascript + Jquery +Swiper +Vue, 期末js大作业
mobeiCanyue
01-06 6093
淘宝网简易实现, Html + css + Javascript + Jquery +Swiper +Vue, 期末js大作业
HTML+CSS简易淘宝页面
新白的博客
03-31 2万+
简易淘宝界面
HTML实战案例4：制作淘宝店铺列表页面
海鱼专属博客
05-27 6439
实战案例4：制作淘宝店铺列表页面 一、完整的页面效果图 二、文本素材 淘宝首页> 店铺街> 所有店铺(4626173) 淘店 店铺类目 韩都衣舍旗舰店 主营宝贝：韩都衣舍 2011 现货 8122 山东济南 旗舰店 osa品牌服饰旗舰店 主营宝贝：t恤 连衣裙 女装 696 广东深圳 旗舰店 andostore安都专卖店 主营宝贝：andosto...
Python驱动的前端开发与挑战
"使用Python开发前端ppt课件.ppt" 这篇课件主要探讨了使用Python在前端开发中的应用，以及前端开发的历史演变和技术挑战。它由潘俊勇分享，介绍了如何利用Python简化前端开发，特别是在B/S（浏览器/服务器）架构下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Luck&Strive

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值