【京东商城首页实战10】添加通栏背景图片及布局技巧

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

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

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

• 1.给添加通栏背景，点击背景可进入活动页面，所以背景由a标签包裹。
• 2.重点：通栏背景及里面的内容的布局思路

附上背景图：

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

不妨先做个试验。

HTML代码：

<div class="banner">   <div class="w">      <div class="slider"></div>   </div></div>

CSS代码：

@charset "UTF-8";.banner{    width: 100%;    height: 604px;    background: url(../images/banner.jpg) no-repeat top center;}.slider{    width: 730px;    height: 453px;    margin:12px 0 0  220px;    background-color: pink;}

效果图：

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

不妨再试验一把。

HTML代码：

<div class="banner">   <a href="#"></a>   <div class="w">      <div class="slider"></div>   </div></div>

CSS代码：

@charset "UTF-8";.banner a{    display: block;    width: 100%;    height: 604px;    background: url(../images/banner.jpg) no-repeat top center;}.slider{    width: 730px;    height: 453px;    margin:12px 0 0  220px;    background-color: pink;}

效果2：

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

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

作者尝试的两种方法：

HTML代码：

<div class="banner">   <a href="#"></a>   <div class="w main">      <div class="slider"></div>      <div class="news"></div>   </div></div>

• 方法一
  css代码：

.banner a{    float: left;    display: block;    width: 100%;    height: 604px;    background: url(../images/banner.jpg) no-repeat top center;}.main{    position: relative;}.slider{    /*float: left;*/    position: absolute;    width: 730px;    height: 453px;    top: 12px;    left: 220px;    /*margin:12px 0 0  220px;*/    background-color: pink;}.news{    position: absolute;    width: 248px;    height: 451px;    top: 12px;    right: 0px;    background: blueviolet;    /*border: 1px solid #E4E4E4;*/}/*方法一：a占用标准流，给需要在a背景上显示的版块绝对定位，就可以正常显示*/

• 方法二

CSS代码：

.banner {    position: relative;}.banner a {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 604px;    background: url(../images/banner.jpg) no-repeat top center;}.main{    position: relative;}.slider {    width: 730px;    height: 453px;    background-color: pink;    margin: 12px 0 0  220px;    float: left;}.news {    width: 248px;    height: 451px;    background: blueviolet;    float: right;    margin-top: 12px;}/*方法二：给a标签定位，使其脱离标准流，但是其层级变为0了。而版心盒子依旧在标准流里，会在被a盒子覆盖。给版心盒子加上相对定位，就会使其层级也变为0，又因为在HTML中，版心盒子在a标签的下面，所以版心盒子就显示在上面了。*/

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

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