目錄
1. 品優購項目規劃
1.1 網站制作流程
1.2 品優購項目整體介紹
1.3 學習目的
1.4 開發工具以及技術棧
1.5 項目搭建工作
1.6 網站favicon圖標
1.7 網站TDK三大標簽SEO優化
2. 品優購首頁制作
2.1 常見模塊類命名
2.2 快捷導航shortcut制作
2.3 header制作
2.6 main主題模塊制作
2.7 推薦模塊制作
2.8 樓層區 floor
index.html
?base.css
common.css
3. 列表頁制作
3.1 準備工作
?編輯?3.3 列表頁主體 sk_container
list.html
list.css?
4. 品優購注冊頁制作
?register.html
register.css
5. Web服務器
6. 總結
1. 品優購項目規劃
1.1 網站制作流程
1.2 品優購項目整體介紹
1.3 學習目的
1.4 開發工具以及技術棧
1.5 項目搭建工作
images文件夾中放不經常更換的、修飾類的圖片，比如背景圖片、精靈圖；upload放和產品相關的圖片。
1.6 網站favicon圖標
<link rel="shortcut icon" href="favicon.ico">1.7 網站TDK三大標簽SEO優化
1. title網站標題
2. description網站說明
content里面的內容由專門制作SEO的人填寫。
3. keywords關鍵字
越重要的放越前
2. 品優購首頁制作
2.1 常見模塊類命名
2.2 快捷導航shortcut制作
2.3 header制作
logo seo優化
2.4 nav導航制作
2.5 footer底部制作
2.6 main主題模塊制作
2.7 推薦模塊制作
2.8 樓層區 floor
index.html
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品優購商城-綜合網購首選-正品低價、品質保障、配送及時、輕松購物！</title><!-- 網站說明 --><meta name="description"content="品優購商城-專業的綜合網上購物商城，銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品。便捷、誠信的服務，為您提供愉悅的網上購物體驗！" /><!-- 關鍵字 --><meta name="keywords" content="網上購物，網上商城，手機，筆記本，電腦，MP3，CD，VCD" /><!-- 引入favicon圖標 --><link rel="shortcut icon" href="favicon.ico"><!-- 引入CSS初始化樣式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共的樣式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入index.css文件 --><link rel="stylesheet" href="css/index.css">
</head><body><!-- 快捷導航模塊 start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品優購歡迎您！ </li><li><a href="#">請登錄</a> <a href="#" class="style_red">免費注冊</a></li></ul></div><div class="fr"><ul><li>我的訂單</li><li></li><li class="arrow-icon">我的品優購</li><li></li><li>品優購會員</li><li></li><li>企業采購</li><li></li><li class="arrow-icon">關注品優購</li><li></li><li class="arrow-icon">客戶服務</li><li></li><li class="arrow-icon">網站導航</li></ul></div></div></section><!-- 快捷導航模塊 end --><!-- header 頭部模塊制作 start --><div class="header w"><!-- logo模塊 --><div class="logo"><h1><a href="index.html" title="品優購商城">品優購商城</a></h1></div><!-- search搜索模塊 --><div class="search"><input type="search" name="" id="" 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><!-- 購物車模塊 --><div class="shopcar">我的購物車<i class="count">8</i></div></div><!-- header 頭部模塊制作 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="#">手機、數碼、通信</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><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="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="#">服裝城</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"><ul><li><img src="upload/focus1.png" alt=""></li></ul></div><div class="newsflash"><div class="news"><div class="news_hd"><h5>品優購快報</h5><a href="#" class="more">更多</a></div><div class="news_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><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li><li><i></i><p>話費</p></li></ul></div><div class="bargin"><img src="upload/bargain.png" alt=""></div></div></div></div><!-- 首頁專有的模塊 main end --><!-- 推薦模塊 start --><div class="w recom"><div class="recom_hd"><img src="images/clock.png" alt=""><h3>今日推薦</h3></div><div class="recom_bd"><ul><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li></ul></div></div><!-- 推薦模塊 end --><!-- 樓層區制作 start --><div class="floor"><!-- 1樓家用電器樓層 --><div class="w jiadian"><div class="box_hd"><h3>家用電器</h3><div class="tab_list"><ul><li><a href="#" class="style_red">熱門</a>|</li><li><a href="#">大家電</a>|</li><li><a href="#">生活用品</a></li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><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><a href="#"><img src="upload/floor-1-1.png" alt=""></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="bb"><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 class="w shouji"><div class="box_hd"><h3>家用電器</h3><div class="tab_list"><ul><li><a href="#" class="style_red">熱門</a>|</li><li><a href="#">大家電</a>|</li><li><a href="#">生活用品</a></li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><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><a href="#"><img src="upload/floor-1-1.png" alt=""></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="bb"><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 --><div class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供發票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供發票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供發票</p></div></li><li><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="#">會員介紹</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="#">會員介紹</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><img src="images/wx_cz.jpg" alt="">品優購客戶端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">關于我們</a> | <a href="#">聯系我們</a> | <a href="#">聯系客服</a> | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 |品優購社區 | 品優購公益 |</div><div class="copyright">地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 <br>京ICP備08001421</div></div></div></div><!-- 底部模塊的制作 end --></body></html>?base.css
/* 14-京東css初始化 */
/* 把所有標簽的內外邊距清零 */
* {margin: 0;padding: 0;/* css3盒子模型，padding和border不會將盒子撐大 */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 {/* 當鼠標經過按鈕時鼠標變成小手 */cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #ff0f23
}button,
input {font-family: PingFang SC, Source Han Sans CN, 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;/* \5B8B\4F53 就是宋體的意思，這樣瀏覽器兼容性比較好 */font: 12px/1.5 PingFang SC, Source Han Sans CN, 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
/* 聲明字體圖標 這里一定要注意路徑的變化 */
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?tomleg');src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?tomleg') format('truetype'),url('../fonts/icomoon.woff?tomleg') format('woff'),url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}/* 版心寬度 */
.w {width: 1200px;margin: 0 auto;
}.fl {float: left;
}.fr {float: right;
}.style_red {color: #c81623;
}/* 快捷導航模塊 */
.shortcut {height: 31px;/* 垂直居中 */line-height: 31px;background-color: #f1f1f1;
}.shortcut li {float: left;
}/* 選擇所有序號為偶數的li */
.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0;
}/* 向下的小三角 arrow箭頭 icon小圖標*/
.arrow-icon::after {font-family: 'icomoon';content: '\e91e';margin-left: 6px;
}/* header頭部制作 */
.header {position: relative;height: 105px;
}.logo {position: absolute;top: 25px;width: 171px;height: 61px;
}.logo a {display: block;width: 171px;height: 61px;background: url(../images/logo.png) no-repeat;/* font-size: 0; 京東的做法 *//* 淘寶的做法 讓文字隱藏 */text-indent: -9999px;overflow: hidden;
}.search {position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a;
}.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;width: 140px;height: 35px;line-height: 35px;text-align: center;border: 1px solid #dfdfdf;background-color: #f7f7f7;
}.shopcar::before {font-family: 'icomoon';content: '\e93a';margin-right: 5px;color: #e60012;
}.shopcar::after {font-family: 'icomoon';content: '\e920';margin-left: 5px;
}.count {position: absolute;top: -5px;left: 105px;height: 14px;line-height: 14px;color: #fff;background-color: #e60012;padding: 0 5px;border-radius: 7px 7px 7px 0;
}/* nav模塊制作 */
.nav {height: 47px;border-bottom: 2px solid #b1191a;
}.nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a;
}.nav .navitems {float: left;
}.dropdown .dt {width: 100%;height: 100%;line-height: 45px;color: #fff;text-align: center;font-size: 16px;
}.dropdown .dd {/* display: none; */width: 210px;height: 465px;background-color: #c81623;margin-top: 2px;
}.dropdown .dd ul li {position: relative;height: 31px;line-height: 31px;margin-left: 2px;padding-left: 10px;
}.dropdown .dd ul li a {font-size: 14px;color: #fff;
}.dropdown .dd ul li:hover {background-color: #fff;
}.dropdown .dd ul li:hover a {color: #c81623;
}.dropdown .dd ul li::after {position: absolute;top: 1px;right: 10px;color: #fff;font-family: 'icomoon';content: '\e920';font-size: 14px;
}.navitems ul li {float: left;
}.navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 16px;padding: 0 25px;
}/* 底部模塊的制作 */
.footer {height: 415px;background-color: #f5f5f5;padding-top: 30px;
}.mod_service {height: 80px;border-bottom: 1px solid #ccc;
}.mod_service ul li {float: left;width: 300px;height: 50px;padding-left: 35px;
}.mod_service ul li h5 {float: left;width: 50px;height: 50px;background: url(../images/icons.png) no-repeat -252px -2px;margin-right: 8px;
}.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 {float: left;width: 200px;
}.mod_help dl:last-child {width: 90px;text-align: center;
}.mod_help dl dt {font-size: 16px;margin-bottom: 10px;
}.mod_copyright {text-align: center;padding-top: 20px;
}.links {margin-bottom: 15px;
}.links a {margin: 0 3px;
}.copyright {line-height: 20px;
}3. 列表頁制作
3.1 準備工作
引入需要的link；
快捷導航欄、header、nav、footer 模塊大體相同，復制過來即可，些許不同再修改。
3.2 列表頁 header 和 nav 修改
?3.3 列表頁主體 sk_container
list.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="description"content="品優購商城-專業的綜合網上購物商城，銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品。便捷、誠信的服務，為您提供愉悅的網上購物體驗！" /><!-- 關鍵字 --><meta name="keywords" content="網上購物，網上商城，手機，筆記本，電腦，MP3，CD，VCD" /><!-- 引入favicon圖標 --><link rel="shortcut icon" href="favicon.ico"><!-- 引入CSS初始化樣式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共的樣式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入列表頁的css文件 --><link rel="stylesheet" href="css/list.css">
</head><body><!-- 快捷導航模塊 start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品優購歡迎您！ </li><li><a href="#">請登錄</a> <a href="#" class="style_red">免費注冊</a></li></ul></div><div class="fr"><ul><li>我的訂單</li><li></li><li class="arrow-icon">我的品優購</li><li></li><li>品優購會員</li><li></li><li>企業采購</li><li></li><li class="arrow-icon">關注品優購</li><li></li><li class="arrow-icon">客戶服務</li><li></li><li class="arrow-icon">網站導航</li></ul></div></div></section><!-- 快捷導航模塊 end --><!-- header 頭部模塊制作 start --><div 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><!-- search搜索模塊 --><div class="search"><input type="search" name="" id="" 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><!-- 購物車模塊 --><div class="shopcar">我的購物車<i class="count">8</i></div></div><!-- header 頭部模塊制作 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="#">女裝</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></nav><!-- nav模塊制作 end --><!-- 列表頁主體部分 --><div class="w sk_container"><div class="sk_hd"><img src="upload/bg_03.png" alt=""></div><div class="sk_bd"><ul class="clearfix"><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li></ul></div></div><!-- 底部模塊的制作 start --><div class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供發票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供發票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供發票</p></div></li><li><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="#">會員介紹</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="#">會員介紹</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><img src="images/wx_cz.jpg" alt="">品優購客戶端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">關于我們</a> | <a href="#">聯系我們</a> | <a href="#">聯系客服</a> | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 |品優購社區 | 品優購公益 |</div><div class="copyright">地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 <br>京ICP備08001421</div></div></div></div><!-- 底部模塊的制作 end -->
</body></html>list.css?
/* 列表頁專有的 */
.nav {/* .sk_con ul li a 行高超過了nav盒子，影響下面主體部分的排列 */overflow: hidden;
}.sk {position: absolute;left: 190px;top: 40px;border-left: 1px solid #c81523;padding: 3px 0 0 14px;
}.sk_list {float: left;
}.sk_list ul li {float: left;line-height: 47px;
}.sk_list ul li a {/* display: block;line-height: 47px; */padding: 0 30px;font-size: 16px;font-weight: 700;color: #000;
}.sk_con {float: left;
}.sk_con ul li {float: left;/* line-height: 49px; */
}.sk_con ul li a {display: block;line-height: 49px;padding: 0 20px;font-size: 14px;
}.sk_con ul li:last-child a::after {font-family: 'icomoon';content: '\e91e';
}.sk_bd ul li {float: left;overflow: hidden;margin-right: 13px;width: 290px;height: 460px;/* 不然會抖動 */border: 1px solid transparent;
}.sk_bd ul li:nth-child(4n) {margin-right: 0;
}.sk_bd ul li:hover {border: 1px solid #c81523;
}4. 品優購注冊頁制作
準備一個父盒子，再用ul>li ;
右對齊可通過盒子加寬度，再 text-align: right;
?register.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>個人注冊</title><!-- 引入favicon圖標 --><link rel="shortcut icon" href="favicon.ico"><!-- 引入CSS初始化樣式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入注冊頁面的css --><link rel="stylesheet" href="css/register.css">
</head><body><div class="w"><header><div class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></div></header><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="number" class="inp"><span class="error"> <i class="error_icon"></i> 手機號碼格式不正確</span></li><li><label for="">短信驗證碼 ：</label><input type="number" class="inp"><span class="success"> <i class="success_icon"></i> 短信驗證碼輸入正確</span></li><li><label for="">登錄密碼 ：</label><input type="password" class="inp"><span class="error"> <i class="error_icon"></i> 密碼不少于6位數，請重新輸入</span></li><li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">強</em></li><li><label for="">確認密碼 ：</label><input type="password" class="inp"><span class="error"> <i class="error_icon"></i> 手機號碼格式不正確</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><!-- 底部模塊的制作 start --><footer><div class="mod_copyright"><div class="links"><a href="#">關于我們</a> | <a href="#">聯系我們</a> | <a href="#">聯系客服</a> | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 |品優購社區 | 品優購公益 |</div><div class="copyright">地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 <br>京ICP備08001421</div></div></footer><!-- 底部模塊的制作 end --></div>
</body></html>register.css
.w {width: 1200px;margin: 0 auto;
}header {height: 84px;border-bottom: 2px solid #c81523;
}.logo {padding-top: 18px;
}.registerarea {height: 522px;border: 1px solid #ccc;margin-top: 20px;
}.registerarea h3 {height: 42px;line-height: 42px;border-bottom: 1px solid #ccc;background-color: #ececec;padding: 0 10px;font-size: 18px;font-weight: 400;}.login {float: right;font-size: 14px;
}.login a {color: #c81523;
}.reg_form {width: 600px;margin: 50px auto 0;
}.reg_form ul li {margin-bottom: 20px;
}.reg_form ul li label {display: inline-block;width: 88px;text-align: right;
}.reg_form ul li .inp {width: 242px;height: 37px;border: 1px solid #ccc;}.error {color: #c81523;
}.error_icon,
.success_icon {display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url(../images/error.png) no-repeat;margin-top: -2px;
}.success {color: green;
}.success_icon {background: url(../images/success.png) no-repeat;
}.safe {padding-left: 165px;
}.safe em {padding: 0 12px;color: #fff;
}.safe .ruo {background-color: #de1111;
}.safe .zhong {background-color: #40b83f;
}.safe .qiang {background-color: #f79100;
}.agree {padding-left: 90px;
}.agree input {vertical-align: middle;
}.agree a {color: #1ba1e6;
}.btn {width: 200px;height: 34px;background-color: #c81623;font-size: 14px;color: #fff;margin: 30px 0 0 70px;
}.mod_copyright {text-align: center;padding-top: 20px;
}.links {margin-bottom: 15px;
}.links a {margin: 0 3px;
}.copyright {line-height: 20px;
}5. Web服務器
6. 總結
1. 對父盒子設置行高等于盒子高度，能使子盒子垂直方向居中，如果子盒子是由文字撐開的，那么可實現文字居中對齊；如果給子盒子設置了大小，那么想使子盒子居中對齊可以通過設置margin。
2.行的元素可以指定左右的margin值，margin：0 10px；
3.li里面放了鏈接a，想要給padding值實現不同字數盒子間間距相同，給a設置padding更好一些，這樣使得鏈接的范圍更大，不局限于文字占的空間。
4.輪播圖父盒子里有多張圖，最好通過ul里的li包含圖
5.text-align: center; 可以使里面的文字、行內元素或行內塊元素水平居中顯示
6.一般情況下，a如果包含有寬度的盒子，a需要轉化為塊級元素
7.注意外邊距塌陷問題，可以用padding避免
：STM32F407 FreeRTOS移植)
