<!--
作者：李主龙
时间：2018-06-25
描述：淘宝网布局
联系方式：583161408@qq.com
-->
<!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>
7天退货 
品质承诺 
破损补寄 
急速物流 
7天无理由
运费险
公益宝贝
蚂蚁花呗
信用卡支付
集分宝
累计评论
100%好评
共有0人参与评分评价宝贝