Heim >Web-Frontend >HTML-Tutorial >超全css解决方案之CSS布局_html/css_WEB-ITnose

超全css解决方案之CSS布局_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:561071Durchsuche

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 class="page two-asides">13         <header id="header" class="clearfix">14             <div class="inner">15             </div>16         </header>17 18         <section id="container" class="clearfix">        19             <aside id="aside_left" class="aside">20                 <div class="inner">21                 </div>22             </aside><!--aside_left-->23 24             <section id="main">25                 <div class="inner">26                 </div>        27             </section><!--main-->28 29             <aside id="aside_right" class="aside">30                 <div class="inner">31                 </div>32             </aside><!--aside_right-->    33         </section><!--container-->34 35         <footer id="footer" class="clearfix">36             <div class="inner">37             </div>38         </footer>39     </div>40 </body>41 </html>

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

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

 

ps:原文来自www.w3cplus.com

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn