02-CSS基础练习：JD首页的制作（快捷导航部分）
我们在上一篇文章中制作的网页最顶部的导航，是属于网页导航。
本文中，Banner图上方的导航，叫做快捷导航（shortcut）。
##快捷导航的骨架
我们先制作快捷导航的骨架。如下图所示：
上图中，shortcut-nav-menu-all和shortcut-nav-menu-one都是属于shortcut-nav-menu部分，只不过，后者是将父亲撑破了。
为了实现上图，对应的html代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<div class="shortcut-nav">
<div class="w">
<div class="shortcut-nav-menu">
<div class="shortcut-nav-menu-all">
<a href="#">全部商品分类</a>
</div>
<div class="shortcut-nav-menu-one" style="color: #fff">
下一段再讲
</div>
</div>
<div class="shortcut-nav-items">
<ul>
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆</a></li>
<li><a href="#">京东超市</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a>
|