当前位置：首页 > news >正文

html + css 淘宝网实战

news 来源：原创 2025/7/27 6:03:22

之前有小伙伴说，淘宝那么牛逼你会写代码，能帮我做一个一样的淘宝网站吗，好呀，看我接下来如何给你做一个淘宝首页。hahh,开个玩笑。。。学习而已。

在进行html + css编写之前先了解下网页的组成和网页元素的尺寸吧

1.网页的组成

一个网页从主要由页头，正文，页尾、布局排版、交互元素组成的。
在这里插入图片描述
淘宝网页的页头，正文就是中间的部分，页尾是最底部关于导航、网页版权备案信息那部分，交互元素是用户在网页上的可以干什么事，比如链接跳转，搜索按钮，输入框等；布局排版是网页设计最重要的部分，就是指网页要长成个什么样子。

2. 网页元素尺寸

1.电脑端的网页尺寸：
宽度：通常在1024px到1920px之间，主流分辨率为1920px。简单的理解就是网页我们可以看到部分的宽度尺寸。电脑的屏幕有大有小，所以选择合适的尺寸来适应不同大小屏幕。
高度：没有固定标准，但一般每个屏幕的高度大约为900px（考虑到1080px的屏幕需要减去浏览器头部和底部的高度）
2.字体设计：
中文常用字体：宋体、微软雅黑或苹果系统黑体。
导航文字：14px、16px、18px、20px。
本文内容：12px、14px。
标题：22px、24px、26px、28px、30px。

3.html + css排版

头部导航

在这里插入图片描述
网页元素都是由一个一个区域组成的，我们把这个区域叫做块元素，也就是一个<div>标签，在头部导航中有背景区域，可以把这个区域的宽度设为100% ，这样无论屏幕多大背景色都会保持不变。其实就是中间文字部分，由一个大的<div>作为容器将他们包裹起来，这个区域是可视区域，宽度也就是网页的尺寸，要保持居中显示。最后就是用2个<div>将左右2边的文字分别包裹起来进行显示了.
由于<div>是块，一个<div>独占一行,所以采用的浮动属性float来布局的。这里当然也可以用到flex容器布局的

搜索及导航区

在这里插入图片描述
上面画的红色框框就是一个个的<div>标签，他们的关系是包含和被包含的关系。排版这里主要也是用到css float浮动属性，需要注意的是在浮动元素后面的元素中需要使用 clear:both 清除浮动带来的影响 .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝网</title>
<link rel="stylesheet" href="style/taobao.css">
</head>
<body><div class="header"><div class="header-top"><div class="header-top-l"><ul><li class="active">中国大陆</li><li>用户名</li><li>网页无障碍</li><li>切换企业版</li><li>选择主题</li></ul></div><div class="header-top-r"><ul><li>已买到的宝贝</li><li>我的淘宝</li><li>购物车</li><li>收藏夹</li><li>商品分类</li><li>免费开店</li><li>千牛卖家中心</li><li>帮助中心</li></ul></div></div><div class="header-gg"><div class="header-gg-cc"><img src="images/header-gg.png" alt=""></div> </div><div class="header-sr"><div class="logo"></div><div class="search-cc"><div class="search-ii"><div class="search-select"><select name="" id=""><option value="">宝贝</option><option value="">天猫</option><option value="">店铺</option></select></div><div class="fg">|</div><div class="search-input"><input type="text" placeholder="九号mzmix后视镜"></div><div class="search-button">搜索</div></div><div class="search-tk"><div class="camera"></div><div class="search-tk-t">搜同款</div></div><div class="search-keyword"><ul><li><a class="hot">打牌钜惠倒计时</a></li><li><a class="hot">零食1元秒杀</a></li><li><a class="hot">爆款低至9.9元</a></li><li>mtplay小牛</li><li>儿童羽绒服</li><li>妈妈外套冬季羽绒服</li><li>赤兔7Pro跑步鞋</li><li>全顺四代纪念版</li></ul></div></div><div class="red-packet"></div></div> </div><div class="nav"><ul><li><div class="nav-title first-title"><a>天猫</a</li><li><div class="nav-icon"></div><div class="nav-title"><a>淘宝直播</a</div></li><li><div class="nav-icon nav-icon2"></div><div class="nav-title"><a>淘宝企业购</a</div></li><li><div class="nav-title"><a>司法拍卖</a</li><li><div class="nav-title green"><a>天猫超市</a</li><li><div class="nav-icon nav-icon3"></div><div class="nav-title"><a>闲鱼集市</a</div></li><li><div class="nav-title"><a>天猫国际</a</li></ul></div>
</body>
</html>

*{margin:0;padding:0;
}
body,button,input,select,textarea {font: 12px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,BlinkMacSystemFont,Helvetica Neue,Arial,PingFang SC,PingFang TC,PingFang HK,Microsoft Yahei,Microsoft JhengHei
}.header{width:100%;height:35px;background-color: #f5f5f5;
}
.header-top{width: 1200px;height:35px;margin: 0 auto;  /*居中*/color:#6d6b70;
}.header-top ul{padding-top:15px;
}.header-top-l{float: left; width:420px;height:35px;line-height: 6px;
}
.header-top-l .active{color:#000000;
}.header-top-r{float: left;padding-left: 80px;width:670px;height:35px;line-height: 6px;
}
.header-top-l ul li{list-style: none;float: left;font-size: 13px;margin-right: 20px;
}.header-top-r ul li{list-style: none;float: left;font-size: 13px;margin-right: 20px;
}.header-gg{width: 100%;height: 60px;background-color: #19814e;
}
.header-gg-cc{width: 1200px;height: 60px;margin: auto;position: relative;overflow: hidden;
}
.header-gg img{width:3840px;height:60px;position: absolute;left: -112%;
}
.header-sr{width:1530px;height: 100px;height: auto;margin: 0 auto;margin-top:14px;
}
.logo{width:120px;height: 75px;background: url(../images/logo.png) no-repeat 50% / cover;float: left;
}
.search-cc{width:1070px;height:83px;float: left;margin-left:85px;
}
.search-ii{width: 950px;height:45px;border:2px solid #df5a1f;border-radius: 12px;float: left;
}
.search-select select{border: none;font-size: 15px;margin:15px 0 15px 18px;color:#313138;float: left;
}
.fg{float: left;margin:8px;color:#d7d7da;
}
.search-input{float: left;
}
.search-input input{border:none;margin:5px;width:760px;height: 35px;
}
.search-input input:focus{outline: none;
}
.search-button{width:74px;height: 38px;background-color: #ff5000;float: left;color:white;border-radius: 10px;margin-top:3px;text-align: center;line-height: 35px;cursor: pointer;
}
.search-tk{width: 100px;height: 45px;background-color: #fff2ec;border-radius: 10px;float: left;margin-left:10px;
}
.camera{width:25px;height: 25px;background: url("../images/camera.png") no-repeat 50% / cover;margin:10px 0 0 10px;float: left;
}
.search-tk-t{width: 55px;height:20px;line-height: 43px;float: left;color: #ef550f;
}
.search-keyword{clear: both;margin-left:5px;
}
.search-keyword ul li{ list-style: none;float: left;margin-left: 10px;font-size: 12px;color:#96979c;padding-top:6px;
}
.hot{color:#f1334d;
}
.red-packet{width:240px;height:72px;background: url(../images/red-packet.gif) no-repeat 50% / cover;float: left;margin-left:15px;
}
.nav{clear: both;width:990px;height:35px;margin: 0 auto;padding-top:20px;
}
.nav ul li{list-style: none;float: left;margin-left:15px;font-size:16px;font-weight: 600;
}
.nav ul li:nth-child(-n+4){color:#f60c3d;
}.green{color:#50d44f;
}
.nav-icon, nav-title{float: left;
}
.nav-title{width: 120px;
}
.first-title{width: 80px;
}
.nav-icon{width: 20px;height:20px;background: url(../images/icon1.gif) no-repeat 50% /cover;margin: 1px 5px -2px 0
}
.nav-icon2{width: 20px;height:20px;background: url(../images/icon2.png) no-repeat 50% /cover;margin: 1px 5px -2px 0
}
.nav-icon2{width: 20px;height:20px;background: url(../images/icon3.gif) no-repeat 50% /cover;margin: 1px 5px -2px 0
}

浏览器效果：
在这里插入图片描述
后面的内容区域有兴趣可以下载下来接着完成啦，如果有问题的地方欢迎留言！

1.网页的组成

2. 网页元素尺寸

3.html + css排版

头部导航

搜索及导航区

相关文章：