【京东商城首页实战8】热词菜单

接下来，做topbanner下面大盒子的最后一个小元素——热词菜单。

分析：
1.logo、搜素框、购物车已经占满了父亲盒子的宽度，所以热词菜单盒子需要左浮动，会自动掉落一行，靠近logo盒子右边。
2.每个文字都是链接，所以用a标签做就可以了。li标签一般用于比较大的导航菜单。

HTML代码：

<div class="hotwords">
    <a href="#" class="col-red">11月11天</a>
    <!--第一个热词字体是红色-->
    <a href="#">11.11秒杀</a>
    <a href="#">买2免1</a>
    <a href="#">Note5 黑</a>
    <a href="#">12期免息</a>
    <a href="#">智能科技</a>
    <a href="#">清仓</a>
    <a href="#">国际服饰</a>
    <a href="#">优惠券</a>
</div>

CSS代码：

.hotwords {
    width: 500px;
    padding: 7px 0;
    float: left;
    /*左浮动，父亲盒子右边没有空间，会自动落下一行，靠在logo盒子右边*/
}
.hotwords a {
    margin-right: 6px;
    /*每个a标签之间有个间距*/
}

至此，topbanner下面的大盒子基本完工，效果图如下：

欢迎指正，谢谢！