生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS简单应用实例——购物网站的制作（一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML+CSS簡單應用實例——購物網站的制作（一）
這是一個用CSS、HTML、JS制作的簡單的購物網站，這篇文章是主頁，在后面文章中依次有登錄頁、商品頁、客服頁面等。有很多不足之處，希望大家能給我指出來。
先看一下效果圖。
（所有圖片都是從淘寶、京東、唯品會搜的）
分析：最上方是DIV+列表，注冊可以點進去進入注冊頁面。下面服飾區、美妝區部分是列表，其中又嵌套了列表。今日推薦部分是一個大表格，導航欄部分是一個小表格，位置設為固定。最下方是一個腳本，用DIV做成。
下面是具體代碼：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>淘淘網--讓購物更簡單</title> <style>.topBar{height: 40px; font-size: 15px; color:#666;line-height: 35px;background-color:white;} .topBar-left{float: left;list-style: none;} .topBar-right{float: right; list-style: none;} .topBar-left li,.topBar-right li{margin: 0 2px;float:left;text-align: center;} .topBar-left li a:hover,.topBar-right li:hover {color:rgb(236, 77, 14);} .logoBar{height:100px;width: 100%;left: 0px; background-color:white } .search_box{ width: 447px;padding-top: 33px;padding-left: 160px; } .search_text{background-color: white; width:360px;height: 35px;padding:0 8px;position:absolute;top:70px;left:450px; } .search_btn{ width: 70px;height: 39px;position:absolute;top:70px;left:835px;font-size:14px;background-color:violet;font-family: "微軟雅黑";color: white;}.navBox{height: 35px;font-size: 20px;color:blueviolet;} .main{list-style: none;} .main li{margin: 0 80px;float:left;text-align: left;} .main li a{padding:0 5px; display: block;height: 35px;} .main li a:visited,.main li a:link {color:#DC143C;text-decoration: none;}.main li ul{padding:0 0;margin: 0 0;cursor: pointer;display:none;list-style: none;}.main li ul li{text-align: left;line-height: 25px;float:none;} .main li:hover ul{display:block;position:absolute;}.main li ul li:hover{color:#DC143C;background:azure;} .footer{ width:1100px;margin:0 auto;border-top:#dddddd 1px solid;margin-top:150px; height: 210px; background: rgb(245,245,245);text-align: center;}.footer p{ margin-top:20px;}.footer a{color:#666;}.footer a:hover{ color:rgb(228, 121, 89);}.footer .fp{color:#666;margin-top:10px;}.footimg{width="120px";height: "10px";}.list{position: fixed;top: 250px;left: 1380px;font-family: "微軟雅黑";font-size: 20px;color:white;}.list a {text-decoration: none;color:white;}</style> </head><body bgcolor="plum" ><div class="headerBar"><div class="topBar"><ul class="topBar-left">
<a name="Top"></a> <li>歡迎來到淘淘網！</li></ul><ul class="topBar-right"><li >購物車</li><li >收藏夾</li><li><a href="#">登陸</a></li><li><a href="register.html" target="_blank">注冊</a></li></ul></div> <div class="logoBar"><div class="search_box"><input type="text" class="search_text" ><input type="button" value="搜 索" class="search_btn"> </div></div></div> <div class="navBox"><div class="Main"><ul class="main"><li><a class="main1" href="#" > 服飾區</a> <ul > <li href="#" >女裝</li><li href="#">男裝</li><li href="#">女鞋</li><li href="#">男鞋</li><li href="#">衛衣</li><li href="#">外套</li> </ul></li> <li><a class="main2" href="#"> 美妝區</a><ul> <li href="#">面膜</li><li href="#">香水</li><li href="#">口紅</li><li href="#">潔面</li><li href="#">精華</li><li href="#">美甲</li> </ul></li> <li><a class="main3" href="#"> 飾品區</a><ul> <li href="#">項鏈</li><li href="#">耳飾</li><li href="#">帽子</li><li href="#">手表</li><li href="#">珠寶</li><li href="#">眼鏡</li> </ul></li> <li><a class="main4" href="#"> 生活區</a><ul> <li href="#">沙發</li><li href="#">燈具</li><li href="#">櫥柜</li><li href="#">藥品</li><li href="#">烤箱</li><li href="#">空調</li> </ul></li><li><a class="main5" href="#"> 食品區</a><ul> <li href="#">餅干</li><li href="#">米線</li><li href="#">月餅</li><li href="#">酸奶</li><li href="#">名酒</li><li href="#">咖啡</li> </ul></li> </ul></div><table cellspacing="2" align="center"><tr><td><a href="wdress.html" target="_blank"><img src="img/大牌特賣.jpg" width="400" height="300"></a></td><td><video width="500" height="300" src="img/女裝視頻.mp4" autoplay="autoplay" loop="loop"></video></td><td><img src="img/一站購.png" width="400" height="300" ></td> </tr> </table><table class="list" border="1" bgcolor="violet" bordercolor="white"cellpadding="5"><tr><td><a href="wdress.html" target="_blank">熱門女裝>></a></td></tr><tr><td><a href="time.html" target="_blank">限時搶購>></a></td></tr><tr><td><a href="shopping.html" target="_blank">淘淘超市>></a></td></tr><tr><td><a href="wdress.html" target="_blank">今日特賣>></a></td></tr><tr><td><a href="service.html" target="_blank">聯系客服>></a></td></tr><tr><td><a href="#Top">回到頂部>></a></td></tr></table><p align="center" style="font-family: 宋體;font-size: 30px;color: black;"><b>-今日推薦-</b></p><table border="1" bordercolor="crimson" cellspacing="10" align="center"><tr><td rowspan="2"><a href="wdress.html" target="_blank"><img src="img/衛衣.jpg" width="300px" height="600px"></a></td><td rowspan="2" colspan="2"><a href="wdress.html" target="_blank"><img src="img/wph6.jpg" width="600px" height="600px"></a></td><td><a href="wdress.html" target="_blank"><img src="img/妖精1.jpg" width="300px" height="300px"></a></td> </tr><tr><td><img src="img/妖精2.jpg" width="300px" height="300px"></td> </tr><tr><td><img src="img/妖精3.jpg" width="300px" height="300px"></td> <td><img src="img/褲子.jpg" width="300px" height="300px"></td><td><img src="img/包.jpg" width="300px" height="300px"></td><td><img src="img/夏連衣裙.jpg" width="300px" height="300px"></td> </tr><tr><td><img src="img/口紅1.jpg" width="300px" height="300px"></td> <td><img src="img/鞋3.jpg" width="300px" height="300px"></td><td><img src="img/手機.jpg" width="300px" height="300px"></td><td><img src="img/鞋1.jpg" width="300px" height="300px"></td> </tr><tr><td><img src="img/手表.jpg" width="300px" height="300px"></td> <td><img src="img/鞋2.jpg" width="300px" height="300px"></td><td><img src="img/口紅2.jpg" width="300px" height="300px"></td><td><img src="img/帽子.jpg" width="300px" height="300px"></td> </tr></table> <div class="footer"><p><a href="#">聯系我們</a> | <a href="#">誠聘英才</a> | <a href="#">合作招商</a> | <a href="#">廣告平臺</a></p><p class="fp">本網站直接或間接向消費者推銷商品或者服務的商業宣傳均屬于“廣告”（包裝及參數、售后保障等商品信息除外）</p><div class="footimg"><img src="img/冠名商標2.jpg" width="70px";height="60px";><img src="img/冠名商標.jpg" width="60px";height="40px"><img src="img/商標.jpg" width="70px";height="60px"><img src="img/商標2.jpg" width="60px";height="30px"></div></div></body>
</html>
總結
以上是生活随笔為你收集整理的HTML+CSS简单应用实例——购物网站的制作（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
