效果圖
![在這裏插入圖片描述]()
HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘寶界面</title>
<link href="./js/text.css" rel="stylesheet" type="text/css">/* 注意這個外部鏈接引入css的名字與自己的相同*/
</head>
<body>
<div id="top">
<div id="top1">
<div style="float: right;">
<a href="#" style="color: red;">登錄</a>
<a href="#">免費註冊</a>
</div>
<div style="left: ;">
<a href="#" style="red">淘寶網首頁</a>
<a href="#">我的淘寶</a>
<a href="#">購物車</a>
<a href="#">收藏夾</a>
<a href="#">商品分類</a>
<a href="#">賣家中心</a>
<a href="#">聯繫客服</a>
<a href="#">網站導航</a>
</div>
</div>
<div id="top2">
<!--分爲兩個div，都向左浮動，搜索框部分注意調整左外邊距與頂外邊距的距離 -->
<div style="float: left; margin-left: 10px;">
<img width="200"height="200" src="taobao.jpg" /></div>
<div style="float: left; margin-left: 100px;"></div>
<!--搜索框和搜索框下面的文字拆分爲連個標籤部分，由於統一居中，所以搜索框需要進行重定位-->
<div style="margin-top: 20px; text-align: center;">
<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 id="top3">
您是不是想找：<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=java&oq=java%25E7%259A%2584%25E4%25B9%25A6%25E7%259A%2584%25E5%259B%25BE%25E7%2589%2587&rsv_pq=91586ea8000f388d&rsv_t=1b27dyIUD80Mv6idKg%2BqvN7elbq2D23P9ogQs5niN22j7%2Bvpr8JztTe8eXY&rqlang=cn&rsv_enter=0&rsv_dl=tb&inputT=1020&rsv_sug3=25&rsv_sug1=4&rsv_sug7=000&prefixsug=java&rsp=0&rsv_sug4=1868&rsv_sug=1">Java</a> | <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=Python&oq=java&rsv_pq=fedb592000108aa3&rsv_t=82f9psouOGQRARKhvwxlDNY7LP4sl1qUgHYqPWuLbX2TZIanmdw%2FBAb2akc&rqlang=cn&rsv_enter=0&rsv_dl=tb&inputT=5685&rsv_sug3=31&rsv_sug1=7&rsv_sug7=100&prefixsug=Python&rsp=0&rsv_sug4=5685">Python</a> | <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=C%2B%2B&oq=Python&rsv_pq=c26c05fa000fc243&rsv_t=0071gts0XNYLSoFMrY8Pn4yTjMcQ4UZNvT5t4doLAnGnj%2FuEzlwqMJK8XEg&rqlang=cn&rsv_enter=0&rsv_dl=tb&inputT=8777&rsv_sug3=34&rsv_sug1=9&rsv_sug7=100&rsv_sug4=8777">C++</a> | <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=javascript&oq=html&rsv_pq=90f52314000a4fe1&rsv_t=ea6fWneLZaouNhRkKrqhhmSbg3ItqJdeHjeO9mrZy2AQDmo0TsFp%2BgFcFLA&rqlang=cn&rsv_enter=0&rsv_dl=ts_2&inputT=4066&rsv_sug3=42&rsv_sug1=13&rsv_sug7=100&rsv_sug2=0&prefixsug=Java&rsp=2&rsv_sug4=4066&rsv_sug=2">JavaScript</a> | <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=html&oq=%2526lt%253B%252B%252B&rsv_pq=902c22b9000c0d60&rsv_t=84dcsxDVv4IX4yp7OcEVpKLJGoj8u0xDUAH79S3ub11Kqh6ZOFEMGblcDeE&rqlang=cn&rsv_enter=0&rsv_dl=tb&inputT=8453&rsv_sug3=38&rsv_sug1=11&rsv_sug7=100&rsv_sug4=8453&rsv_sug=1">html</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>
<a href="https://s.taobao.com/search?q=java%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&spm=a21bo.2017.201856-taobao-item.1&ie=utf8&initiative_id=tbindexz_20170306">
<img src="./img/java.jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 75.6 包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.9</p>
</td>
<td>
<a href="https://s.taobao.com/search?ie=utf8&initiative_id=staobaoz_20200331&stats_click=search_radio_all%3A1&js=1&imgfile=&q=spring%E6%8F%AD%E7%A7%98+%E7%8E%8B%E7%A6%8F%E5%BC%BA&suggest=0_1&_input_charset=utf-8&wq=Spring%E6%8F%AD%E7%A7%98&suggest_query=Spring%E6%8F%AD%E7%A7%98&source=suggest">
<img src="./img/Spring.jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 268.5 包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.8</p>
</td>
<td>
<a href="https://s.taobao.com/search?q=Python%E7%BC%96%E7%A8%8B&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20200331&ie=utf8">
<img src="./img/download%20(1).jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 69.8 包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">>圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.8</p>
</td>
<td>
<a href="https://s.taobao.com/search?q=python%E6%B8%B8%E6%88%8F%E7%BC%96%E7%A8%8B%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20200331&ie=utf8">
<img src="download2.jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 53.21包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">>圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.8</p>
</td>
<td>
<a href="https://s.taobao.com/search?q=%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E6%8A%80%E6%9C%AF%E4%B8%8EC%2B%2B%E8%AF%AD%E8%A8%80%E7%AE%80%E6%98%8E%E6%95%99%E7%A8%8B&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20200331&ie=utf8">
<img src="img/C++1.jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 7.65包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">>圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.8</p>
</td>
</tr>
<tr align="center">
<td>
<a href="https://s.taobao.com/search?q=C%2B%2B%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20200331&ie=utf8">
<img src="img/C++2.jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 73.3 包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">>圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.8</p>
</td>
<td>
<a href="https://s.taobao.com/search?q=JavaScript%E7%8A%80%E7%89%9B&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20200331&ie=utf8">
<img src="img/Js1.jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 84.9包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">>圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.8</p>
</td>
<td> <a href="https://s.taobao.com/search?q=JavaScriptES6%E5%87%BD%E6%95%B0&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20200331&ie=utf8">
<img src="img/js2.jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 31.8 包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">>圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.8</p>
</td>
<td> <a href="https://s.taobao.com/search?q=HtmL5%2BCss3+Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20200331&ie=utf8">
<img src="img/HTML.jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 42.35 包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">>圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.8</p>
</td>
<td> <a href="https://item.taobao.com/item.htm?spm=a230r.1.14.83.61dc51313f9b7k&id=613939505977&ns=1&abbucket=16#detail">
<img src="img/HTML2.jpg" width="150px" /></a><br />
<!--¥表示人民幣-->
<p style="color: orange;">¥ 82包郵</p>
<p>世界上最好的商品</p>
<p style="color: gray;">>圖書專賣店</p>
<p style="color: gray;" align="right">如實描述4.8</p>
</td>
</tr>
</body>
</html>
CSS代碼
/*全局選擇器，控制字體大小統一 */
* {
font-size: 14px;
}
#top {
width: 1000px;
height: 220px;
margin: 0 auto;
}
#main {
width: 1000px;
height: 500px;
margin: 0 auto;
}
/* a標籤顯示了超鏈接，這裏採用鼠標hover顯示下劃線的效果*/
#top1 a {
color: black;
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: red;
text-indent: 2em;
/*文字縮進2字符*/
line-height: 30px;
/*背景框高度是30px，所以這裏也是寫30，保證居中*/
}
#top2 {
height: 100px;
margin-top: 10px;
}
#top3 {
height: 30px;
border-radius: 5px;;
background-color: red;
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;
}
