标签：
项目中前端部分是依据美工的效果图开展工作的，当拿到一张效果图以后最主要也是最重要的部分就是进行网页结构的的布局工作，当布局完成以后前端部分基本完成了大半，所以根据项目中遇到的布局以及个人的一些想法将布局部分进行一次总结。上文提到的组合方式是在界面中体布局上采用语义化布局，在其内部采用div+css，实现整体语义化，局部盒子布局的方式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html><html><head> <title>文档的基本结构</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/base.css"> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/baseframe.js"></script> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/json2.js"></script> <![endif]--></head><body> <div class="main"> <header class="grp_header"></header> <nav class="grp_nav"></nav> <section class="grp_section"> <aside class="grp_aside"></aside> <article class="grp_article"></article> </section> <section class="grp_section"> <figure class="grp_figure">界面局部独立块使用</figure> <article class="grp_article"></article> </section> <footer class="grp_footer clear"></footer> </div></body></html></body></html> |
代码说明：
0、normalize.css为css样式重置，解决各种浏览器的默认样式带来的样式影响，base.css为文档样式表文件，可以理解为通用样式，当有具体业务时可以再次创建新文件用于保存业务样式，各个不同的业务创建不同的业务样式（个人见解 ）。同理于js文件，创建通用js方法文件，并创建业务js文件（baseframe.js）。
1、布局代码中为了兼容IE低版本，引入了支持html5标签的html5shiv.js文件；
2、为了支持低版本的JOSN方法，引入了json2.js文件；
3、在body中嵌入main样式，为了实现文档整体的样式调整，header表示文档头、页眉，nav表示导航也是一级菜单，article表示文档正文部分，aside表示边栏，section表示文档分块，footer表示文档页脚。
4、其中article中分为左右布局，左边为aside，右边为section，该出采用浮动布局，即float，左侧浮动，右侧进行块状格式化上下文，即bfc,实现左右不会越界，兼容性也没有问题。（注：bfc实现办法：overflow:hidden;*zoom:1）
标签：
原文地址：http://www.cnblogs.com/ynchuan/p/4672382.html
