【京东商城首页实战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标签的下面，所以版心盒子就显示在上面了。*/

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

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