當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML之淘宝界面案例

發布時間：2023/12/8 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML之淘宝界面案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

特殊符號

<<br/>  ><br/>  &<br/>  ®<br />  ©<br />  ™<br />  ¥<br/>  &and;<br/>  百度    京東<br />  百度&emsp;京東<br />  百度&ensp;&ensp;京東

使用HTML和CSS編寫淘寶界面（案例）

代碼
注意里面的注釋

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>淘寶頁面</title><style type="text/css">/*全局選擇器，控制字體大小統一，方便排版*/* {font-size: 14px;}/*控制main和top的顏色及尺寸，方便調節，后面可以再將背景色去掉*/#top {width: 1000px;height: 220px;/* background-color: #87CEEB; */margin: 0 auto;/*上下外邊距為0，左右自動對齊（居中）*/} #main {width: 1000px;height: 500px;/* background-color: #DEB887; */margin: 0 auto;}/*a標簽標示了超鏈接，這里采用鼠標Hover顯示下劃線的效果*/#top1 a{color: black;/*字體顏色黑色，由于文字都用a標簽包裹，這里只能通過a標簽精準調節，注意優先級*/text-decoration: none;/*下劃線去掉*/}#top1 a:hover{text-decoration: underline;/*鼠標放上去顯示下劃線*/}/*top1的a與top3的a不同這里分別處理*/#top3 a{color: black;/*字體顏色黑色，由于文字都用a標簽包裹，這里只能通過a標簽精準調節，注意優先級*/text-decoration: none;/*下劃線去掉*/}#top3 a:hover{text-decoration: underline;/*鼠標放上去顯示下劃線*/}/*分配top1、top2和top3全局*/#top1{height: 30px;border-radius: 5px;background-color: #888;text-indent: 2em;/*文字縮進2字符*/line-height: 30px;/*背景框高度是30px，所以這里也是寫30，保證居中*/}#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; /*控制行間距，也可以直接控制p標簽的margin*/margin-bottom: 0; /*p標簽自帶的有外邊距，這里需要將底部的margin去除，將外框和該標簽底部的間距消除*/}#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;">&yen 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;">&yen 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;">&yen 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;">&yen 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;">&yen 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;">&yen 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;">&yen 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;">&yen 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;">&yen 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;">&yen 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之淘宝界面案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JAVA 淘宝扫码登陆以及下单流程
下一篇： HTML淘宝购物车页面的实现