三种传统PC端⽹⻚布局⽅式：

  • 传统的DIV+CSS布局
  • HTML5+CSS3布局
  • 响应式布局

1. DIV+CSS布局

  • 此种布局是⽹⻚的HTML通过DIV标签+CSS样式表代码开发制作的(HTML)⽹⻚的统称。
  • DIV+CSS布局好处：便于维护，有利的SEO（⾕歌将⽹⻚打开速度作为排名因素及SEO因素），
  • ⽹⻚打开速度还原，符合web标准等。

image.png

2. HTML5+CSS3布局

HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签

    1. 这种语义化的特性提升了网页的质量和语义
    1. 减少了以前⽤于CSS 调⽤的class 和 id 属性

对搜索引擎的友好 新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。
HTML5的新标签元素有：

  • 定义⻚⾯或区段的头部；
  • 定义⻚⾯或区段的尾部；
  • ⻚⾯的逻辑区域或内容组合；
  • 定义正⽂或⼀篇完整的内容；

image.png
注意：使⽤HTML5 语义化标签的布局模式在IE9以下浏览器不兼容，可使⽤下⾯的代码解决。
一般会把html5.js文件放在资源包里，这样避免网络带来的加载不到的问题。

  1. <!--[if lt IE 9]>
  2. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
  3. type="text/javascript"></script>
  4. <![endif]-->

3. 响应式布局

  • 第⼀种：直接在⻚头中使⽤CSS样式修饰。

    1. <style type="text/css">
    2. /* 宽度范围 最⾼度*/
    3. @media all and (min-width:300px) and (max-width:800px){
    4.   body{
    5.     color:red;
    6.   }
    7. }
    8. @media all and (min-width:100px) and (max-width:300px){
    9.   body{
    10.     color:green;
    11.   }
    12. }
    13. </style>

  • 第⼆种：导⼊不同的css样式⽂件：

    <link media="all and (min-width:300px) and (max-width:800px)" rel="stylesheet" href="my.css" />
<link media="all and (min-width:100px) and (max-width:200px)" rel="stylesheet" href="test.css" />

    4.案例学习

    上次做的那个视频网站实在是丑陋，这次我学习了这么多的工具，必须对它美化美化。 ```html <!DOCTYPE html>