仿淘宝网页

已于 2024-07-23 01:52:39 修改
阅读量116 收藏
点赞数 3
分类专栏： web前端 文章标签： javascript css3 css 前端
于 2024-07-23 01:45:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Woodstock5/article/details/140614840
版权 
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="=width=device-width,initial-scale=1.0">
    <title>仿淘宝商品页面</title>
    <!--
        理解整个页面的结构
        1.div -box
        2.ul -prods
        3.li -prod
            a - prod-href
                img -prod-img
                div -prod-introdu
                div -prod-price
                div -prod-boss
                div -prod-sale
    -->
    <style>
        .box{
            width: 100%;
            /* border: 1px solid #f2f2f2; */
            /* margin: auto; */
            /* background-color: aquamarine; */

        }
        .prods{
            width: 234px;
            height: 366px;
            list-style:none;
            border: 1px solid #f2f2f2;
            display: inline-block;
            line-height: 1.6;
            /* margin-left: -5px; */
        }
        .prod-href{
            text-decoration: none;
        }
        .prods:hover{
            border-color: red;
        }

        /* .prod-img{
            text-align: center;
        } */
        .prod-introduce{
            color: #9b9b9b;
            font-size: 14px;

        }
        .prod-introduce-span{
            color: #9b9b9b;
            font-size: 14px;
        }
        .prod-price{
            font-size: 19px;
            color: red;
        }
        .prod-boss{
            color: #9b9b9b;
            font-size: 12px;
        }
        .prod-sale{
            color: #9b9b9b;
            font-size: 12px;
            border-top: 1px solid #f2f2f2;
            text-align: right;
            padding-top: 15px;
        }
        .prod-text-box{
            width:210px;
            height: 340px;
            margin: auto;
            /* border:1px solid blue;  */
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="prods">
            <!-- 编写一个商品链接 -->
            <li class="prod">
                <a class="prod-href"href="https://item.taobao.com/item.htm?spm=a21xtw.29178619.product_shelf.6.6a294831jDJaeK&id=21866827279">
                    <div class="prod-text-box">
                        <img class="prod-img"width="198px"height="198px"src="https://gw.alicdn.com/imgextra/i2/28350177/O1CN01TOR2ab1DB71gJyU87_!!28350177.jpg_Q75.jpg_.webp"alt="">
                        <div class="prod-introduce">
                            <span class="prod-introduce-span">韩国进口afrocat可爱清新ins防水文具袋大容量学生笔袋收纳化妆包</span></div>
                        <div class="prod-price">￥79</div>
                        <div class="prod-boss">半道门环球潮流馆</div>
                        <div class="prod-sale">月销2000+</div>
                    </div>   
                </a>
            </li>
            <li class="prod">
                <a class="prod-href"href="https://item.taobao.com/item.htm?spm=a21xtw.29178619.product_shelf.6.6a294831jDJaeK&id=21866827279">
                    <div class="prod-text-box">
                        <img class="prod-img"width="198px"height="198px"src="https://gw.alicdn.com/imgextra/i2/28350177/O1CN01TOR2ab1DB71gJyU87_!!28350177.jpg_Q75.jpg_.webp"alt="">
                        <div class="prod-introduce">
                            <span class="prod-introduce-span">韩国进口afrocat可爱清新ins防水文具袋大容量学生笔袋收纳化妆包</span></div>
                        <div class="prod-price">￥79</div>
                        <div class="prod-boss">半道门环球潮流馆</div>
                        <div class="prod-sale">月销2000+</div>
                    </div>   
                </a>
            </li>
            <li class="prod">
                <a class="prod-href"href="https://item.taobao.com/item.htm?spm=a21xtw.29178619.product_shelf.6.6a294831jDJaeK&id=21866827279">
                    <div class="prod-text-box">
                        <img class="prod-img"width="198px"height="198px"src="https://gw.alicdn.com/imgextra/i2/28350177/O1CN01TOR2ab1DB71gJyU87_!!28350177.jpg_Q75.jpg_.webp"alt="">
                        <div class="prod-introduce">
                            <span class="prod-introduce-span">韩国进口afrocat可爱清新ins防水文具袋大容量学生笔袋收纳化妆包</span></div>
                        <div class="prod-price">￥79</div>
                        <div class="prod-boss">半道门环球潮流馆</div>
                        <div class="prod-sale">月销2000+</div>
                    </div>   
                </a>
            </li>
            <li class="prod">
                <a class="prod-href"href="https://item.taobao.com/item.htm?spm=a21xtw.29178619.product_shelf.6.6a294831jDJaeK&id=21866827279">
                    <div class="prod-text-box">
                        <img class="prod-img"width="198px"height="198px"src="https://gw.alicdn.com/imgextra/i2/28350177/O1CN01TOR2ab1DB71gJyU87_!!28350177.jpg_Q75.jpg_.webp"alt="">
                        <div class="prod-introduce">
                            <span class="prod-introduce-span">韩国进口afrocat可爱清新ins防水文具袋大容量学生笔袋收纳化妆包</span></div>
                        <div class="prod-price">￥79</div>
                        <div class="prod-boss">半道门环球潮流馆</div>
                        <div class="prod-sale">月销2000+</div>
                    </div>   
                </a>
            </li>
            <li class="prod">
                <a class="prod-href"href="https://item.taobao.com/item.htm?spm=a21xtw.29178619.product_shelf.6.6a294831jDJaeK&id=21866827279">
                    <div class="prod-text-box">
                        <img class="prod-img"width="198px"height="198px"src="https://gw.alicdn.com/imgextra/i2/28350177/O1CN01TOR2ab1DB71gJyU87_!!28350177.jpg_Q75.jpg_.webp"alt="">
                        <div class="prod-introduce">
                            <span class="prod-introduce-span">韩国进口afrocat可爱清新ins防水文具袋大容量学生笔袋收纳化妆包</span></div>
                        <div class="prod-price">￥79</div>
                        <div class="prod-boss">半道门环球潮流馆</div>
                        <div class="prod-sale">月销2000+</div>
                    </div>   
                </a>
            </li>
            <li class="prod">
                <a class="prod-href"href="https://item.taobao.com/item.htm?spm=a21xtw.29178619.product_shelf.6.6a294831jDJaeK&id=21866827279">
                    <div class="prod-text-box">
                        <img class="prod-img"width="198px"height="198px"src="https://gw.alicdn.com/imgextra/i2/28350177/O1CN01TOR2ab1DB71gJyU87_!!28350177.jpg_Q75.jpg_.webp"alt="">
                        <div class="prod-introduce">
                            <span class="prod-introduce-span">韩国进口afrocat可爱清新ins防水文具袋大容量学生笔袋收纳化妆包</span></div>
                        <div class="prod-price">￥79</div>
                        <div class="prod-boss">半道门环球潮流馆</div>
                        <div class="prod-sale">月销2000+</div>
                    </div>   
                </a>
            </li>
            <li class="prod">
                <a class="prod-href"href="https://item.taobao.com/item.htm?spm=a21xtw.29178619.product_shelf.6.6a294831jDJaeK&id=21866827279">
                    <div class="prod-text-box">
                        <img class="prod-img"width="198px"height="198px"src="https://gw.alicdn.com/imgextra/i2/28350177/O1CN01TOR2ab1DB71gJyU87_!!28350177.jpg_Q75.jpg_.webp"alt="">
                        <div class="prod-introduce">
                            <span class="prod-introduce-span">韩国进口afrocat可爱清新ins防水文具袋大容量学生笔袋收纳化妆包</span></div>
                        <div class="prod-price">￥79</div>
                        <div class="prod-boss">半道门环球潮流馆</div>
                        <div class="prod-sale">月销2000+</div>
                    </div>   
                </a>
            </li>
            <li class="prod">
                <a class="prod-href"href="https://item.taobao.com/item.htm?spm=a21xtw.29178619.product_shelf.6.6a294831jDJaeK&id=21866827279">
                    <div class="prod-text-box">
                        <img class="prod-img"width="198px"height="198px"src="https://gw.alicdn.com/imgextra/i2/28350177/O1CN01TOR2ab1DB71gJyU87_!!28350177.jpg_Q75.jpg_.webp"alt="">
                        <div class="prod-introduce">
                            <span class="prod-introduce-span">韩国进口afrocat可爱清新ins防水文具袋大容量学生笔袋收纳化妆包</span></div>
                        <div class="prod-price">￥79</div>
                        <div class="prod-boss">半道门环球潮流馆</div>
                        <div class="prod-sale">月销2000+</div>
                    </div>   
                </a>
            </li>
        </ul>
    </div>

</body>
</html>

472cc823825f406d99221d8ffc9637cf.jpg

css盒子模型

CSS盒子模型是网页布局的基础，它定义了HTML元素如何占据空间。每个元素都被视为一个盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。

内容：盒子内部显示的实际内容，如文本、图片等。

内边距：内容区域与边框之间的空间，用于创建内容与边框之间的间隔。

边框：围绕在内边距和内容外面的线条，可以定义其样式、宽度和颜色。

外边距：边框外的空间，用于控制元素与其他元素之间的距离。

 

 

Woodstock5
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue仿淘宝购物车网页
weixin_46077567的博客
01-15 3628
用vue实现淘宝网页购物车页面，自己练习，有什么不足请多多指教 功能主要包括： 全选； 店铺全选； 商品的选中和删除 结算 效果图如下： 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准...
课堂作业，仿制淘宝网页
dekusss的博客
04-14 64
上课学的
web第三天仿淘宝网页
m0_65858385的博客
11-17 129
wsb第三天仿淘宝
仿淘宝商城网站源码+附教程
banzhuan678的博客
06-23 3890
介绍： 搭建简略步骤： 1.上传源码，解压源码 2.访问域名，进行安装， 按照提示输入数据库账号和密码 3.安装完成后默认账号admin 密码是你自己填写的设置的那个 网盘下载地址： http://kekewangLuo.net/GGiqGyoxy5c0 图片： ...
仿淘宝详情页 直接上代码
qq_42663566的博客
01-19 3566
放淘宝详情页 直接上代码 package com.example.liketitledemo; import android.content.Context; import android.graphics.Point; import android.util.AttributeSet; import android.view.WindowManager; import android.w...
基于HTML+CSS+JavaScript仿淘宝购物商城设计毕业论文源码
网页设计与制作 | HTML+CSS+JS
05-23 843
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
仿淘宝网商城 网页设计 html源码 大作业
VX_laoxuezhangzy的博客
06-11 462
dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。页面内有JavaScript 轮播图 （注：这些东西不需要可以删除）热卖推荐： logo、导航、轮播图、热卖推荐、底部。水果生鲜： logo、导航、轮播图、水果生鲜、底部。科技数码： logo、导航、轮播图、科技数码、底部。服装百货： logo、导航、轮播图、服装百货、底部。【html+css+js】淘宝网五页带轮播带注释。首页： logo、导航、轮播图、猜你喜欢、底部。
仿淘宝商品界面（html div+css)
yikaluosidexizhe的博客
11-10 885
div+css做的
最新仿淘宝源码使用原生HTML+CSS描写
热门推荐
小崔同学
07-26 1万+
今天给大家分享前不久写的一个淘宝网静态页面 源码下载地址: 下面提供html和css样式代码 <!DOCTYPE html> <html> <head> <!-->资源来自崔俊杰博客qq:1746272020<--> <title>淘宝网-淘！我喜欢</title> <meta charset="utf-8"> <link rel="shortcut icon" href="logo.png" ty
仿淘宝网html网页模板
06-20
在仿淘宝网的模板中，我们可能会看到如何通过CSS实现响应式设计，确保网页在不同设备上都有良好的显示效果。例如，使用媒体查询（media queries）根据屏幕尺寸调整布局，以及浮动（float）、定位（positioning）和...
仿淘宝网页动态网页效果，纯css+html+JavaScript
07-13
在仿淘宝网页中，JavaScript主要负责以下功能： 1. **导航栏交互**：实现导航栏的下拉菜单，点击时显示或隐藏子菜单。 2. **商品加载与滚动**：模拟淘宝的无限滚动加载商品，当用户滚动到页面底部时，自动加载更多...
仿淘宝html网页模板
12-11
"仿淘宝html网页模板"就是这样一个资源，它旨在模仿淘宝网的页面设计，帮助开发者或者设计师创建类似淘宝风格的电子商务网站。淘宝作为中国最大的在线购物平台，其界面设计具有高度的用户友好性和易用性，因此，仿制...
仿淘宝网站基于html网页模板设计静态网页模板参考.rar(项目源码)
11-05
仿淘宝网站，首页制作，参考模板，供学习使用，提供很好的jquery类库，以及div+css样式的编排方式，很适合二次开发。 查看链接：https://blog.csdn.net/weixin_40228600/article/details/121160209
仿淘宝详情.zip
10-13
【仿淘宝详情.zip】是一个包含了实现淘宝商品详情页面仿制的源代码压缩包。这个项目主要是为了帮助开发者理解和实现一个类似淘宝的商品详情展示功能，它可能涵盖了前端界面设计、交互逻辑以及与后端数据交互等多个...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 456
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1068
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1168
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 1020
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值