程式碼下載地址：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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品優購</title>
    <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">
</head>
<body>
    <!-- 快捷導航模組 -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品優購歡迎您!</li>
                    <li>
                        <a href="#">請登入</a><a href="#">免費註冊</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>

    </div>
</body>
</html>

/* 宣告字型圖示 這裡一定要注意路徑的變化 */
@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;
}

三、品優購首頁製作_快捷導航區域

一、品優購首頁製作

1.1、常用模組類名命名

2.2、快捷導航 shortcut 製作

相關推薦