品優購項目（HTML\CSS）

項目效果可訪問?http://zhousunyu.3vdo.club??查看

主頁

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品優購</title><!-- 引入初始化樣式文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共的樣式文件 -->
<link rel="stylesheet" href="css/common.css">
<!-- main板塊的樣式文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 設置icon標簽欄的網頁圖標 -->
<link rel="shortcut icon" href="favicon.ico"></head>
<body><!-- 快捷導航模塊 --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品優購歡迎您！&nbsp; </li><li><a href="login.html">請登錄&nbsp</a><a href="register.html" class="style_red">免費注冊</a></li></ul></div><div class="fr"><ul><li>我的訂單</li><li></li><li class="mypin">我的品優購</li><li></li><li>品優購會員</li><li></li><li>企業采購</li><li></li><li class="focuspin">關注品優購</li><li></li><li class="clientcare">客戶服務</li><li></li><li class="naviationofwebsite">網站導航</li></ul></div></div></div><!-- 快捷導航模塊end --><!-- header 模塊start --><header class="header w"><!-- logo 模塊 --><div class="logo"><h1><a href="index.html" title="品優購商城">品優購商城</a></h1></div><!-- 搜索模塊 --><div class="search"><input type="search" placeholder="請輸入搜索關鍵詞,例如：語言開發"><button>搜索</button></div><!-- hotwords 熱點詞制作 --><div class="hotwords"><a href="#" class="style_red">品優購首發</a><a href="#">億元優惠</a><a href="#">9.9元團購</a><a href="#">每滿99減30</a><a href="#">百億補貼</a><a href="#">電腦</a><a href="#">辦公用品</a></div><!-- 購物車 shopcar模塊 --><div class="shopcar"><i class="count">8</i>我的購物車</div></header><!-- heaader 模塊 end--><!-- nav 模塊的制作 start --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分類</div><div class="dd"><ul><li><a href="#">家用電器</a></li><li><a href="list.html">手機</a> <a href="#">數碼</a> <a href="#">通訊</a></li><li><a href="#">電腦</a> <a href="#">辦公</a> </li><li><a href="#">家居</a> <a href="#">家具</a> <a href="#">家裝</a> <a href="#">廚具</a></li><li><a href="#">童裝</a> <a href="#">男裝</a> <a href="#">女裝</a> <a href="#">內衣</a></li><li><a href="#">個戶化妝</a> <a href="#">清潔用品</a> <a href="#">寵物</a></li><li><a href="#">鞋靴</a> <a href="#">珠寶</a> <a href="#">奢侈品</a> <a href="#">珠寶</a></li><li><a href="#">運動戶外</a> <a href="#">鐘表</a></li><li><a href="#">汽車</a> <a href="#">汽車用品</a></li><li><a href="#">母嬰</a> <a href="#">玩具樂器</a></li><li><a href="#">食品</a> <a href="#">酒水</a></li><li><a href="#">醫藥</a> <a href="#">保健</a></li><li><a href="#">圖書影像</a> <a href="#">電子書</a></li><li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票務</a></li><li><a href="#">理財</a> <a href="#">眾籌</a> <a href="#">白條</a> <a href="#">保險</a></li></ul></div></div><div class="navitems"><ul><li><a href="#">服裝城</a></li><li><a href="#">美妝館</a></li><li><a href="#">國家補貼</a></li><li><a href="#">早八好價</a></li><li><a href="#">Zavier法拍</a></li><li><a href="#">企業購 | 團購</a></li><li><a href="#">全球行</a></li><li><a href="#">排行榜</a></li></ul></div></div></nav><!-- nav 模塊的制作 end --><!-- main模塊的制作 start -->
<div class="w"><div class="main"><div class="focus"><!-- 注意： 結構不能直接插入圖片必須添加li  具體操作看前面寫的淘寶輪播圖完善--><ul><li><img src="upload/focus1.png" alt=""></img></li></ul></div><div class="newsflash"><div class="news"><div class="hd"><h5>品優購快報</h5><div class="gengduo"><a href="#">更多</a></div></div><div class="bd"><ul><li><a href="#"><strong>[特惠]</strong> 備戰開學季 全民半價購數碼產品</a></li><li><a href="#"><strong>[特惠]</strong> 品優網占家電網購份額六成</a></li><li><a href="#"><strong>[特惠]</strong> 百元端午全品類禮券限時領取 先到先得</a></li><li><a href="#"><strong>[特惠]</strong> 心動購物季 家裝煥新日 全品類商品八折起</a></li><li><a href="#"><strong>[特惠]</strong> 國補×百億補貼，價格大作戰遇上清涼節</a></li></ul></div></div><div class="lifeservice"><ul><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li><li><i></i><br>話費</li></ul></div><div class="bargain"><img src="upload/bargain.png" alt=""></img></div></div></div>
</div>
<!-- main模塊的制作 end --><!-- 推薦模塊制作 start -->
<div class="w recom"><div class="recom_hd"><img src="images/recom.png" alt="今日推薦"></div><div class="recom_bd"><ul><li><img src="upload/recom_03.jpg"></li><li><img src="upload/recom_03.jpg"></li><li><img src="upload/recom_03.jpg"></li><li><img src="upload/recom_03.jpg"></li></ul></div>
</div> 
<!-- 推薦模塊制作 end --><!-- 樓層區域制作  start -->
<div class="floor"><!-- 一樓家電模塊制作  start --><div class="jiadian w"><div class="firstfloor_hd"><h3>家用電器</h3><!-- 注意，下邊的這個名字不可以隨意進行更改 --><div class="tab_list"><ul><li><a href="#" class="tab_list_hot">熱門</a> | </li><li><a href="#">大家電</a> | </li><li><a href="#">生活電器</a> | </li><li><a href="#">廚房電器</a> | </li><li><a href="#">個護健康</a> | </li><li><a href="#">應急電器</a> | </li><li><a href="#">空氣/凈水</a> | </li><li><a href="#">高端電器</a> | </li><li><a href="#">私人定制</a></li></ul></div></div><div class="firstfloor_bd"><!-- 先放一個 后面學JS再補 --><div class="tab_content"><div class="tab_list_tiem"><div class="col_210"><ul><li><a href="#">節能補貼</a></li></ul><ul><li><a href="#">節能補貼</a></li></ul><ul><li><a href="#">節能補貼</a></li>   </ul><ul><li><a href="#">節能補貼</a></li> </ul><ul><li><a href="#">節能補貼</a></li>           </ul><ul><li><a href="#">節能補貼</a></li>               </ul><a href="#"><img src="upload/floor-1-1.png"></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="b"><img src="upload/floor-1-2.png" alt=""></a><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div></div><!-- 樓層區域制作  end --><!-- 底部模塊制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li class="zhengpin"><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供發票</p></div></li><li class="wuliu"><h5></h5><div class="service_txt"><h4>極速物流</h4><p>極速物流，極速送達</p></div></li><li class="shouhou"><h5></h5><div class="service_txt"><h4>無憂售后</h4><p>七天無理由退貨</p></div></li><li class="service"><h5></h5><div class="service_txt"><h4>特色服務</h4><p>私人訂制個性化套餐</p></div></li><li  class="help"><h5></h5><div class="service_txt"><h4>幫助中心</h4><p>您的購物指南</p></div></li></ul></div><div class="mod_help"><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行 | 團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>配送方式</dt><dd><a href="#">上門自提</a></dd><dd><a href="#">211限時達</a></dd><dd><a href="#">配送服務查詢</a></dd><dd><a href="#">配送費收取標準</a></dd><dd><a href="#">海外配送</a></dd></dl><dl><dt>支付方式</dt><dd><a href="#">貨到付款</a></dd><dd><a href="#">在線支付</a></dd><dd><a href="#">分期付款</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">郵局匯款</a></dd><dd><a href="#">公司轉賬</a></dd></dl><dl><dt>售后服務</dt><dd><a href="#">售后政策</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">價格保護</a></dd><dd><a href="#">退款說明</a></dd><dd><a href="#">返修/退換貨</a></dd><dd><a href="#">取消訂單</a></dd></dl><dl><dt>特色服務</dt><dd><a href="#">奪寶島</a></dd><dd><a href="#">DIY裝機</a></dd><dd><a href="#">延保服務</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">品優購E卡</a></dd><dd><a href="#">品優購通信</a></dd></dl><dl><dt>幫助中心</dt><dd> <img src="images/wx_cz.jpg" alt="">品優購客戶端</dd></dl></div><div class="mod_copyright"><div class="copyright_top"><a href="#">關于我們</a> | <a href="#">聯系我們</a> | <a href="#">聯系客服</a> | <a href="#">商家入駐</a> | <a href="#">營銷中心</a> | <a href="#">手機品優購</a> | <a href="#">友情鏈接</a> | <a href="#">銷售聯盟</a> | <a href="#">品優購社區</a> | <a href="#">品優購公益</a> | <a href="#">English Site</a> | <a href="#">Contact U</a></div><div class="copyright_bottom">地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn<br>京ICP備08001421號京公網安備110108007702</div></div></div></footer><!-- 底部模塊制作 end --></body></html>

列表頁：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表頁-綜合網絡首選-正品低價、品質保證、配送及時、輕松購物！</title><meta name="keywords" content="正品低價、品質保證、配送及時、輕松購物、手機、筆記本、電腦、家居百貨"><meta name="description" content="品優購商城-專業的綜合網上購物商城，銷售家電、數碼通訊、電腦、家居百貨！"></meta><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入初始化樣式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共的樣式文件 --><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/list.css">
</head>
<style>.box {position: relative;width: 290px;height: 460px;border: 1px solid transparent;}.mobile img {width: 283px;height: 290px;}.trade_intro {width: 265px;height: 35px;margin: 7px 12px 10px 13px;}.trade_intro h5 {font-size: 14px;line-height: 17px;font-weight: 400;color: rgb(102, 102, 102);}.price {position: relative;width: 120px;height: 18px;/* border: 1px solid red; *//* background-color: pink; */margin: 0px 155px 6px 15px;padding: 0 10px;}.price h6 {position: absolute;top: -2px;left: -8px;display: block;float: left;font-size: 22px;line-height: 21px;font-weight: 700;color: red;}.price del {display: block;float: right;color: #a4a4a4;font-size: 14px;}.bar {float: left;width: 133px;height: 13px;border: 1px solid red;border-radius: 3px;padding: 1px;}.bar_in {width: 87%;height: 100%;background-color: red;}.good_progress h8 {display: block;float: left;width: 49px;height: 14px;font-family: SimSun;font-size: 14px;font-weight: normal;font-stretch: normal;line-height: 21px;letter-spacing: 0px;color: #666666;margin: 0 11px 13px 15px;}.good_progress .extra {float: left;display: block;margin: 0px 7px 13px 7px;width: 59px;height: 14px;font-family: SimSun;font-size: 14px;font-weight: normal;font-stretch: normal;line-height: 21px;letter-spacing: 0px;color: #666666;}.extra i {font-style: normal;color: red;}.buy_imi {position: absolute;right: 0;bottom: 0;width: 290px;height: 46px;background-color: #b1191a;}.buy_imi h3 {display: block;margin: 15px 105px 13px 105px;width: 80px;height: 19px;font-family: SimSun;font-size: 20px;font-weight: normal;font-stretch: normal;line-height: 19px;letter-spacing: 0px;color: #ffffff;/* padding: 18px 106 13px 105px; */}
</style>
<body><!-- 快捷導航模塊 --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品優購歡迎您！&nbsp; </li><li><a href="login.html">請登錄&nbsp</a><a href="register.html" class="style_red">免費注冊</a></li></ul></div><div class="fr"><ul><li>我的訂單</li><li></li><li class="mypin">我的品優購</li><li></li><li>品優購會員</li><li></li><li>企業采購</li><li></li><li class="focuspin">關注品優購</li><li></li><li class="clientcare">客戶服務</li><li></li><li class="naviationofwebsite">網站導航</li></ul></div></div></div><!-- 快捷導航模塊end --><!-- header 模塊start --><header class="header w"><!-- logo 模塊 --><div class="logo"><h1><a href="index.html" title="品優購商城">品優購商城</a></h1></div><!-- 列表頁的秒殺模塊 --><div class="sk"><img src="images/sk.png" alt="秒殺"></div><!-- 搜索模塊 --><div class="search"><input type="search" placeholder="請輸入搜索關鍵詞,例如：語言開發"><button>搜索</button></div><!-- hotwords 熱點詞制作 --><div class="hotwords"><a href="#" class="style_red">品優購首發</a><a href="#">億元優惠</a><a href="#">9.9元團購</a><a href="#">每滿99減30</a><a href="#">百億補貼</a><a href="#">電腦</a><a href="#">辦公用品</a></div><!-- 購物車 shopcar模塊 --><div class="shopcar"><i class="count">8</i>我的購物車</div></header><!-- heaader 模塊 end--><!-- nav 模塊的制作 start --><nav class="nav"><div class="w"><div class="sk_list"><ul><li><a href="#">品優購秒殺</a></li><li><a href="#">百億補貼</a></li><li><a href="#">超值低價</a></li></ul></div><div class="sk_con"><ul><li><a href="#">女裝</a> </li><li><a href="#" class="sk_con_secondli">女裝</a> </li><li><a href="#">女裝</a> </li><li><a href="#">女裝</a> </li><li><a href="#">女裝</a> </li><li><a href="#">女裝</a> </li><li><a href="#">女裝</a> </li><li><a href="#">女裝</a> </li><li><a href="#" class="sk_con_lastli">更多分類</a> </li></ul></div></div></nav><!-- nav 模塊的制作 end --><!-- 列表頁主體部分 start -->
<div class="w sk_container"><div class="sk_hd"><img src="upload//bg_03.png"></div><div class="sk_bd"><ul class="clearfix"><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手機"></div><div class="trade_intro"><h5>Apple蘋果Iphone6 pro（A2199）512G金色 移動聯通電信5G手機</h5></div><div class="price"><h6>￥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即搶購</h3></a></div></div>    </li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手機"></div><div class="trade_intro"><h5>Apple蘋果Iphone6 pro（A2199）512G金色 移動聯通電信5G手機</h5></div><div class="price"><h6>￥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即搶購</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手機"></div><div class="trade_intro"><h5>Apple蘋果Iphone6 pro（A2199）512G金色 移動聯通電信5G手機</h5></div><div class="price"><h6>￥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即搶購</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手機"></div><div class="trade_intro"><h5>Apple蘋果Iphone6 pro（A2199）512G金色 移動聯通電信5G手機</h5></div><div class="price"><h6>￥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即搶購</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手機"></div><div class="trade_intro"><h5>Apple蘋果Iphone6 pro（A2199）512G金色 移動聯通電信5G手機</h5></div><div class="price"><h6>￥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即搶購</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手機"></div><div class="trade_intro"><h5>Apple蘋果Iphone6 pro（A2199）512G金色 移動聯通電信5G手機</h5></div><div class="price"><h6>￥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即搶購</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手機"></div><div class="trade_intro"><h5>Apple蘋果Iphone6 pro（A2199）512G金色 移動聯通電信5G手機</h5></div><div class="price"><h6>￥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即搶購</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手機"></div><div class="trade_intro"><h5>Apple蘋果Iphone6 pro（A2199）512G金色 移動聯通電信5G手機</h5></div><div class="price"><h6>￥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即搶購</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手機"></div><div class="trade_intro"><h5>Apple蘋果Iphone6 pro（A2199）512G金色 移動聯通電信5G手機</h5></div><div class="price"><h6>￥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即搶購</h3></a></div></div></li></ul></div>
</div><!-- 列表頁主體部分 end --><!-- 底部模塊制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li class="zhengpin"><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供發票</p></div></li><li class="wuliu"><h5></h5><div class="service_txt"><h4>極速物流</h4><p>極速物流，極速送達</p></div></li><li class="shouhou"><h5></h5><div class="service_txt"><h4>無憂售后</h4><p>七天無理由退貨</p></div></li><li class="service"><h5></h5><div class="service_txt"><h4>特色服務</h4><p>私人訂制個性化套餐</p></div></li><li class="help"><h5></h5><div class="service_txt"><h4>幫助中心</h4><p>您的購物指南</p></div></li></ul></div><div class="mod_help"><dl><dt>服務指南</dt><dd><a href="#">購物流程</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">生活旅行 | 團購</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">大家電</a></dd><dd><a href="#">聯系客服</a></dd></dl><dl><dt>配送方式</dt><dd><a href="#">上門自提</a></dd><dd><a href="#">211限時達</a></dd><dd><a href="#">配送服務查詢</a></dd><dd><a href="#">配送費收取標準</a></dd><dd><a href="#">海外配送</a></dd></dl><dl><dt>支付方式</dt><dd><a href="#">貨到付款</a></dd><dd><a href="#">在線支付</a></dd><dd><a href="#">分期付款</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">郵局匯款</a></dd><dd><a href="#">公司轉賬</a></dd></dl><dl><dt>售后服務</dt><dd><a href="#">售后政策</a></dd><dd><a href="#">會員介紹</a></dd><dd><a href="#">價格保護</a></dd><dd><a href="#">退款說明</a></dd><dd><a href="#">返修/退換貨</a></dd><dd><a href="#">取消訂單</a></dd></dl><dl><dt>特色服務</dt><dd><a href="#">奪寶島</a></dd><dd><a href="#">DIY裝機</a></dd><dd><a href="#">延保服務</a></dd><dd><a href="#">常見問題</a></dd><dd><a href="#">品優購E卡</a></dd><dd><a href="#">品優購通信</a></dd></dl><dl><dt>幫助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品優購客戶端</dd></dl></div><div class="mod_copyright"><div class="copyright_top"><a href="#">關于我們</a> | <a href="#">聯系我們</a> | <a href="#">聯系客服</a> | <a href="#">商家入駐</a> | <ahref="#">營銷中心</a> | <a href="#">手機品優購</a> | <a href="#">友情鏈接</a> | <a href="#">銷售聯盟</a> | <ahref="#">品優購社區</a> | <a href="#">品優購公益</a> | <a href="#">English Site</a> | <a href="#">ContactU</a></div><div class="copyright_bottom">地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn<br>京ICP備08001421號京公網安備110108007702</div></div></div></footer><!-- 底部模塊制作 end --></body>
</html>

注冊頁面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注冊頁面</title>
</head>
<!-- 引入初始化樣式文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 設置icon標簽欄的網頁圖標 -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/register.css">
<body><div class="w"><div class="header"><div class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></div></div><div class="registerarea"><h3>注冊新用戶<div class="login">我有賬號，去<a href="#">登錄</a></div></h3><div class="reg_form"><form action=""><ul><li><label for="">手機號：</label><input type="text" class="inp">  <i class="error_icon"></i><spanclass="error">手機號格式不正確，請查證后重新輸入</span></li><li><label for="">手機驗證碼：</label><input type="text" class="inp">  <i class="error_icon"></i><spanclass="error">手機驗證碼輸入錯誤</span></li><li><label for="">輸入密碼：</label><input type="text" class="inp">  <i class="error_icon"></i><spanclass="error">密碼格式不正確，密碼的格式為6-18位</span></li><li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">強</em></li><li><label for="">確認密碼：</label><input type="text" class="inp">  <i class="success_icon"></i><spanclass="success">確認密碼輸入正確</span></li><li class="agree"><input type="checkbox" name="" id="">同意協議并注冊<a href="#">《知曉用戶協議》</a></li><li><input type="submit" value="提交注冊" class="btn"></li></ul></form></div>
</div><div class="footer"><div class="mod_copyright"><div class="copyright_top"><a href="#">關于我們</a> | <a href="#">聯系我們</a> | <a href="#">聯系客服</a> | <a href="#">商家入駐</a> | <a href="#">營銷中心</a>| <a href="#">手機品優購</a> | <a href="#">友情鏈接</a> | <a href="#">銷售聯盟</a> | <a href="#">品優購社區</a> | <ahref="#">品優購公益</a> | <a href="#">English Site</a> | <a href="#">ContactU</a></div><div class="copyright_bottom">地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn<br>京ICP備08001421號京公網安備110108007702</div></div></div></div>
</body>
</html>

樣式模塊：

base.css
?

/* 把我們所有標簽的內外邊距清零 */
* {margin: 0;padding: 0;/* css3盒子模型 */box-sizing: border-box;
}
/* em 和 i 斜體的文字不傾斜 */
em,
i {font-style: normal
}
/* 去掉li 的小圓點 */
li {list-style: none
}img {/* border 0 照顧低版本瀏覽器 如果 圖片外面包含了鏈接會有邊框的問題 */border: 0;/* 取消圖片底側有空白縫隙的問題 */vertical-align: middle
}button {/* 當我們鼠標經過button 按鈕的時候，鼠標變成小手 */cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {/* "\5B8B\4F53" 就是宋體的意思 這樣瀏覽器兼容性比較好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 默認有灰色邊框我們需要手動去掉 */border: 0; outline: none;
}body {/* CSS3 抗鋸齒形 讓文字顯示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}
/* 清除浮動 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}
.clearfix {*zoom: 1;
}

common.css

/* icomoon聲明   注意此處要注意路徑的變化*/
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?mfgl5q');src: url('../fonts/icomoon.eot?mfgl5q#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?mfgl5q') format('truetype'),url('../fonts/icomoon.woff?mfgl5q') format('woff'),url('../fonts/icomoon.svg?mfgl5q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}/* 版 心 */
.w {width: 1200px;margin: 0 auto;
}/* 快捷導航模塊 */
.shortcut {/* width: 100%; */height: 31px;background-color: #f1f1f1;line-height: 31px;
}.shortcut ul li {float: left;
}.style_red {color: #c81623;
}.fl {float: left;}.fr {float: right;
}/* 選擇所有偶數的li */
.shortcut .w .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0px;
}.mypin::after {font-family: 'icomoon';content: '?';margin-left: 6px;
}.focuspin::after {content: '?';margin-left: 6px;font-family: 'icomoon';
}.clientcare::after {content: '?';font-family: 'icomoon';margin-left: 6px;
}.naviationofwebsite::after {content: '\e91e';font-family: 'icomoon';margin-left: 6px;
}.header {position: relative;height: 105px;/* background-color: aquamarine; */
}.logo { position: absolute;top: 25px;
width: 171px;
height: 61px;
/* background-color: skyblue; */
}.logo h1 a  { display: block;width: 171px;height: 61px;background: url("../images/logo.png") no-repeat;font-size: 0;
}
.search {position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a;/* margin: 346px auto; */
}
.search input { float: left;width: 454px;height: 32px;padding-left: 10px;
}
.search button { float: left;width: 80px;height: 32px;background-color: #b1191a;font-size: 16px;color: #fff;
}
.hotwords {position: absolute;top: 66px;left: 346px;
}
.hotwords a { 
margin:0 10px; 
}.shopcar{position: absolute;right: 60px;top: 25px;line-height: 35px;text-align: center;width: 140px;height: 35px;background-color: #f7f7f7;border: 2px solid #dfdfdf;
}
.shopcar::before{content: '\e93a';font-family: 'icomoon';margin-right: 10px;color: #b1191a;
}
.shopcar::after{content: '\e920';font-family: 'icomoon';margin-left: 5px;
}
.count{position: absolute;top: -5px;/* right: 20px;  注意左對齊效果更好*/left: 105px; height: 14px;color: #fff;background-color: #600012;padding: 0 5px;line-height: 14px;border-radius: 7px 7px 7px 0;
}
.nav{height: 47px;border-bottom: 2px solid #b1191a;
}
.nav .dropdown{float: left;position: relative;width: 210px;height: 45px;background-color: #b1191a;
}
.nav .navitems{float: left;
}
.dropdown .dt{width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}
.dropdown .dd{/* display: none; */position: absolute;top: 45px;left: 0;width: 210px;height: 465px;background-color: #c81623;/* overflow: hidden;transition: all 0.5s; */
}
.dropdown .dd ul li{position: relative;width: 100%;height: 31px;line-height: 31px;margin-left: 2px;
}
.dropdown .dd ul li::after {content: '\e920';font-family: 'icomoon';position: absolute;right: 10px; top: 1px;color:#fff ;
}
.dropdown .dd ul li:hover{background-color: #fff;}
.dropdown .dd ul li a{font-size: 14px;color: #fff;padding-left: 10px;
}
.dropdown .dd ul li:hover a{color: #c81623;
}.navitems li{float: left;
}
.navitems li a{display: block;line-height: 45px;padding: 0 25px;height: 45px;font-size: 16px;
}.footer{height: 415px;background-color: #f5f5f5;padding-top: 30px;
}.mod_service{height: 110px;border-bottom: 1px solid #ccc;
}.mod_service ul li{float: left;width: 240px;height: 50px;/* background-color: pink; */padding-left: 35px;
}
.mod_service ul .zhengpin h5{float: left;background:url("../images/icons.png") no-repeat -252px -2px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .wuliu h5 {float: left;background: url("../images/icons.png") no-repeat -254px -54px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .shouhou h5 {float: left;background: url("../images/icons.png") no-repeat -257px -105px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .service h5 {float: left;background: url("../images/icons.png") no-repeat -257px -156px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .help h5 {float: left;background: url("../images/icons.png") no-repeat -257px -209px;width: 50px;height: 50px;margin-right: 10px;
}.service_txt{float:left
}
.service_txt h4{font-size: 14px;
}
.service_txt p{font-size: 12px;
}.mod_help{height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}
.mod_help dl dt {font-size: 16px;margin-bottom: 10px;
}
.mod_help dl{float: left;width: 200px;
}
.mod_help dl:last-child{width: 90px;text-align: center;
}
.mod_copyright{line-height: 15px;text-align: center;padding-top: 20px;
}
.copyright_top {margin-bottom: 15px;
}
.copyright_top a{ margin:0 3px;}

index.css

/* 此處的css文件是針對 main模塊而設計的 */
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?mfgl5q');src: url('../fonts/icomoon.eot?mfgl5q#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?mfgl5q') format('truetype'),url('../fonts/icomoon.woff?mfgl5q') format('woff'),url('../fonts/icomoon.svg?mfgl5q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}.main {width: 980px;height: 455px;/* background-color: aqua; */margin-left: 220px;margin-top: 10px;
}.focus {float: left;width: 721px;height: 455px;background-color: bisque;
}.newsflash {float: right;width: 250px;height: 455px;/* background-color: #ccc; */
}.news {height: 165px;background-color: rgb(255, 255, 255);
}.lifeservice {overflow: hidden;height: 209px;/* background-color: blanchedalmond; */border: 1px solid #e4e4e4;border-top: 0;
}.lifeservice ul {width: 252px;
}/* 編者按：由于下方的li樣式過大，導致ul、lifeservice的寬度容納不下，右下方向都會多出來一塊，此時設置一個overflow:hidden; 過大的部分直接切掉 不影響視覺效果*/.lifeservice ul li {float: left;width: 63px;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;
}.lifeservice ul li i {margin-top: 12px;display: inline-block;width: 24px;height: 28px;/* background-color: aqua; */background: url(../images/icons.png)no-repeat -18px -15px;
}.bargain {margin-top: 5px;
}.newsflash .news {border: 1px dotted #e4e4e4;
}.newsflash .news .hd {height: 35px;border-bottom: 1px dotted #e4e4e4;
}.newsflash .news .hd h5 {float: left;padding-left: 15px;font-size: 14px;line-height: 35px;
}.newsflash .news .hd .gengduo {padding-right: 5px;line-height: 35px;float: right;
}.newsflash .news .hd .gengduo::after {content: '\e920';font-family: 'icomoon';
}.newsflash .news .bd {padding: 5px 15px 0px;
}.newsflash .news .bd ul li {height: 24px;line-height: 24px;/* 超出文字省略號表示  三個步驟 : 超出部分隱藏 文字必須一行顯示 超出部分ellipsis */overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.recom {height: 163px;background-color: rgb(255, 255, 255);margin-top: 12px;
}.recom .recom_hd {float: left;width: 205px;height: 163px;background-color: #5c5251;text-align: center;padding-top: 30px;
}.recom .recom_bd {position: relative;float: left;
}.recom .recom_bd ul li {position: relative;float: left;
}.recom .recom_bd ul li:nth-child(-n+3)::after {/* 注意after是行內元素 */display: block;position: absolute;right: 0;top: 10px;content: '';width: 1px;height: 145px;background-color: #ddd;
}/* 家用電器模塊 */
.floor .jiadian .firstfloor_hd {margin-top: 29px;border-bottom: 2px solid rgb(200, 22, 25);color: rgb(200, 22, 25);height: 30px;line-height: 21px;
}.floor .jiadian .firstfloor_hd h3 {font-size: 18px;float: left;color: #c81623;font-weight: 400;}/* 下述為 標準的錯誤寫法 熱門本來在第一個回轉而變成最后一個 解決方式是li 上再加浮動left
.tab_list li{float:right;line-height: 30px;
}
.tab_list li a{margin:15px;
}.tab_list ul .tab_list_hot{color: #c81623;
} */.tab_list {float: right;line-height: 30px;
}.tab_list li{float: left;
}
.tab_list li a {margin: 15px;
}.tab_list ul .tab_list_hot {color: #c81623;
}
.jiadian .firstfloor_bd{height: 361px;/* background-color: pink; */
}
.tab_list_tiem>div{float: left;height: 361px;
}
.col_210{width: 210px;text-align: center;background-color: #f9f9f9;
}
.col_210 ul li{width: 85px;height: 34px;border-bottom: 1px solid #ccc;float:left;text-align: center;line-height: 34px;padding-right:10px;
}.col_210 ul{padding-left: 12px;
}.col_329{width: 329px;
}
.col_221{width: 221px;border-right: #ccc 1px solid;
}.col_219{width: 219px;
}
.bb{/* 一般情況下，a如果包含有寬度的盒子，a需要轉化為塊級元素 */display: block;border-bottom: #ccc 1px solid;
}

list.css

/* 列表頁專有的CSS樣式 */
.nav{overflow: hidden;
}
.sk{position: absolute;border-left: 1px solid #c81523;left: 190px;top: 40px;padding: 3px 0 0 14px;
}
.sk_list{float: left;
}
.sk_list ul li{float: left;
}
.sk_list ul li a{float: left;display: block;line-height: 47px;padding: 0 30px;font-size: 16px;font-weight: 700;color:black
}.sk_con{float: left;
}.sk_con ul li{float: left;
}.sk_con ul li:hover a{color: #c81523;}.sk_con ul li a{display: block;line-height: 49px;padding: 0 20px;font-size: 14px;font-weight: 400;color: black;}.sk_con .sk_con_secondli{color: #c81623;
}.sk_con .sk_con_lastli::after{display: inline-block;content: '\e91e';font-family: 'icomoon';padding-left:2px ;
}.sk_bd  li{float: left;margin-right: 2px;margin-top: 2px;
}.sk_bd li:hover{border: #c81523 1px solid;
}.sk_bd li:nth-child(4n){margin-right: 0;
}

.w { margin: 0 auto;width: 1200px;;}.header{height: 84px;border-bottom:2px solid #c81623;
}.logo{padding-top: 18px;
}.registerarea{height: 522px;border: 1px solid #ccc;margin-top: 20px;
}.registerarea h3{height: 42px;border: 1px solid #ccc;background-color: #e4e4e4;line-height: 42px;font-size: 18px;padding: 0 10px;font-weight: normal;
}.registerarea h3 .login{float: right;font-size: 14px;
}.login a{color: #c81623;}.reg_form {width: 600px;margin:50px auto 0;/* background-color:pink; */
}.reg_form ul li label{display: inline-block;width: 88px;text-align: center;
}.reg_form ul li .inp{width: 242px;height: 37px;border: 1px solid #ccc;
}.reg_form ul li{margin-bottom: 20px;
}
.error{color: #c81523;
}.reg_form ul li .error_icon{display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url("../images/error.png") no-repeat;margin-top: -2px;
}.success{color: #00a854;}
.success_icon{display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url(../images/success.png);
}.safe {padding-left: 175px;
}.safe em{padding: 0 12px;color: #fff;
}.ruo{background-color: #de1111;
}.zhong {background-color: greenyellow;
}.qiang {background-color: #f79100;
}.agree{padding-left: 95px;
}.agree input{vertical-align: middle;
}.btn{width: 200px;height: 34px;background-color: #c81523;font-size: 14px;color: #fff;margin: 30px 0 0 70px;
}.mod_copyright {line-height: 15px;text-align: center;padding-top: 20px;
}.copyright_top {margin-bottom: 15px;
}.copyright_top a {margin: 0 3px;
}