今天我們來看一下1號店的首頁html代碼。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>1號店-網上超市_網上購物商城_超市送菜</title> <link rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css"> </head> <body> <div id="header"> <a href="#"><img src="http://img.yihaodianimg.com/h5/public/2015/08/25/1827d3b1a04e361e8cbd4b4d05b7c589.png" alt="1號店"></a> <ul> <li><a href="#">我的訂單</a></li> <li><a href="#">我的1號店</a></li> <li><a href="#">手機客戶端</a></li> </ul> <div id="search"> <form action="#"> <input type="text" id="searchInput" placeholder="搜索商品名稱"> <input type="submit" id="searchSubmit" value="搜索"> </form> </div> </div> <div id="main"> <div id="carousel"> <img src="http://img30.360buyimg.com/popshop/jfs/t26964/355/764736469/74022/6c9da6d9/5bc67e6fNcd52467d.jpg" alt="carousel"> </div> <div id="category"> <ul> <li><a href="#"><img src="http://img.yihaodianimg.com/front-homepage/mobile/images/category-01.png"></a></li> <li><a href="#"><img src="http://img.yihaodianimg.com/front-homepage/mobile/images/category-02.png"></a></li> <li><a href="#"><img src="http://img.yihaodianimg.com/front-homepage/mobile/images/category-03.png"></a></li> <li><a href="#"><img src="http://img.yihaodianimg.com/front-homepage/mobile/images/category-04.png"></a></li> <li><a href="#"><img src="http://img.yihaodianimg.com/front-homepage/mobile/images/category-05.png"></a></li> <li><a href="#"><img src="http://img.yihaodianimg.com/front-homepage/mobile/images/category-06.png"></a></li> </ul> </div> </div> </body> </html>
在這個html代碼中，可以看到1號店的網站結構分為頭部(header)、主內容(main)和頁腳(footer)三部分。頭部包括一個logo和一個搜索框，還有個人中心和手機客戶端的鏈接。主內容分為兩部分，分別是輪播圖和分類列表。整個網站的代碼結構非常清晰，代碼也非常簡潔和易懂。這也是1號店能夠成為中國最大的網上超市之一的原因之一。
上一篇用css讓圖片居中
下一篇jquery id帶點