CSS网页布局实例:三栏等高布局
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-02
|
首先，三栏等高布局，顾名思义，可以概括为以下特征： 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; } 这一步应该算是本主题的核 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: 如何在CSS中设定文本的尺寸下一篇: css字体设置(不同浏览器设置效果)
关于CSS网页布局实例:三栏等高布局的所有评论
