双飞翼页面效果及圣杯效果
双飞翼页面
按照主 子 附加的顺序进行加载 —— 也就是我们常说的”重要的内容先加载
样式
<style>
.main {
float: left;
width: 100%; background:#F00;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
background:#993;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
background:#FCF ;
}
.main .main-wrap {
margin-left:200px; /*与sub产生10像素距离*/
margin-right:240px; /*与extra产生10像素距离*/
background:#0f0;
}
</style>
结构:
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main">
<div class="main-wrap">山地车vsd山地车vsd山地车vsd</div>
</div>
<div class="sub">啥啥啥啥啥啥啥啥啥 </div>
<div class="extra">dddddddddddddddddddddddddd</div>
</div>
<div id="ft"></div>
</div>
圣杯
<style>
#bd{ padding: 0 230px 0 190px; }
#bd { overflow: hidden; _zoom: 1;/*ie8一下兼容性处理*/ }
.main, .sub, .extra {padding-bottom: 5000px;margin-bottom: -5000px;/*底部对齐兼容性处理*/}
.main {
float: left;
width: 100%; background:#F00;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
background:#993;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
background:#FCF ;
}
</style>
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main">中间文字内容容</div>
<div class="sub"> </div>
<div class="extra">dddddddddddddddddddddddddd</div>
</div>
<div id="ft"></div>
</div>
浙公网安备 33010602011771号