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

效果：

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