HTML5 布局-固定宽度

这篇博客探讨了HTML5中固定宽度的居中布局方法,特别关注是否需要全屏大背景的情况。内容涵盖了有无边栏的各种布局,如单侧边栏、双侧边栏和无边栏布局,并提供了相应的HTML结构示例。通过引入`inner`类,简化了处理边距、边框和内填充的复杂性,以实现更灵活的宽度调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先睹为快





固定宽度的居中布局

首先我们这里探讨的是我们常用的固定宽度的居中布局,这应该是目前实战中应用的最多的了。然后从考虑是否应用大背景上我们分为两种,一种是允许整体有一个大背景,一种是头部,中间及底部都可以平铺一个全屏的大背景。接着我们从有无边栏来讨论三种情况,一种是有左或右边栏,一种是没有边栏,最后一种就是左右边栏都存在的情况。我们在这探讨的布局方案借鉴与drupal的主题,所以如果是学过drupal这个cms的朋友应该会比较熟悉。


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,可以根据实际需要来覆写。


为什么要使用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

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>aside left & right demo</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
	<!--[if lt IE 9]>
	<script src="js/html5.js" type="text/javascript"></script>
	<![endif]-->
</head>
<body>
     把下面内容拷贝进来
</body>
</html>

通用样式在最下

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


左边栏布局

HTML:

<div class="page aside-left">
    <!--header begin-->
    <header id="header" class="clearfix">
        <div class="inner">
            <h1>header区域</h1>
            <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
        </div>        
    </header>
    
    <!--container begin-->
    <section id="container" class="clearfix">
        <!--aside_left begin-->
        <section id="aside_left" class="aside">
            <div class="inner">
                <h2>左边栏区域</h2>
                <ul>
                    <li>君子博学而日参省乎己,则知明而行无过矣。</li>
                    <li>神莫大于化道,福莫长于无祸</li>
                    <li>故言有招祸也,行有招辱也,君子慎其所立乎!</li>
                </ul>
            </div>
        </section> 
        <!--main begin-->
        <section id="main">
            <div class="inner">
                <h2>内容区域</h2>
                <article>
                    <p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                    <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                </article>
            </div>
        </section>
    </section>
    
    <!--footer begin-->
    <footer id="footer">
        <div class="inner">
            <h2>footer区域</h2>
            <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>
        </div>
    </footer>
</div>


右边栏布局

HTML:

<div class="page aside-left">
    <!--header begin-->
    <header id="header" class="clearfix">
        <div class="inner">
            <h1>header区域</h1>
            <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
        </div>        
    </header>
    
    <!--container begin-->
    <section id="container" class="clearfix">
        <!--main begin-->
        <section id="main">
            <div class="inner">
                <h2>内容区域</h2>
                <article>
                    <p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                    <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                </article>
            </div>
        </section>

        <!--aside_right begin-->
        <section id="aside_right" class="aside">
            <div class="inner">
                <h2>右边栏区域</h2>
                <ul>
                    <li>君子博学而日参省乎己,则知明而行无过矣。</li>
                    <li>神莫大于化道,福莫长于无祸</li>
                    <li>故言有招祸也,行有招辱也,君子慎其所立乎!</li>
                </ul>
            </div>
        </section> 
     </section>
     <!--footer begin-->
     <footer id="footer">
	<div class="inner">
		<h2>footer区域</h2>
			<p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>             </div>
     </footer>
</div>

左右两边栏布局

HTML:

<div class="page two-asides">
	<!--header begin-->
    <header id="header" class="clearfix">
    	<div class="inner">
        	<h1>header区域</h1>
            <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
        </div>    	
    </header>
    
    <!--container begin-->
    <section id="container" class="clearfix">
    	<!--aside_left begin-->
    	<section id="aside_left" class="aside">
            <div class="inner">
            	<h2>左边栏区域</h2>
                <ul>
                	<li>君子博学而日参省乎己,则知明而行无过矣。</li>
                    <li>神莫大于化道,福莫长于无祸</li>
                    <li>故言有招祸也,行有招辱也,君子慎其所立乎!</li>
                </ul>
            </div>
        </section> 
        <!--main begin-->
    	<section id="main">
            <div class="inner">
            	<h2>内容区域</h2>
                <article>
                	<p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                    <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                </article>
            </div>
        </section>
        <!--aside_left begin-->
    	<section id="aside_left" class="aside">
            <div class="inner">
            	<h2>右边栏区域</h2>
                <ul>
                	<li>君子博学而日参省乎己,则知明而行无过矣。</li>
                    <li>神莫大于化道,福莫长于无祸</li>
                    <li>故言有招祸也,行有招辱也,君子慎其所立乎!</li>
                </ul>
            </div>
        </section> 
    </section>
    
    <!--footer begin-->
    <footer id="footer">
    	<div class="inner">
        	<h2>footer区域</h2>
            <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>
        </div>
    </footer>
</div>

无边栏布局

HTML:

<div class="page no-aside">
	<!--header begin-->
    <header id="header" class="clearfix">
    	<div class="inner">
        	<h1>header区域</h1>
            <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
        </div>    	
    </header>
    
    <!--container begin-->
    <section id="container" class="clearfix">
        <!--main begin-->
    	<section id="main">
            <div class="inner">
            	<h2>内容区域</h2>
                <article>
                	<p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                    <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                </article>
            </div>
        </section>
    </section>
    
    <!--footer begin-->
    <footer id="footer">
    	<div class="inner">
        	<h2>footer区域</h2>
            <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>
        </div>
    </footer>
</div>

全屏无边栏布局

HTML:

<div class="page no-aside">
	<!--header begin-->
    <div id="header_wrap">
    <header id="header" class="clearfix">
    	<div class="inner">
        	<h1>header区域</h1>
            <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
        </div>    	
    </header>
    </div>
    <!--container begin-->
    <section id="container" class="clearfix">
        <!--main begin-->
    	<section id="main">
            <div class="inner">
            	<h2>内容区域</h2>
                <article>
                	<p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                    <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                </article>
            </div>
        </section>
    </section>
    
    <!--footer begin-->
    <div id="footer_wrap">
    <footer id="footer"> 
        <div class="inner"> 
		<h2>footer区域</h2> 
		<p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>
	</div>
     </footer>
     </div>
</div>


CSS code(以上都含有)

/*reset*/
html {
    height: 100%;
}
body {
    background-color: #FFFFFF;
    color: #404040;
    font: 12px/1.5 Helvetica,Arial,sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
h1, h2, h3, h4, h5, h6, p, blockquote, form, fieldset {
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input, select, label {
    vertical-align: middle;
}
img {
    border: medium none;
}
a {
    text-decoration: none;
}
p {
    padding: 0 0 9px;
}
h1, h2 {
    line-height: 36px;
}
h3 {
    line-height: 27px;
}
h4, h5, h6 {
    line-height: 18px;
}
h1 {
    font-size: 24px;
}
h2 {
    font-size: 20px;
}
h3 {
    font-size: 16px;
}
h4 {
    font-size: 14px;
}
h5, h6 {
    font-size: 12px;
}
ul, ol {
    margin: 0 0 18px;
    padding: 0;
}
ul li, ol li {
    margin-left: 25px;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0;
}
ul.nostyle {
    list-style: none outside none;
}
ul.nostyle li {
    margin-left: 0;
}
ul.inline-style {
    list-style: none outside none;
    margin-bottom: 0;
}
ul.inline-style li {
    display: inline;
    float: left;
    margin-left: 0;
}
dl {
    margin-bottom: 18px;
}
dt {
    font-weight: bold;
}
dd {
    margin: 0 0 0 9px;
    padding: 0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
    display: block;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
    overflow: hidden;
}
.clearfix {
}

/*layout*/
.page {
    height: auto !important;
    min-height: 100%;
    min-width: 1000px;
    width: 100%;
}
#header, #container, #footer {
    clear: both;
    margin: 0 auto;
    text-align: left;
    width: 1000px;
}
#container {
    padding: 20px 0;
}
#main, #aside_right, #aside_left {
    float: left;
}
.inner {
    margin: 0 10px;
}
#main {
    width: 1000px;
}
#aside_left {
    width: 300px;
}
.aside-left #main {
    width: 700px;
}
.aside-right #main {
    width: 700px;
}
#aside_right {
    width: 300px;
}
.two-asides #aside_left, .two-asides #aside_right {
    width: 200px;
}
.two-asides #main {
    width: 600px;
}

/*style*/
#header {
    background-color: #EDEDED;
}
#header_wrap {
    background-color: #EDEDED;
}
#footer {
    background-color: #E1DACF;
}
#footer_wrap {
    background-color: #E1DACF;
}
#container {
    background-color: #CCCCCC;
}
#main {
    background-color: #FFFFFF;
}
#aside_left, #aside_right {
    background-color: #EFEFEF;
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值