HTML5 布局-固定宽度
来源:互联网 发布:rpg制作大师mac下载 编辑:程序博客网 时间:2024/04/29 09:23
先睹为快
固定宽度的居中布局
首先我们这里探讨的是我们常用的固定宽度的居中布局,这应该是目前实战中应用的最多的了。然后从考虑是否应用大背景上我们分为两种,一种是允许整体有一个大背景,一种是头部,中间及底部都可以平铺一个全屏的大背景。接着我们从有无边栏来讨论三种情况,一种是有左或右边栏,一种是没有边栏,最后一种就是左右边栏都存在的情况。我们在这探讨的布局方案借鉴与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,可以根据实际需要来覆写。
我们说了这个是用来辅助我们布局的,很多时候我们布局的时候不得不考虑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;}
- HTML5 布局-固定宽度
- CSS固定宽度布局
- 固定宽度CSS版式布局
- 两页固定宽度布局
- Div+CSS创建固定宽度布局
- 使用 CSS 创建固定宽度的布局
- 使用CSS创建固定宽度的布局
- 二列固定宽度居中布局
- CSS布局--固定宽度且居中
- DIV布局 两列固定宽度居中
- CSS布局左中右宽度固定高度自动
- CSS学习笔记---固定宽度布局
- 左侧固定宽度-右侧自适应布局
- 宽度固定的三栏布局
- 实现左边固定宽度右边自适应布局
- 固定宽度与变宽度页面布局分析
- CSS布局:中栏固定宽度,左右两栏宽度自适应
- css布局—一列宽度固定,一列宽度自适应
- TF-IDF与余弦相似性的应用相关文章
- GBin1博客视图 - 最近发布的文章-demo
- 二叉树创建及其遍历:前序、中序、后序、层序遍历等
- Linux下 IP_RECVDSTADDR undefined 问题
- PHP常见问题
- HTML5 布局-固定宽度
- UIView关联多个Gesture
- 广州.Net+Android训练营 课程体系4.1版
- log4j怎样配置成每天生产一个日志文件
- 【风宇冲】Unity3D教程宝典之Shader篇:基础讲学习方法技巧
- GCD杂感
- 打补丁patch 和 diff 命令的使用
- axis2 客户端调用服务器端
- 初学者应该看看,感觉挺有用的