实例构造之上中下结构DIV CSS构造
上中下结构为思空见贯构造结构,通常平庸(企业站点)网页咱们大概大致分为上(头部)、中(内容区)、下(底部版权)形成。而这切实是由最简单凹凸结构CSS组织演变而成,只不适量了一个DIV层结构何况,素质组织法子才具执著。
一、主要思惟
岂论若干好多个高下结构或单一结构,通常主体形式凡是居中的,这个应用就必要运用css margin格式(让构造居中兼容各大涉猎器),同时通常网页都会静止宽度,也等于要运用css width设置装备摆设好每个DIV层宽度。
这里三个上中下结构的DIV盒子现实上即是同级相干,从上到下三个DIV层,只不外居中。
二、组织实例思维
1、布局要运用到技俩
margin:0 auto :CSS布局居中从命
width 配置宽度
border边框名目为本案例便于观测而参预CSS格局,实践项目布局按照需求增减
height 配置高度 也是本案例便于察看每一个DIV层而设置的高度样式,一样平常结构结构不需求配置高度,因为通常构造假设形式几许不能注定就不设置高度。
2、具体技俩值
margin:0 auto(DIV居中违抗)
width:400px(设置宽度为400px)
border:1px solid #F00; border:1px solid #FF0; border:1px solid #00F(设置设置3个分袂为红黄蓝的边框)
height:100px;height:200px;height:100px 配置三个CSS高度值
三、实例残缺代码
CSS5完成案例测试或打造,一样平常做初始化模板基本上进行,省得照成分歧阅读器兼容不佳。这里做CSS5供应CSS5初始化模板根基上继续进行。
上中下定名离别为header、content、footer,由于结构组织,以是要养成通常大结构运用id,以是CSS定名时候抉择标识表记标帜为”#”。
1、案例对应CSS代码
- #header,#content,#footer{margin:0 auto;width:400px; height:100px}
- /* 以上代码设置装备摆设三个共用款式 */
- #header{border:1px solid #F00}
- #content{ border:1px solid #FF0; height:200px}
- #footer{border:1px solid #00F}
代码阐明:以上CSS代码第一排,代表三者共用居中、宽度、高度款式,负面三个别离设置上(header)红色边框、中(content)黄色边框、下(footer)蓝边框。
2、案例对应HTML代码
- <div id="header"></div>
- <div id="content"></div>
- <div id="footer"></div>
3、最终成果截图
上中下结构DIV+CSS组织涉猎器效果截图
4、残破HTML代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>上中下结构 CSS5 在线演示</title>
- <link href="images/style.css" rel="stylesheet" type="text/css" />
- <!-- css5.com.cn -->
- </head>
- <body>
- <div id="header"></div>
- <div id="content"></div>
- <div id="footer"></div>
- </body>
- </html>
5、残缺CSS代码
- @charset "utf-8";
- body, div{margin:0; padding:0;font-style: normal;
- font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}
- body{color:#000000;bac公斤round:#FFF; text-align:center}
- a{color:#000000;text-decoration:none}
- a:hover{color:#BA2636;text-decoration:underline}
- #header,#content,#footer{margin:0 auto;width:400px; height:100px}
- /* 以上代码配置三个共用技俩 */
- #header{border:1px solid #F00}
- #content{ border:1px solid #FF0; height:200px}
- #footer{border:1px solid #00F}
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s52173.shtml