DDR爱好者之家 Design By 杰米
首先,三栏等高布局,顾名思义,可以概括为以下特征:
1、3列(白痴也知道)
2、这3列高等相等
3、这3列的高度不是固定不变,而是随着内容的变化而变化
Step 1:
xhtml代码:
<div id="header">#header</div>
<div id="container">
<div id="main" class="column">#main</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
主要结构式#container的div,至于#header和#footer,完全是为了让它能够更像网页一些,回到#container,它内部包含三列,其中main里包含的是一个网页最核心,最主要的内容,所以我们不能怠慢,在纯xhtml的流文档中,浏览器是从上到下解析的,故重要的内容应该放在比较靠前的位置,这是由搜索引擎的权重决定的吧,但是视觉上,我们待会儿会把它放到中间。
思考一下:这三列怎么可能在没有写死高度的时候还智能的齐头并进呢?
其实不写死高度的确不能办到智能的齐头并进,那怎么写死高等呢,答案就是,利用盒模型,写它的padding,这是一种变态的方法,但挺奏效,就好比一个人 只有实际只有170cm,但是算上20cm的头发,天啊,他已经是190cm了,还是先给出解决方法吧:就是利用padding-bottom和margin-bottom;
Step2:
#container {
background-image: url('bg.gif');
width: 960px;
margin: 0 auto;
}
#main{float: left: width: 500px;background-color: #e5e5e5;}
#left{float: left: width: 300px;background-color: #7bd;}
#right{float: right: width: 160px;background-color: #f63;}
Step3:
#container .column{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
这一步应该算是本主题的核心,至于32767 这个数你可以理解成“足够大”,以便于有足够的空间去扩展它的盒子,这么高应该是巨人症吧,没关系,我们可以用margin-bottom的负值去隐藏它,这个技巧,在我看来,我真的解释不清楚,有句古话: 意会,言传! 你只要试试看,就会领会到其中的奥妙。下边这幅图对你的理解应该有帮助:
到了这步,你会发现这3列的盒模型为32767px,此时你要在父元素上加:overflow: hidden;当然IE6.0是:zoom:1;
#container {
background-image: url('bg.gif');
width: 960px;
margin: 0 auto;
overflow: hidden;
}
Step4:
现在#main的视觉效果是在最左栏,我们要想办法把它搞成中间
思路:先把#main排到中间,我们可以#main{margin-left:300},这时,#left被挤到800px的位置,在#left{margin-left:-800px;}就能搞定,可惜啊,IE6这个贱货,实在是无语,只得重新思考了。
一般的,在css做布局时,有几种思路,一种是float,一种是定位,关于定位的话,不熟悉的google一下就行,提一下:position: relative;的这个属性,如果不指明top,left的话,它的视觉效果不会改变。
所以,为了让#main在视觉效果上有所突破,那么必须指明top或者left,在这里只需要指明left就行了,
#main {
float: left;
background-color: #e5e5e5;
width: 500px;
left: 300px;
}
#left {
float: left;
background-color: #7bd;
width: 300px;
left: -500px;
}
其实在这中间,还有一个概念是比较重要的,#main,#left有了position:relative以后,就有了层的概念,所以当#main{left:300px}后,#left已经独立出来了,不会被挤到800px的位置了,故:之需要left:-500px就能达到左边,500是#main的宽。
最后考虑的是向下兼容,
提供一段代码:
虽然写了这么多,但是你能够做,并不代表你应该这么做,这是一个战术和战略的问题,以下是我个人想知道的:
我觉得一开始:
padding-bottom: 32767px;
margin-bottom: -32767px;
这么大的值,在reflow阶段会不会很耗资源,而采用js来控制他们的高度,会不会来得更轻松一些呢?
第一次写这种东东,感到很棘手,不管是构思上还是在语言表达上都还是很晦涩的,希望大家积极的指正,希望能和更多的朋友来进行交流,一方面是提高自己,另一方面是促进社区的和谐和共享,尽一份自己微薄的力量。
1、3列(白痴也知道)
2、这3列高等相等
3、这3列的高度不是固定不变,而是随着内容的变化而变化
Step 1:
xhtml代码:
<div id="header">#header</div>
<div id="container">
<div id="main" class="column">#main</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
主要结构式#container的div,至于#header和#footer,完全是为了让它能够更像网页一些,回到#container,它内部包含三列,其中main里包含的是一个网页最核心,最主要的内容,所以我们不能怠慢,在纯xhtml的流文档中,浏览器是从上到下解析的,故重要的内容应该放在比较靠前的位置,这是由搜索引擎的权重决定的吧,但是视觉上,我们待会儿会把它放到中间。
思考一下:这三列怎么可能在没有写死高度的时候还智能的齐头并进呢?
其实不写死高度的确不能办到智能的齐头并进,那怎么写死高等呢,答案就是,利用盒模型,写它的padding,这是一种变态的方法,但挺奏效,就好比一个人 只有实际只有170cm,但是算上20cm的头发,天啊,他已经是190cm了,还是先给出解决方法吧:就是利用padding-bottom和margin-bottom;
Step2:
#container {
background-image: url('bg.gif');
width: 960px;
margin: 0 auto;
}
#main{float: left: width: 500px;background-color: #e5e5e5;}
#left{float: left: width: 300px;background-color: #7bd;}
#right{float: right: width: 160px;background-color: #f63;}
Step3:
#container .column{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
这一步应该算是本主题的核心,至于32767 这个数你可以理解成“足够大”,以便于有足够的空间去扩展它的盒子,这么高应该是巨人症吧,没关系,我们可以用margin-bottom的负值去隐藏它,这个技巧,在我看来,我真的解释不清楚,有句古话: 意会,言传! 你只要试试看,就会领会到其中的奥妙。下边这幅图对你的理解应该有帮助:
到了这步,你会发现这3列的盒模型为32767px,此时你要在父元素上加:overflow: hidden;当然IE6.0是:zoom:1;
#container {
background-image: url('bg.gif');
width: 960px;
margin: 0 auto;
overflow: hidden;
}
Step4:
现在#main的视觉效果是在最左栏,我们要想办法把它搞成中间
思路:先把#main排到中间,我们可以#main{margin-left:300},这时,#left被挤到800px的位置,在#left{margin-left:-800px;}就能搞定,可惜啊,IE6这个贱货,实在是无语,只得重新思考了。
一般的,在css做布局时,有几种思路,一种是float,一种是定位,关于定位的话,不熟悉的google一下就行,提一下:position: relative;的这个属性,如果不指明top,left的话,它的视觉效果不会改变。
所以,为了让#main在视觉效果上有所突破,那么必须指明top或者left,在这里只需要指明left就行了,
#main {
float: left;
background-color: #e5e5e5;
width: 500px;
left: 300px;
}
#left {
float: left;
background-color: #7bd;
width: 300px;
left: -500px;
}
其实在这中间,还有一个概念是比较重要的,#main,#left有了position:relative以后,就有了层的概念,所以当#main{left:300px}后,#left已经独立出来了,不会被挤到800px的位置了,故:之需要left:-500px就能达到左边,500是#main的宽。
最后考虑的是向下兼容,
提供一段代码:
虽然写了这么多,但是你能够做,并不代表你应该这么做,这是一个战术和战略的问题,以下是我个人想知道的:
我觉得一开始:
padding-bottom: 32767px;
margin-bottom: -32767px;
这么大的值,在reflow阶段会不会很耗资源,而采用js来控制他们的高度,会不会来得更轻松一些呢?
第一次写这种东东,感到很棘手,不管是构思上还是在语言表达上都还是很晦涩的,希望大家积极的指正,希望能和更多的朋友来进行交流,一方面是提高自己,另一方面是促进社区的和谐和共享,尽一份自己微薄的力量。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]