标签：cut 网页 .. icomoon 静态 fonts url 京东 font

快速导航栏制作

主要知识应用：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;
}

效果展示

标签：cut,网页,..,icomoon,静态,fonts,url,京东,font
来源： https://www.cnblogs.com/ben-studying/p/14655780.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。