你的位置:首页 > 网页设计

[网页设计]超全css解决方案之CSS布局


1.固定宽度的居中布局

首先我们这里探讨的是我们常用的固定宽度的居中布局,这应该是目前实战中应用的最多的了。

然后从考虑是否应用大背景上我们分为两种,一种是允许整体有一个大背景,一种是头部,中间及底部都可以平铺一个全屏的大背景。接着我们从有无边栏来讨论三种情况,一种是有左或右边栏,一种是没有边栏,最后一种就是左右边栏都存在的情况。

我们在这探讨的布局方案借鉴与drupal的主题,所以如果是学过drupal这个cms的朋友应该会比较熟悉。

2.html结构详解

我们使用html5标签,所以有必要针对ie6-8导入html5.js。然后我们设置把所有的结构都包含在一个class为page的div里面,在这 里div中我们还需要加上布局的class,aside-left,aside-right,two-sides,no-side分别对应左边栏,右边 栏,左右两栏,没有边栏布局,这里我们以两栏布局为例,总共包括五个区域,分别为header,left,content,right,footer区 域,每个区域里面我们增加了一层class为inner的div,这个inner主要是用来辅助我们布局,默认我们inner设置了margin左右的各 位10px,可以根据实际需要来覆写。

3.为什么要使用inner

我们说了这个是用来辅助我们布局的,很多时候我们布局的时候不得不考虑border及左右的margin,padding等,现在我们完全把这些抛在脑 后,交给我们的inner来完成。如整个宽度为1000px,左右边栏各为200px,而内容为600px。我们以前的思想应该是左右为200px,然后 中间内容就是580px(margin为10px)或560px(margin为20px),这样我们如果需要改为980px,我们又得改好几个值,然后 如果我们左右边栏要加个边框,又变成了202px,或者要设置左右宽度为198px,这是多么的纠结啊。现在引入inner,我们在布局的时候直接计算宽 度不需要考虑border,margin,padding什么的,然后通过对各个区域里面的inner重新覆写,不就搞定了吗。这里贴出左右两栏的 html代码供参考。具体的请看下面的demo

 1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>aside left & right demo</title> 6   <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> 7   <!--[if lt IE 9]> 8   <script src="js/html5.js" type="text/javascript"></script> 9   <![endif]-->10 </head>11 <body>12   <div >13     <header id="header" >14       <div >15       </div>16     </header>17 18     <section id="container" >    19       <aside id="aside_left" >20         <div >21         </div>22       </aside><!--aside_left-->23 24       <section id="main">25         <div >26         </div>    27       </section><!--main-->28 29       <aside id="aside_right" >30         <div >31         </div>32       </aside><!--aside_right-->  33     </section><!--container-->34 35     <footer id="footer" >36       <div >37       </div>38     </footer>39   </div>40 </body>41 </html>

如果需要为header,container及footer部分各设计一个全屏的背景,上面的这个肯定是不行的了,我们可以这三个div外面再加一层wrap,而这个wrap就是全屏的。

demo: 左边栏布局 右边栏布局 左右两边栏布局 无边栏布局

 

ps:原文来自www.w3cplus.com