页面布局
在前端开发中页面布局总是最开始的工作，就像盖楼时，先搭框架，然后再填砖，前端也是一样的，先做好页面的布局工作。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
div 元素是用于分组 HTML 元素的块级元素。
div默认就是垂直平铺（垂直排列）；水平的需要加style="float:left;"。
在学习了盒模型、块级元素和行内元素得到概念后，我们知道绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局 复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用，提高了开发效率，同时分离后美工和网站开发人员也可以协同合作，进一步提高了开发效率和整体网站的质量。
常规流式布局
元素按照自身的常规显示方式显示，有两个特点：
1.元素按照自身HTML元素定义的位置显示（怎么写的怎么显示）
2.元素按照自身的常规显示特性显示
比如块级元素垂直排列，行级元素水平排列。
以前没学布局时，其实是用的就是常规流布局。
布局步骤
一、总体布局
先布局出我们想要的页面的具体显示的框架。比如我们先把一个网页看成一个大的div。
二、使用DIV进行分割
拿例来说我们网页整体分为上中下三部分，所以我们可以使用三个div来先大体分割一下该网页.
三、使用CSS来控制DIV布局
使用CSS样式来控制布局的具体宽、高，并使用显著的背景或border标注，在需要修改时可以清楚的看到该模块。
四、使用以上三步进行细分
在每一模块都要通过以上三步具体划分。
部分实例代码
html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>山东理工大学</title> 6 <link rel="stylesheet" href="css/index.css"> 7 <link rel="shortcut icon" href="img/favicon.ico"> 8 </head> 9 <body> 10 <!--总体--> 11 <div id="contaion"> 12 <!--头部--> 13 <div id="header"> 14 <div id="head_top"></div> 15 <div id="head_bottom"></div> 16 </div> 17 <!--轮播--> 18 <div id="lunbo"></div> 19 <!--内容--> 20 <div id="content"> 21 <!-- 左边--> 22 <div class="content_in content_01"> 23 <div class="content_first cot_in content_01_top"></div> 24 <div class="content_01_bot content_01_bot"></div> 25 </div> 26 <!-- 中间--> 27 <div class="content_in content_02"> 28 <div class="content_first cot_in content_02_top"></div> 29 <div class="content_01_bot content_02_bot"></div> 30 </div> 31 <!-- 右边--> 32 <div class="content_in content_03"> 33 <div class="content_first cot_in content_03_top"></div> 34 <div class="content_01_bot content_03_bot"></div> 35 </div> 36 </div> 37 <!--头部标签--> 38 <div id="foot_nav"></div> 39 <!--头部标签--> 40 <div id="foot"></div> 41 </div> 42 </body> 43 </html>
css
1 /* CSS Document */ 2 3 *{ 4 margin: 0px; 5 padding: 0px; 6 } 7 /*总体*/ 8 #contaion{ 9 width: 100%; 10 height: 100%; 11 border: 1px solid; 12 } 13 /*头部*/ 14 #header{ 15 width: 72%; 16 height: 180px; 17 border: 1px solid; 18 margin: 0 auto; 19 } 20 #head_top{ 21 width: 100%; 22 height: 130px; 23 border-bottom: 1px solid #ccc; 24 } 25 #head_bottom{ 26 width: 100%; 27 height: 50px; 28 } 29 /*轮播*/ 30 #lunbo{ 31 width: 100%; 32 height: 285px; 33 border: 1px solid; 34 } 35 /*内容*/ 36 #content{ 37 width: 72%; 38 height: 600px; 39 border: 1px solid; 40 margin: 0 auto; 41 }
代码执行显示的布局效果
