【京东商城首页实战3】导航条制作（2）

下面做导航条右边部分。

图1

分析：
1.用无序列表ul制作菜单导航条。
2.有些菜单后面有小三角标志
3.菜单之间有小竖线隔开。注意这里的小竖线高度不够，不能认为菜单的边框，它是一个微型盒子。

1.导航菜单栏基本结构

HTML代码：

 <div class="fr">
 <!--右盒子-->
     <ul>
         <li>
             <a href="#">你好，请登录</a>&nbsp;&nbsp;
             <!--中间有小间距，这里用两个空格隔开-->
             <a href="#" class="col-red">免费注册</a>
             <!--免费注册的字体为红色，所以单独给它加个类名。col-red类有important！属性，权重最高-->
          </li>
          <li class="line"></li>
          <!--灰色竖线，添加类“line”-->
           <li>我的订单</li>
           <li class="line"></li>
           <li>我的京东</li>
           <li class="line"></li>
           <li>京东会员</li>
           <li class="line"></li>
           <li>企业采购</li>
           <li class="line"></li>
           <li>手机京东</li>
           <li class="line"></li>
           <li>关注京东</li>
           <li class="line"></li>
           <li>客户服务</li>
           <li class="line"></li>
           <li>网站导航</li>
     </ul>
</div>

CSS代码：

.fr li{
    float: left;
    /* 浮动不继承，这里需要让所有的li盒子左浮动，才能按顺序排在一行*/
    padding:0 10px;
    /*用padding挤开文字*/
}
.fr .line{
    /*设置line的属性*/
    width: 1px;
    height: 12px;
    _font-size: 0;
    /*ie6不支持小于12px的盒子，解决办法：加上_font-size: 0;详情点击：http://blog.csdn.net/sinat_34647836/article/details/55004778*/
    background-color: #ddd;
    padding: 0;
    /*padding会继承，如果这里不设置为0，这个微型盒子也会有10px的左右padding*/
    margin-top:9px;
    /*测量：使小竖线下移9px*/
}

至此，一个简单的导航菜单栏已做好，效果：

图2

2.添加小三角

接着，就是给菜单添加后面的小三角，在上篇博客已经做过小三角样式了，现在只需把样式添加到菜单里面：
html：
给每个需要小三角的菜单添加类名和菱形盒子

<li class="xsj">我的京东
    <i><s>◇</s></i>
</li>

CSS：

.header .dt,.header .xsj{
    padding: 0 20px 0 10px;
    /*改变后面有三角的li标签的padding*/
    position: relative;
}
.header .dt i,.xsj i {
    font: 400 15px "宋体";
    position: absolute;
    width: 15px;
    height: 7px;
    top: 13px;
    right: 3px;
    overflow: hidden;
}

.dt s,.xsj s{
    position: absolute;
    top: -8px;
    left: 0;
}

做完这一步，看看效果：

图3

3.添加小手机图片

附上小图片的精灵图：

HTML代码：

<li class="xsj jd-sj">
    <em class="sj"></em>
     手机京东
    <i><s>◇</s></i>
</li>

css代码：

.fr .jd-sj{
    padding: 0 20px 0 25px;
    /*因为要在前面添加手机图标，所以需要增加li盒子的左padding，层叠掉上面设置的padding，注意权重。*/
}
.jd-sj .sj{
    position: absolute;
    /*绝对定位，li盒子已经写过position:relative;*/
    width: 15px;
    height: 20px;
    /*给盒子设置宽高，使其正好和图片大小相同*/
    background: url(../images/sprite.png) no-repeat;
    /*所用图片在精灵图第一个*/
    left: 5px;
    top: 5px;
    /*相对于li盒子的定位*/
}

效果：

好啦，导航条已经做完了，希望能对大家有所帮助，谢谢！