前端练习项目——品优购 Day2 导航栏shortcut

 1.结构分析

        整体是一个大盒子，大盒子里有一个版心。版心可以分为左右两个盒子，文字可以用li制作，注意行高是可以继承给子盒子的。

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}

.sl {
    float: left;
}

.sr {
    float: right;
}
/* 左盒子向左浮动，右盒子向右浮动 */

/* 宽度不进行设置，默认为浏览器宽度 */
.shortcut {
    height: 31px;
    line-height: 31px;
    /*垂直居中 */
    background-color: #f1f1f1;
}

 2.左侧盒子制作

   

    首先需要让左侧盒子左浮动，使其靠在版心的左侧。然后用ul+li制作里面的内容 

<div class="sl">
     <ul>
        <li>品优购欢迎您！&nbsp;</li>
        <li>
            <a href="#">请登录&nbsp;</a><a href="#" class="style_red">免费注册</a>
        </li>
     </ul>
</div>

       中间有的空隙可以通过插入 来实现

       链接文字颜色是红色的，由于红色的字体颜色可能以后会用到，因此专门写一个类style_red用于添加红色属性  

.style_red {
    color: #c81623
}

      由于盒子中的li都是从对应盒子左侧开始搭建的（包括右边的也是），因此li都应该设置为左浮动（浮动不可继承），这段代码选择全部的li，因此对左右的li都有作用。

.shortcut ul li {
    float: left;
}

3.右侧盒子制作

  整体思路与左盒子相同，用li来搭建文字。

<div class="sr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li></li>
                    <li><a href="#">我的品优购</a>&nbsp;<span class="iconfont">&#xe695;</span></li>
                    <li></li>
                    <li><a href="#">品优购会员</a></li>
                    <li></li>
                    <li><a href="#">企业采购</a></li>
                    <li></li>
                    <li><a href="#">关注品优购</a>&nbsp;<span class="iconfont">&#xe695;</span></li>
                    <li></li>
                    <li><a href="#">客户服务</a>&nbsp;<span class="iconfont">&#xe695;</span></li>
                    <li></li>
                    <li><a href="#">网站导航</a>&nbsp;<span class="iconfont">&#xe695;</span></li>
                </ul>
            </div>

（1）小竖线的制作

    小竖线是一个li（其中一种做法）

/* 小竖线 */
.shortcut .sr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}

     这里用伪类选择器来选择li，因为小竖线所在位置都是偶数位

     用margin来调整小竖线的位置（与上面为9px，左右15px，下面0px），小竖线的宽度设为1px

（2）字体图标的使用

      使用icon-font阿里巴巴矢量图标库

      在库里挑选图标加入购物车，然后下载代码，把文件夹放入fonts文件夹中。在CSS中加入以下内容：

/* 引入字体图标 */
@font-face {
    font-family: 'iconfont';
    src: url('../fonts/fonts1/iconfont.ttf?t=1627194264464') format('truetype');
}

/* 定义使用 iconfont 的样式 */
.iconfont {
    font-family: "iconfont" !important;
    font-size: 6px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

      值得注意的是，复制下来的代码一般路径（url）是不正确的，因此需要自己调整路径：通过加../等，直到找到下载下来的文件夹，后面的东西（iconfont.ttf?t=1627194264464）不变。

      字体图标的使用就是加入一行代码：

<span class="iconfont">&#xe695;

      放在文字后面即可。