頭部信息編寫

淘寶圖：

一、涉及知識

　　1、自定義圖標（字體）

　　2、左右浮動

　　3、列表制作導航欄

　　4、鼠標指向超鏈接改變顏色

　　5、CSS的@規則

二、代碼

　　1、index.html：

<body>
    <!-- 頭部信息 -->
    <div id="headMessage" class="clearfix">
        <ul class="fl">
            <li>
                <span>中國大陸</span>
                <span class="iconfont">&#xe60b;</span>
            </li>
            <li>
                <a class="login mr7" href="#">親，請登錄</a>

                <a href="#">免費注冊</a>
            </li>
            <li>
                <a href="#">手機逛淘寶</a>
            </li>
        </ul>

        <ul class="fr">
            <li>
                <a href="#">我的淘寶</a>
                <span class="iconfont">&#xe60b;</span>
            </li>
            <li>
                <span class="iconfont c_f40">&#xe6a1;</span>
                <a href="#">購物車</a>
                <span class="iconfont">&#xe60b;</span>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont">&#xe604;</span>
                    收藏夾
                </a>
                <span class="iconfont">&#xe60b;</span>
            </li>
            <li>
                <a href="#">商品分類</a>
            </li>
            <li>|</li>
            <li>
                <a href="#">千牛賣家中心</a>
                <span class="iconfont">&#xe60b;</span>
            </li>
            <li>
                <a href="#">聯系客服</a>
                <span class="iconfont">&#xe60b;</span>
            </li>
            <li>
                <span class="iconfont c_f40">&#xe63d;</span>
                <a href="#">網站導航</a>
                <span class="iconfont">&#xe60b;</span>
            </li>
        </ul>
    </div>
</body>

　　2、reset.css（樣式重置）：

/* 樣式重置 */
*{
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
}

img{
    border: none;   /* ie瀏覽器里面會有 */
    vertical-align: middle;
}

a{
    text-decoration: none;
    color: #3c3c3c;
}

i{
    font-style: normal;
}

button{
    outline: none;
}

body{
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    color: #3c3c3c;
    background-color: #f4f4f4;
    /* background-color: red; */
}

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

.fl{
    float: left;
}

.fr{
    float: right;
}

.leayer{
    width: 1190px;
    margin: 0 auto;
}

.mr7{
    margin-right: 7px;
}

.c_f40{
    color: #ff4400;
}

　　3、font.css

/* 自定義字體 */
@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
        url('../font/iconfont.woff2') format('woff2'),
        url('../font/iconfont.woff') format('woff'),
        url('../font/iconfont.ttf') format('truetype'),
        url('../font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

　　4、index.css

@import 'reset.css';
@import 'font.css';

/* 頭部信息 */
#headMessage li{
    float: left;
    line-height: 35px;
    padding: 0 6px;
}

#headMessage a{
    color: #6c6c6c;

}

#headMessage a:hover{
    color: #ff4400;
}

#headMessage a.login{
    color: #f22e00;
}

#headMessage .iconfont{
    font-size: 12px;
}

三、生成頁面

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Html+css仿淘寶頁面練習 html+css做個靜態淘寶頁面，含注釋半個很low的頁面 html+css制作簡單的靜態頁面 html+css實現小米商城首頁靜態頁面【前端學習分享】HTML+CSS京東商城靜態頁面仿慕課網教程html+css頁面--前段時間學習總結（1）用HTML+CSS實現一個計科院網站首頁靜態頁面 HTML+CSS頁面滾動效果處理簡單的html+css頁面制作用 HTML+CSS 實現商城頁面