登录 | 注册

上中下结构DIV CSS布局实例

首页 > Web前端 > CSS 2016-11-29 14:17:54 浏览次 共 条评论

收藏赞(分享

实例布局之上中下结构 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高度 值

三、实例完整代码

完成案例测试或制作,一般做初始化模板基础上进行,以免照成不同浏览器兼容不好。这里做 提供 初始化模板基础上继续进行。

上中下命名分别为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>上中下结构   在线演示</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www. .com --> 
  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 "5B8B4F53",Arial, Helvetica, sans-serif} 
  4. body{color:#000000;background:#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} 

四、效果浏览与打包下载

1、在线效果浏览

查看案例

2、实例完整文件打包下载

立即下载(1.712KB

免责声明:本文来源于,由网友提供或网络搜集,仅供个人研究、交流学习使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。优知网会定期发布Web前端相关趋势文章,包括 Web标准 HTML5 CSS JS JQuery Ajax 网页特效 等领域,敬请关注!

分享到
人收藏5 收藏
 
我要评价
 
 

咨询中心

优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博