话不多说，直接上代码
<!--
作者：李主龙
时间：2018-06-25
描述：淘宝网布局
联系方式：[email protected]
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/taobao.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tb">
<div class="top_left"><span style="color: orange;">亲，请登录 </span>免费注册 手机逛淘宝</div>
<div class="top_right">
<ul>
<li>我的淘宝</li>
<li>购物车</li>
<li>收藏夹</li>
<li>商品分类</li>
<li>卖家中心</li>
<li>网站导航</li>
</ul>
</div>
</div>
<!--
以上是淘宝网顶部布局
下面部分将介绍第二部分布局：淘宝logo、搜索栏、手机淘宝二维码
-->
<div>
<div class="tblogo"><img src="img/u1.bmp" width="280px" height="180px"/></div>
<!--
淘宝logo
-->
<div class="serch">
<div style="padding:0px;margin: 0px;">
<ul>
<li style="background-color: red;color: azure;">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
</div>
<div style="border:1px solid azure;width: 10px;height: 10px;"></div>
<div style="margin-top:0px;">
<input type="text" style="border: 2px solid red;width: 380px;height: 30px;"/><span><button type="button" style="border:1px solid red;width: 60px;height: 30px;text-align: center;font-size:14px;background: red;color: azure;">搜索</button></span>
</div>
<div>
<ul>
<li>耳机</li>
<li>短裤</li>
<li>鼠标</li>
<li>体恤</li>
<li>电脑</li>
<li>玩具</li>
<li>大米</li>
<li>水果</li>
<li>男鞋</li>
</ul>
</div>
</div>
<!--
搜索栏
-->
<div class="descode">
<div>手机淘宝</div>
<div><img src="img/d160.png" width="80px" height="80px"/></div>
</div>
</div>
<!--
下面是淘宝网第三部分的布局,分割条spliter
-->
<div>
<div class="spliter"><span style="width: 180px;height: 20px;line-height: 20px;padding: 5px;text-align: center;background-color: red;margin-left: 20px;">主题市场</span><span style="padding:5px;padding-left: 20px;height: 20px;line-height: 20px;">天猫 聚划算 天猫超市 | 淘抢购 电器城 司法拍卖 中国质造 兴农扶贫</span></div>
</div>
<!--
下面是淘宝网第四部分的布局
-->
<div>
<div class="space"></div>
<!--
下面是商品列表布局
-->
<div class="list_shop">
<ul>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
<li>男装 / 女装 / 内衣 ></li>
</ul>
</div>
<!--
下面是商品图片布局
-->
<div class="list_img">
<div><img src="img/market.jpg" width="440px" height="240px"></div>
<div>
<img src="img/1.png" width="130px"/><span><img src="img/2.jpg" width="130px"</span><img src="img/3.jpg" /><span><img src="img/4.jpg"></span>
</div>
</div>
<div class="login">
<div style="text-align: center;">
<div><img src="img/ren.jpg"></div>
<div style="font-size:12px;height:20px;line-height:20px;">Hi! 你好</div>
<div style="font-size: 14px;color: red;height:20px;line-height:20px;">领淘金币抵钱 会员俱乐部</div>
</div>
<!--
下面是三个按钮登录、注册、开店
-->
<div style="width:auto;">
<ul>
<li><button type="button" style="border:1px solid red;background-color:red;color:azure;width:80px;">登录</button></li>
<li><button type="button" style="border:1px solid red;background-color:red;color:azure;width:80px;">注册</button></li>
<li><button type="button" style="border:1px solid red;background-color:red;color:azure;width:80px;">开店</button></li>
</ul>
</div>
<!--
网络信息安全矩形条
-->
<div style="text-align:center;margin-top:16px;border:1px solid azure;background-color:cornsilk;width:254px;height:20px;color:red;line-height:20px;font-size:14px;">网上有害信息举报专区</div>
<!--
新闻公告如下
-->
<div>
<div id="repoter">
<ul>
<li>公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
<div style="border:1px solid azure;width:2px;height:2px;"></div>
<!--
新闻、公告
-->
<div id="message">
<ul>
<li>阿里教育脱贫 助寒门学子公平就业 </li>
<li style="color:black;">盘点世界杯带火的职业</li>
</ul>
</div>
</div>
<div style="border:1px solid azure;width:2px;height:2px;"></div>
<!--
淘宝应用
-->
<div style="text-align: center;padding-top:10px;">
<img src="img/aaaa.png" />
</div>
</div>
</div>
</body>
</html>
还有css代码
.tb{
background-color: bisque;
padding: 5px 0px 5px 70px;
height: 20px;
border:2px solid bisque;
}
.top_left{
float: left;
width: auto;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.top_right{
float: right;
width: auto;
height: 20px;
line-height: 20px;
margin-right: 20px;
}
*{
padding: 0px;
margin: 0px;
}
.top_right ul li{
text-decoration: none;
list-style: none;
width: 80px;
float:left;
font-size: 12px;
}
.tblogo{
float: left;
width: 300px;
height: 200px;
border:1px solid azure;
}
.serch{
float: left;
width: 500px;
height: 200px;
border:1px solid azure;
padding: 50px;
padding-top:70px;
padding-right:0px;
}
.serch ul li{
float: left;
width:40px;
height:20px;
text-align: center;
line-height: 20px;
list-style:none;
}
.descode{
float: right;
width: 190px;
height: 200px;
border:1px solid azure;
padding-top: 50px;
text-align: center;
}
.spliter{
background-color: orange;
color:azure;
width: auto;
height: 20px;
}
.space{
float: left;
width: 20px;
height: 200px;
border:1px solid azure;
}
.list_shop{
padding-top:20px;
float: left;
width: 180px;
height: 480px;
border:1px solid red;
text-align: center;
}
.list_shop ul li{
list-style:none;
height:40px;
}
.list_img{
float: left;
width: 540px;
height: 480px;
border:1px solid azure;
padding-top:10px;
text-align: center;
}
.login{
float: right;
width: 256px;
height: 480px;
border:1px solid azure;
padding-top:16px;
}
.login div ul li{
float: left;
width: 84px;
height:20px;
line-height:20px;
text-align: center;
list-style:none;
}
#repoter{
padding:5px;
}
#repoter ul li{
list-style:none;
float:left;
width:48px;
}
#message{
padding:2px;
}
#message ul li{
list-style:none;
color:red;
width:auto;
}