生活随笔
收集整理的這篇文章主要介紹了
HTML之淘宝界面案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
特殊符號
<<br/>
><br/>
&<br/>
®<br />
©<br />
™<br />
¥<br/>
∧<br/>
百度
京東
<br />
百度
 京東
<br />
百度
  京東
使用HTML和CSS編寫淘寶界面（案例）
代碼
注意里面的注釋
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>淘寶頁面
</title><style type="text/css">* {font-size: 14px;}#top {width: 1000px;height: 220px;margin: 0 auto;} #main {width: 1000px;height: 500px;margin: 0 auto;}#top1 a{color: black;text-decoration: none;}#top1 a:hover{text-decoration: underline;}#top3 a{color: black;text-decoration: none;}#top3 a:hover{text-decoration: underline;}#top1{height: 30px;border-radius: 5px;background-color: #888;text-indent: 2em;line-height: 30px;}#top2{height: 100px;margin-top: 10px;}#top3{height: 30px;border-radius: 5px;background-color: #888;text-indent: 2em;line-height: 30px;}#top4{height: 40px;border-radius: 5px;border: 1px solid gainsboro;line-height: 40px;text-indent: 2em;}#main table p{font-size: 12px;line-height: 5px; margin-bottom: 0; }#main table td{border: 1px solid gainsboro;padding:10px;border-radius: 5px;}</style></head><body><div id="top"><div id="top1"><div style="float: left;"><a href="#" style="color: red;">親，請登錄
</a> <a href="##">免費注冊
</a> <a href="###">手機逛淘寶
</a></div><div style="float: right;"><a href="#" style="color: red;">淘寶網首頁
</a> <a href="##">我的淘寶
</a> <a href="###">購物車
</a> <a href="#">收藏夾
</a> <a href="#">商品分類
</a><a href="#">賣家中心
</a href="#"> <a href="#">聯系客服
</a> <a href="#">網站導航
</a> </div> </div><div id="top2"><div style="float: left; margin-left: 10px;"> <img src="../img/logo.bmp"/></div><div style="float: left; margin-left: 100px;"><div style="margin-top: 20px;"><input type="text" name="search" style="width: 500px; height: 25px; border: 1px solid gray; outline: none; border-radius: 2px;"/><input type="submit" value="搜索"/></div><div>客廳燈 沖鋒衣 床墊 沙發墊 電腦桌 鞋柜
</div></div></div><div id="top3">您是不是想找：
<a href="#">客廳燈
</a> |
<a href="#">沖鋒衣
</a> |
<a href="#">床墊
</a> |
<a href="#">沙發墊
</a> |
<a href="#">電腦桌
</a> |
<a href="#">鞋柜
</a></div><div id="top4" style="margin-top: 3px;"><div style="float: left;">價格：
<input type="text" name="price1"/> -
<input type="text" name="price2"/></div><div style="float: right"><input type="checkbox" name="ck1" value="1" />包郵
<input type="checkbox" name="ck1" value="2" />消協
<input type="checkbox" name="ck1" value="3" />品質
</div></div></div><div id="main"><table width="100%"><tr align="center"><td><img src="../img/002.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td><td><img src="../img/003.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td><td><img src="../img/004.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td><td><img src="../img/005.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td><td><img src="../img/006.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td></tr><tr align="center"><td><img src="../img/007.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td><td><img src="../img/008.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td><td><img src="../img/009.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td><td><img src="../img/010.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td><td><img src="../img/011.png" width="150px"/><br/><p style="color: orange;">¥ 40 包郵
</p><p>世界上最好的商品
</p><p style="color: gray;">浪色服飾專營店
</p><p style="color: gray;" align="right">如實描述4.8
</p></td></tr> </table></div></body>
</html>
總結
以上是生活随笔為你收集整理的HTML之淘宝界面案例的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
