淘寶網的簡單版html+css
阿新 • • 發佈：2019-01-05
話不多說，直接上程式碼
<!-- 作者：李主龍 時間：2018-06-25 描述：淘寶網布局 聯絡方式：[email protected] --> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="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="img/u1.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="img/d160.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="img/market.jpg" width="440px" height="240px"></div> <div> <img src="img/1.png" width="130px"/><span><img src="img/2.jpg" width="130px"</span><img src="img/3.jpg" /><span><img src="img/4.jpg"></span> </div> </div> <div class="login"> <div style="text-align: center;"> <div><img src="img/ren.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="img/aaaa.png" /> </div> </div> </div> </body> </html>
還有css程式碼
http://19761454ox.iask.in:26746/可以看效果.tb{ background-color: bisque; padding: 5px 0px 5px 70px; height: 20px; border:2px solid bisque; } .top_left{ float: left; width: auto; height: 20px; line-height: 20px; font-size: 12px; } .top_right{ float: right; width: auto; height: 20px; line-height: 20px; margin-right: 20px; } *{ padding: 0px; margin: 0px; } .top_right ul li{ text-decoration: none; list-style: none; width: 80px; float:left; font-size: 12px; } .tblogo{ float: left; width: 300px; height: 200px; border:1px solid azure; } .serch{ float: left; width: 500px; height: 200px; border:1px solid azure; padding: 50px; padding-top:70px; padding-right:0px; } .serch ul li{ float: left; width:40px; height:20px; text-align: center; line-height: 20px; list-style:none; } .descode{ float: right; width: 190px; height: 200px; border:1px solid azure; padding-top: 50px; text-align: center; } .spliter{ background-color: orange; color:azure; width: auto; height: 20px; } .space{ float: left; width: 20px; height: 200px; border:1px solid azure; } .list_shop{ padding-top:20px; float: left; width: 180px; height: 480px; border:1px solid red; text-align: center; } .list_shop ul li{ list-style:none; height:40px; } .list_img{ float: left; width: 540px; height: 480px; border:1px solid azure; padding-top:10px; text-align: center; } .login{ float: right; width: 256px; height: 480px; border:1px solid azure; padding-top:16px; } .login div ul li{ float: left; width: 84px; height:20px; line-height:20px; text-align: center; list-style:none; } #repoter{ padding:5px; } #repoter ul li{ list-style:none; float:left; width:48px; } #message{ padding:2px; } #message ul li{ list-style:none; color:red; width:auto; }