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

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

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