<!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;
}