<!--
作者：李主龍
時間：2018-06-25
描述：淘寶網布局
聯系方式：[email protected]
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://bbs.csdn.net/topics/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="https://img.uj5u.com/2020/10/03/148251032233331.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="https://img.uj5u.com/2020/10/03/148251032233332.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="https://img.uj5u.com/2020/10/03/148251032233333.jpg" width="440px" height="240px"></div>
<div>
<img src="https://img.uj5u.com/2020/10/03/148251032233334.png" width="130px"/><span><img src="https://img.uj5u.com/2020/10/03/148251032233335.jpg" width="130px"</span><img src="https://img.uj5u.com/2020/10/03/148251032233336.jpg" /><span><img src="https://img.uj5u.com/2020/10/03/148251032233337.jpg"></span>
</div>
</div>
<div class="login">
<div style="text-align: center;">
<div><img src="https://img.uj5u.com/2020/10/03/148251032233338.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="https://img.uj5u.com/2020/10/03/148251032233339.png" />
</div>
</div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/152722.html
標籤：HTML(CSS)
上一篇：求問關于HTML里插入視頻的問題