【京东商城首页实战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盒子的定位*/ }

效果：

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