三、品優購首頁製作_快捷導航區域
阿新 • • 發佈：2021-05-08
程式碼下載地址：https://gitee.com/bitaotao/quality-shopping-static-page.git
一、品優購首頁製作
網站的首頁一般都是使用index命名，比如index.html 或者 index.php。
我們開始製作首頁的頭部和底部的時候，根據模組話開發，樣式要寫到common.css裡面。
1.1、常用模組類名命名
以下是我們約定的命名模組，同學們可以直接使用以下類名即可。
| 名稱 | 說明 |
|---|---|
| 快捷導航欄 | shortcut |
| 頭部 | header |
| 標誌 | logo |
| 購物車 | shopcar |
| 搜尋 | search |
| 熱點詞 | hotwords |
| 導航 | nav |
| 導航左側 | dropdown 包含 .dd .dt |
| 導航右側 | navitems |
| 頁面底部 | footer |
| 頁面底部服務模組 | mod_service |
| 頁面底部幫助模組 | mod_help |
| 頁面底部版權模組 | mod_copyright |
2.2、快捷導航 shortcut 製作
- 通欄的盒子命名為shortcut，是快捷導航的意思。注意這裡的行高，可以繼承給裡面的子盒子
- 裡面包含版心的盒子
- 版心盒子裡麵包括1號左側盒子左浮動
- 版本盒子裡麵包含2號右側盒子右浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< /* 宣告字型圖示 這裡一定要注意路徑的變化 */
@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 ul li {
float: left;
}
/* 選擇所有的偶數小li */
.shortcut .fr ul li:nth-child(even) {
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 15px 0;
}
.arrow-icon::after {
content: '\e91e';
font-family: "icomoon";
margin-left: 6px;
}