上一解已经完成了京东页面的导航条和下拉列表,至此,京东首页上部分的公共部分已经做完了。首页特有部分今天开始做京东首页的轮播图。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标签的下面,所以版心盒子就显示在上面了。*/
两种方法都能得到想要的效果:
在敲代码的时候多尝试集中方法,也不失为一种快乐!嘻嘻~