欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

实例构造之上中下结构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代码


  1. #header,#content,#footer{margin:0 auto;width:400px; height:100px} 
  2. /* 以上代码设置装备摆设三个共用款式 */ 
  3. #header{border:1px solid #F00} 
  4. #content{ border:1px solid #FF0; height:200px} 
  5. #footer{border:1px solid #00F} 

代码阐明:以上CSS代码第一排,代表三者共用居中、宽度、高度款式,负面三个别离设置上(header)红色边框、中(content)黄色边框、下(footer)蓝边框。

2、案例对应HTML代码


  1. <div id="header"></div> 
  2. <div id="content"></div> 
  3. <div id="footer"></div> 

3、最终成果截图

上中下结构DIV+CSS布局浏览器效果截图 上中下结构DIV+CSS组织涉猎器效果截图

4、残破HTML代码


  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>上中下结构 CSS5 在线演示</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- css5.com.cn --> 
  8. </head> 
  9. <body> 
  10. <div id="header"></div> 
  11. <div id="content"></div> 
  12. <div id="footer"></div> 
  13. </body> 
  14. </html> 

5、残缺CSS代码


  1. @charset "utf-8"; 
  2. body, div{margin:0; padding:0;font-style: normal; 
  3. font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
  4. body{color:#000000;bac公斤round:#FFF; text-align:center} 
  5. a{color:#000000;text-decoration:none}  
  6. a:hover{color:#BA2636;text-decoration:underline} 
  7.  
  8. #header,#content,#footer{margin:0 auto;width:400px; height:100px} 
  9. /* 以上代码配置三个共用技俩 */ 
  10. #header{border:1px solid #F00} 
  11. #content{ border:1px solid #FF0; height:200px} 
  12. #footer{border:1px solid #00F} 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s52173.shtml