【京东商城首页实战2】导航条制作（1）[通俗易懂]

全栈程序员-站长 • 2022年7月22日上午10:46 • 未分类 • 阅读 10

大家好，又见面了，我是你们的朋友全栈君。

接下来，开始制作京东的导航条。效果如下图：

图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盒子的宽度和菱形的字号相同，这里可以不需要设置左边定位。 如果两者不一样宽度，左定位需要根据情况设置。*/ }