网页设计布局

---

DIV+CSS网页布局

传统的DIV标签+CSS样式修饰的网页布局，用DIV标签将网页上需要设计的模块分开嵌套，
再在CSS里分开进行修饰，该布局的好处是：便于维护，网页打开速度还原

---

HTML5+CSS3布局

HTML5使用大量的语义化标签来代替传统布局中无意义的DIV标签，大大提高了网页的质量
对搜索引擎十分友好，并且减少了以前CSS对class属性的使用

---

响应式布局

<style type="text/css">
 /* 宽度范围 最⾼度*/
 @media all and (min-width:300px) and (max-width:800px){
 body{
 color:red;
 }
 }
 @media all and (min-width:100px) and (max-width:300px){
 body{
 color:green;
 }
 }
</style>

响应式布局里的CSS语句不再是全部生效，而是以条件进行判断，比如上述的CSS语句通过
屏幕的宽和高进行判断，再进行颜色的相应设置和调整

---

BootStrap

BootStrap 出自 Twitter（推特），是目前最受欢迎的前端响应式框架

核心：

• 栅格系统
  设置子元素在不同档位下的布局
• 响应式工具
  可以控制元素在各个档位下进行显示或隐藏

---