上一解已经完成了京东页面的导航条和下拉列表，至此，京东首页上部分的公共部分已经做完了。首页特有部分今天开始做京东首页的轮播图。CSS代码要写在index.css文件里面了。效果样图如下：

由于篇幅限制，本文就先说说如何添加可点击通栏背景及相应的页面布局技巧吧。

需要完成的业务有以下几点：

附上背景图：

学到目前为止，想必大家都会给盒子添加背景图片了，不就是给通栏大盒子加背景就行了吗。做这个网页的时候还沿用这个思路就错啦。

HTML代码：

CSS代码：

效果图：

样式看上去和想要的效果一模一样，但是请注意红色框里面的细节，鼠标没有变成小手，依旧是“小白”。 要想让背景变得可点击，给大盒子里加一个a标签，再给a标签设置背景，这样行得通吗？

HTML代码：

CSS代码：

效果2：

再看这次，背景确实可点击了，但是父盒子的二儿子——轮播图溢出了。（同下拉列表溢出原理）。

其实说来说去，要想解决这个难题，无非就是既让背景图片能点击，又能够让其他内容在背景图上正常显示。 那么，实现这种效果呢？

HTML代码：

CSS代码：

两种方法都能得到想要的效果：

在敲代码的时候多尝试集中方法，也不失为一种快乐！嘻嘻~