之前有小伙伴说，淘宝那么牛逼你会写代码，能帮我做一个一样的淘宝网站吗，好呀，看我接下来如何给你做一个淘宝首页。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
}
浏览器效果：
后面的内容区域有兴趣可以下载下来接着完成啦，如果有问题的地方欢迎留言！
