|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
这是一个对照典范的三行二列结构,每列高度(事前其实不能断定哪列的高度)的不异,是每一个计划师寻求的方针,按一样平常的做法,年夜多接纳背景图添补、加JS剧本的办法使列的高度不异,本文要先容的是接纳容器溢出部分埋没和列的负底界限和正的内补钉相分离的办法来办理列高度不异的成绩。
先看代码:
#wrap{
overflow:hidden;
}
#sideleft,#sideright{
padding-bottom:32767px;
margin-bottom:-32767px;
}
完成道理:
块元素必需包括在一个容器里。
使用overflow:hidden到容器里的元素。
使用padding-bottom(充足年夜的值)到列的块元素。
使用margin-bottom(充足年夜的值)到列的块元素。
padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回究竟部入手下手的地位,同时,溢出部分埋没失落了。
兼容各扫瞄器
IEMac5
失掉高度准确,以是要过滤失落下面的代码。
/*/*/
#sideleft,#sideright{
padding-bottom:32767px;
margin-bottom:-32767px;
}
/**/
Opera
1.Opera7.0-7.2不克不及准确扫除溢出部分,以是要加:
/*easyclearing*/
#wrap:after
{
content:[DONOTLEAVEITISNOTREAL];
display:block;
height:0;
clear:both;
visibility:hidden;
}
#wrap
{
display:inline-block;
}
/*/*/
#wrap
{
display:block;
}
/*endeasyclearing*/
/*/*/
12下一页
2.Opera8处置overflow:hidden有个BUG,还得加上以下代码:
/*/*/
#sideleft,#sideright
{
padding-bottom:32767px!important;
margin-bottom:-32767px!important;
}
@mediaalland(min-width:0px){
#sideleft,#sideright
{
padding-bottom:0!important;
margin-bottom:0!important;
}
#sideleft:before,#sideright:before
{
content:[DONOTLEAVEITISNOTREAL];
display:block;
background:inherit;
padding-top:32767px!important;
margin-bottom:-32767px!important;
height:0;
}
}
/**/
3.Opera9的B2在修改8的bug.
测试情况:IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape7.2经由过程。上一页12
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。 |
|