快速导航栏制作

主要知识应用：1. 浮动布局 2. 字体图标的引用 3. 伪类选择器以及伪元素选择器

HTML结构

 <!-- 快捷导航栏shortcut -->
    <div class="shortcut">
        <div class="cut">
            <ul class="left">
                <li>品优购欢迎您！&nbsp;</li>
                <li><a href="#">请登录 &nbsp;</a><a href="#" class="red">免费注册</a></li>
            </ul>
            <ul class="right">
                <li>我的订单</li>
                <li>|</li>
                <li class="add">我的品优购</li>
                <li>|</li>
                <li>品优购会员</li>
                <li>|</li>
                <li>企业采购</li>
                <li>|</li>
                <li class="add">关注品优购</li>
                <li>|</li>
                <li class="add">客户服务</li>
                <li>|</li>
                <li class="add">网站导航</li>
            </ul>

        </div>
    </div>

CSS样式（不包含初始化代码）

/* 声明字体图标 注意更改路径 */

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?ed7fsc');
    src: url('../fonts/icomoon.eot?ed7fsc#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?ed7fsc') format('truetype'), url('../fonts/icomoon.woff?ed7fsc') format('woff'), url('../fonts/icomoon.svg?ed7fsc#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


/* 快捷导航栏 */

.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.cut {
    width: 1200px;
    margin: 0 auto;
}

.cut .left {
    float: left;
}

.cut .right {
    float: right;
}

.cut li {
    float: left;
    font-size: 12px;
}

.red {
    color: #c81623;
}

.cut ul li:nth-of-type(even) {
    padding: 0 10px;
}

.cut .right .add::after {
    content: '\e900';
    font-family: 'icomoon';
    margin-left: 5px;
}

效果展示