HTML+CSS简单的淘宝首页框架布局小练（三）

最新推荐文章于 2022-07-13 19:50:13 发布
最新推荐文章于 2022-07-13 19:50:13 发布
阅读量3.9k 收藏 40
点赞数 17
分类专栏： 淘宝首页布局（三） HTML   CSS 文章标签： HTML+CSS简单的淘宝首页框架布局小练
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tina_dl/article/details/89075285
版权
本文通过HTML和CSS代码详细介绍了如何构建淘宝首页的框架布局，包括导航栏、滚动条和不同区域的样式设置，是初学者练习布局技巧的好材料。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 接着完善淘宝的首页框架（嘿嘿，小傻猫日常）
    具体代码见下
HTML

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<link href="../CSS/二级导航3.css" rel="stylesheet" type="text/css">-->
    <!--<title>Title</title>-->
<!--</head>-->
<!--<body>-->


<!--<div class="index">-->
    <!--<div class="header">-->

        <!--<nav class="header_1">-->
            <!--<ul>-->
                <!--<li><a href="#">中国大陆</a>-->
                    <!--<ul  style="width:180px; height:320px;overflow:scroll"  >-->
                        <!--<li><a href="#">全球</a></li>-->
                        <!--<li><a href="#">中国大陆</a></li>-->
                        <!--<li><a href="#">香港</a></li>-->
                        <!--<li><a href="#">台湾</a></li>-->
                        <!--<li><a href="#">澳门</a></li>-->
                        <!--<li><a href="#">韩国</a></li>-->
                        <!--<li><a href="#">马来西亚</a></li>-->
                        <!--<li><a href="#">澳大利亚</a></li>-->
                        <!--<li><a href="#">新加坡</a></li>-->
                        <!--<li><a href="#">新西兰</a></li>-->
                        <!--<li><a href="#">加拿大</a></li>-->
                        <!--<li><a href="#">美国</a></li>-->
                        <!--<li><a href="#">日本</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <!--<li><a href="#">亲，请登录</a></li>-->
                <!--<li><a href="#">免费注册</a></li>-->
                <!--<li><a href="#">手机逛淘宝</a></li>-->
            <!--</ul>-->
        <!--</nav>-->


        <!--<div class="header_2">-->
            <!--<ul class="header_2_1">-->
                <!--<li class="header_2_1_1">-->
                    <!--<a href="#">我的淘宝</a>-->
                    <!--<ul>-->
                        <!--<li><a href="#">已买到的宝贝</a></li>-->
                        <!--<li><a href="#">我的足迹</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <!--<li class="header_2_1_2">-->
                    <!--<a href="#">购物车</a>-->
                <!--</li>-->
                <!--<li class="header_2_1_3">-->
                    <!--<a href="#">收藏夹</a>-->
                    <!--<ul>-->
                        <!--<li><a href="#">收藏的宝贝</a></li>-->
                        <!--<li><a href="#">收藏的店铺</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <!--<li class="header_2_1_4">-->
                    <!--<a href="#">商品分类</a>-->
                <!--</li>-->
                <!--<li class="header_2_1_5">-->
                    <!--<a href="#">|</a>-->
                <!--</li>-->
                <!--<li class="header_2_1_6">-->
                    <!--<a href="#">千牛卖家中心</a>-->
                    <!--<ul>-->
                        <!--<li><a href="#">免费开店</a></li>-->
                        <!--<li><a href="#">已卖出的宝贝</a></li>-->
                        <!--<li><a href="#">出售中的宝贝</a></li>-->
                        <!--<li><a href="#">卖家服务市场</a></li>-->
                        <!--<li><a href="#">卖家培训中心</a></li>-->
                        <!--<li><a href="#">体检中心</a></li>-->
                        <!--<li><a href="#">问商友</a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <!--<li class="header_2_1_7">-->
                    <!--<a href="#">联系客服</a>-->
                    <!--<ul>-->
                        <!--<li><a href="#">消费者客服</a></li>-->
                        <!--<li><a href="#">卖家客服</a></li>-->
                    <!--</ul>-->
                <!--</li>-->

                <!--<li class="header_2_1_8">-->
                    <!--<a href="#">网站导航</a>-->
                    <!--<ul>-->
                        <!--<div class="dh">-->
                            <!--<div class="dh_1">-->
                                <!--<li class="zt" style="width: 70px">主题市场</li>-->
                                <!--<ul>-->
                                    <!--<li><a href="#">女装</a></li>-->
                                    <!--<li><a href="#">箱包</a></li>-->
                                    <!--<li><a href="#">手机</a></li>-->
                                    <!--<li><a href="#">手表</a></li>-->
                                    <!--<li><a href="#">游戏</a></li>-->
                                    <!--<li><a href="#">鲜花</a></li>-->
                                    <!--<li><a href="#">装修</a></li>-->
                                    <!--<li><a href="#">汽车</a></li>-->
                                    <!--<li><a href="#">教育</a></li>-->
                                <!--</ul>-->
                                <!--<li class="zt_1" style="width: 30px">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">男装</a></li>-->
                                        <!--<li><a href="#">婴童</a></li>-->
                                        <!--<li><a href="#">美妆</a></li>-->
                                        <!--<li><a href="#">运动</a></li>-->
                                        <!--<li><a href="#">动漫</a></li>-->
                                        <!--<li><a href="#">宠物</a></li>-->
                                        <!--<li><a href="#">建材</a></li>-->
                                        <!--<li><a href="#">二手车</a></li>-->
                                        <!--<li><a href="#">卡券</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_2" style="width: 30px">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">内衣</a></li>-->
                                        <!--<li><a href="#">家电</a></li>-->
                                        <!--<li><a href="#">珠宝</a></li>-->
                                        <!--<li><a href="#">户外</a></li>-->
                                        <!--<li><a href="#">影视</a></li>-->
                                        <!--<li><a href="#">农资</a></li>-->
                                        <!--<li><a href="#">家具</a></li>-->
                                        <!--<li><a href="#">办公</a></li>-->
                                        <!--<li><a href="#">本地</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_3" style="width: 30px">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">鞋靴</a></li>-->
                                        <!--<li><a href="#">数码</a></li>-->
                                        <!--<li><a href="#">眼镜</a></li>-->
                                        <!--<li><a href="#">乐器</a></li>-->
                                        <!--<li><a href="#">美食</a></li>-->
                                        <!--<li><a href="#">房产</a></li>-->
                                        <!--<li><a href="#">百货</a></li>-->
                                        <!--<li><a href="#">定制</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                            <!--</div>-->
                            <!--<div class="dh_2">-->
                                <!--<li class="zt_4">特色市场-->
                                    <!--<ul >-->
                                        <!--<li><a href="#">爱逛街</a></li>-->
                                        <!--<li><a href="#">腔调</a></li>-->
                                        <!--<li><a href="#">极有家</a></li>-->
                                        <!--<li><a href="#">飞猪</a></li>-->
                                        <!--<li><a href="#">农资</a></li>-->
                                        <!--<li><a href="#">丽人购</a></li>-->
                                        <!--<li><a href="#">全球精选</a></li>-->
                                        <!--<li><a href="#">量贩团</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_5">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">美妆秀</a></li>-->
                                        <!--<li><a href="#">淘女郎</a></li>-->
                                        <!--<li><a href="#">阿里拍卖</a></li>-->
                                        <!--<li><a href="#">亲宝贝</a></li>-->
                                        <!--<li><a href="#">天天特卖</a></li>-->
                                        <!--<li><a href="#">聚名品</a></li>-->
                                        <!--<li><a href="#">非常大牌</a></li>-->
                                        <!--<li><a href="#">阿里翻译</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_6">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">全球购</a></li>-->
                                        <!--<li><a href="#">星店</a></li>-->
                                        <!--<li><a href="#">淘宝众筹</a></li>-->
                                        <!--<li><a href="#">咸鱼</a></li>-->
                                        <!--<li><a href="#">Outlets</a></li>-->
                                        <!--<li><a href="#">淘抢购</a></li>-->
                                        <!--<li><a href="#">试用</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                            <!--</div>-->
                            <!--<div class="dh_3">-->
                                <!--<li class="zt_7">阿里APP-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">淘宝</a></li>-->
                                        <!--<li><a href="#">聚划算</a></li>-->
                                        <!--<li><a href="#">旺信</a></li>-->
                                        <!--<li><a href="#">钉钉</a></li>-->
                                        <!--<li><a href="#">虾米音乐</a></li>-->
                                        <!--<li><a href="#">爱逛街</a></li>-->
                                        <!--<li><a href="#">网商银行</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_8">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">天猫</a></li>-->
                                        <!--<li><a href="#">飞猪</a></li>-->
                                        <!--<li><a href="#">闲鱼</a></li>-->
                                        <!--<li><a href="#">高德地图</a></li>-->
                                        <!--<li><a href="#">淘票票</a></li>-->
                                        <!--<li><a href="#">拍卖会</a></li>-->
                                        <!--<li><a href="#">阿里邮箱</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_9">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">支付宝</a></li>-->
                                        <!--<li><a href="#">蚂蚁聚宝</a></li>-->
                                        <!--<li><a href="#">阿里钱盾</a></li>-->
                                        <!--<li><a href="#">点点虫</a></li>-->
                                        <!--<li><a href="#">菜鸟裹裹</a></li>-->
                                        <!--<li><a href="#">阿里云</a></li>-->
                                        <!--<li><a href="#">阿里众包</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                            <!--</div>-->
                            <!--<div class="dh_4">-->
                                <!--<li class="zt_10">精彩推荐类-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">余额宝</a></li>-->
                                        <!--<li><a href="#">淘公仔</a></li>-->
                                        <!--<li><a href="#">淘宝香港</a></li>-->
                                        <!--<li><a href="#">淘宝全球</a></li>-->
                                        <!--<li><a href="#">闺蜜淘货</a></li>-->
                                        <!--<li><a href="#">淘工作</a></li>-->
                                    <!--</ul>-->
                                <!--</li>-->
                                <!--<li class="zt_11">-->
                                    <!--<ul>-->
                                        <!--<li><a href="#">大牌捡宝</a></li>-->
                                        <!--<li><a href="#">浏览器</a></li>-->
                                        <!--<li><a href="#">淘宝台湾</a></li>-->
最低0.47元/天 解锁文章
HTML+CSS简单的淘宝首页框架布局小练(一）
Tina_dl的博客
03-26 1万+
开的前端的课程，练习淘宝的前台页面的框架，就简单根据理解写了下，（小傻猫）记录学习的经历 简单首先分析下淘宝首页的布局框架（小傻猫），自己理解的 首先需要注意的是该部分的布局，是将该部分分成量大块布局的（错误： 主题市场 广告 淘宝头条 账户信息 但个分一块，可能会出现，最后的账户信息块一直是在淘宝头条的下方，并不是出现在右边, 可以自己试试哟） 正确布局： 1 .class...
淘宝网页简单的仿写，html+css
07-24
里面有几个页面的练习，都是使用的，动态的，还有购物网站html+css
淘宝网简单版html+css实现
06-25
完全的用html+css实现的简单版的淘宝网站，会持续更新，到时候会加上js
淘宝首页html+css+js源码
06-03
淘宝首页HTML源码，根据2019年06月年淘宝首页 制作，重合度99%，解压后放在项目里面可用直接运行看效果，采用html+css+js。还有swiper技术。尝试一下吧
html+css的淘宝首页
09-11
html+css的淘宝首页，想只看代码的可以去我发表的文章里看，这里有图片素材和代码
学生作业作品HTML网页前端制作，淘宝商城页面，HTML+css+js
01-18
CSS3引入了许多新特性，如媒体查询（Media Queries）用于响应式设计，过渡（Transitions）和动画（Animations）增加动态效果，以及Flexbox和Grid布局系统，使得复杂的网页布局变得更加简单易控。 再者，JavaScript...
html + css 淘宝网实战
最新发布
12-23
淘宝网的页面设计就需要用到CSS的多种属性来美化界面，比如使用边框、内边距、外边距来控制元素的位置，使用float和position属性来实现复杂的布局，以及使用过渡（transition）、动画（animation）等高级特性来增强...
淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
适合刚接触前端基础知识的同学，初步了解了HTML+CSS后，可以尝试练习类似项目；该项目主要为HTML+CSS实现，不涉及交互、逻辑功能，旨在提高样式布局能力
淘宝首页html模板
04-06
淘宝首页html模板淘宝首页html模板淘宝首页html模板淘宝首页html模板淘宝首页html模板
淘宝架构框架
番薯大佬的专栏
01-09 1030
http://my.oschina.net/yongyi/blog/344030?fromerr=9ZTmucpv 一、个人网站  　　2003 年 4 月 7 日，马云，在杭州，成立了一个神秘的组织。他叫来十位员工，要他们签了一份协议，这份协议要求他们立刻离开阿里巴巴，去做一个神秘的项目。这个项目要求绝对保密，老马戏称“连说梦话被老婆听到都不行，谁要是透漏出去，我将追杀到
html+css仿静态淘宝页面
11-02
本资源为广大html初学者提供源码，经vscode测试可正常运行。刚学前端，错误在所难免，还望广大网友斧正。
html静态网页（淘宝网）
09-16
html静态网页（taobao网首页及附页）
自己做的淘宝网页部分框架
08-18
昨晚花了两个小时做的网页，希望和大家多交流。
HTML项目淘宝网完整代码
01-08
给以资源以及关键代码参考！ 需要的人，请放心下载！
淘宝首页模板 html
09-16
淘宝首页模板 HTML 文件，学习使用。
仿作淘宝页面 html+css
m0_63706031的博客
07-13 2137
仿作淘宝页面简单版
HTML+CSS简单的淘宝首页框架布局小练(二）
Tina_dl的博客
03-28 1115
按要求将淘宝的首页布局块具体化 在写的过程中（小傻猫）出现了点问题，个人理解是可能将整体的 框架布局完了，下面的具体化分块的时候，就出现了布局块的 叠加遮盖 问题，最后没办法将打布局一些做了点改动（个人觉得应该不先把所有 打布局以此写完，应该是将大布局里面的小布局先具体化点，再续写下 面的大布局，这样就会防止出现布局的叠加问题，也可能是个人的问题， 小傻猫，哈哈哈！） 具体代码 H...
用HTML编写淘宝页面
qq_29069777的博客
10-16 1万+
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel...
HTML与CSS实现淘宝静态页面（参考版）
热门推荐
WF帆少的博客
01-15 3万+
本文章内容是利用HTML与CSS实现淘宝静态页面，没有js交互， 需要相关图片素材的请关注微信公众号“兴耀综合平台”获取 效果如下： html代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;淘宝网-淘！我喜欢&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="styles
淘宝首页静态页面HTML+CSS教程与代码
1. **制作淘宝页面**：按照教程或文件内容，使用HTML构建页面框架，再用CSS设置样式，尝试模仿淘宝首页的布局和设计元素，如顶部导航栏、产品展示区域、底部版权信息等。 2. **分离CSS和HTML**：尽管文件的描述表明...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值