头部信息编写

淘宝图：

一、涉及知识

　　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 实现商城页面