大家好，又见面了，我是你们的朋友全栈君。
接下来，开始制作京东的导航条。效果如下图：
图1
业务分析：
1.通栏盒子，并且有背景颜色
2.有版心。
3.版心里面包含左右浮动的两个盒子。
4.有下拉效果的盒子后面，有三角形标志。
5.右边的盒子里面包含几个li标签。
分析完之后，对整个头部的构架和要实现的功能都有简单的了解，下面就是开始一步一步实现这些业务。
1.制作一个通栏的盒子，并设置背景颜色。
html代码：
<body>
<div class="header"></div>
</body>因为首页头部导航是共用的部分，所以样式写在base.css里面。打开fireworks，用切片工具测量一下导航栏的高度为30px。（没有样本图，抱歉。大家就不用测量了，直接用我给数据就行）。然后用吸管工具吸一下颜色，得到十六进制颜色为： #f1f1f1。宽度就是整个页面，可以不用写。
CSS代码：
.header { height: 29px; background-color: #f1f1f1; }然后用浏览器打开，效果如下：
图2
2.添加版心
版心就是网页正中间，存放内容的盒子。通过测量版心的宽度为1210px。在上一篇css样式格式化中，已经提取出来，并设置了宽度，这里就不需要在单独写了，只需要添加一个盒子，带w类就行。
html代码：
<div class="header">
<div class="w"></div>
</div>可以给版心盒子增加高度，并设置一个背景颜色，看看效果：
图3
效果：
图4
3.左边盒子制作
版心盒子里面包含两个盒子，左边的盒子内容是“送至：北京”，后面有三角符号。当点击三角的时候，下拉列表会出现很多城市名，用户可以自由选择送达城市。
从语义上来讲，这个盒子应该是个定义列表。所以，我就用定义列表做这个盒子。
HTML代码：
<div class="w">
<div class="fl">
<!--左盒子-->
<!--类名为公共类，左浮动-->
<div class="dt">
送至：北京
</div>
</div>
<div class="fr"></div>
<!--右盒子-->
</div>效果：
图5
文字出现在网页中，但使没有文本居中，所以要给父亲盒子加行高，并使行高等于盒子的高度。
图6
4.下拉小三角的制作
原理如图：
图7
图8
<i> 标签原是显示斜体文本效果,<s>标签是定义加删除线文本，不建议使用，这里用作CSS钩子，来制作小三角。效果：
图9
下面，只需要在CSS样式里面设置菱形的文本样式，并给i盒子和s盒子的定位就行。
CSS代码：
.header .dt{ padding: 0 20px 0 10px; /*测量样图，dt盒子左边有一个10px的间隔。布局宽高最稳定、其次padding，最后margin。 而且margin使用有兼容问题，所以尽量用margin表示兄弟盒子之间间距。 所以，使用padding把表示盒子与版心隔开10px。dt盒子右边距可以根据实际情况设置大小，这里设置20px。*/ position: relative; /*子绝父相法则：i盒子要想以某个盒子为参照进行绝对定位，那么，参照的父盒子要相对定位。*/ }
.dt i { font: 400 15px "宋体"; /*设置菱形的加粗、字体和字号。700=bold */ /*font 合写的顺序：font-style | font-variant | font-weight | font-size | line-height | font-family*/ position: absolute; /*绝对定位，一个盒子绝对定位之后就可以设置宽高了。绝对定位不占位置*/ width: 15px; /*设置i盒子的宽度有讲究，使其正好和菱形字号相等*/ height: 7px; /*i盒子的高也有讲究，使其正好是菱形字号的一半。这样菱形的下半部分正好可以和i盒子重合。*/ top: 13px; /*距离dt盒子上padding13px*/ right: 3px; /*距离dt盒子的右padding3px。 如果你设置dt的右padding值不是20px，这个数值也要跟着改变。*/ background: pink; /*设置一个背景颜色，看看盒子效果*/ 效果：
图10
但是，我们想要是i盒子和菱形的下半部分重合，所以还需要给s盒子定位，使其再往上移一部分。
.dt s{ position: absolute; /*s盒子也需要绝对定位，它的位置需要使i盒子和菱形的下半部分重合，如图7所示。*/ top: -8px; /*top正值是往下移，要想往上移就用负值*/ left: 0; /*因为设置i盒子的宽度和菱形的字号相同，这里可以不需要设置左边定位。 如果两者不一样宽度，左定位需要根据情况设置。*/ }效果：
图11
至此，小三角已经基本完工了，我们只需要给i盒子overflow：hidden，隐藏溢出部分，就留下了菱形下半部分。
图12
效果：
图13
好了，导航条左边部分已经完工了，下篇接着做右边部分。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/163180.html原文链接：https://javaforall.net
