您的位置：首页 > 其它

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

2017-05-01 18:03 218 查看

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

图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

好了，导航条左边部分已经完工了，下篇接着做右边部分。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 京东商城导航实战

相关文章推荐

新的分享

章节导航