三种传统PC端⽹⻚布局⽅式：
（1）传统的DIV+CSS布局
（2）HTML5+CSS3布局
（3）响应式布局

1. DIV+CSS布局

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>DIV+CSS传统网页布局</title>
  7.     <style>
  8.         /*公共的css样式*/
  9.         *{margin:0px;padding:0px}
  10.         a{text-decoration: none;}
  11.         ul{list-style:none;}
  13.         /*页面头部样式*/
  14.         #header{
  15.             position:fixed;
  16.             top:0px;
  17.             width:100%;
  18.             border-bottom:1px solid #46474a;
  19.         }
  20.         #header .header-nav{
  21.             height:80px;
  22.             width:1200px;
  23.             background-color: goldenrod;
  24.             margin:0px auto;
  25.         }
  27.         /*页面导航样式*/
  28.         #nav{
  29.             height:60px;
  30.             margin-top:81px;
  31.             background-color:#46474a;
  32.         }
  34.         /*页面主体样式*/
  35.         #container{
  36.             width:100%;
  37.         }
  38.         #container .content{
  39.             width:1200px;
  40.             margin:0px auto;
  41.             margin-top:50px;
  42.         }
  43.         #container .content .main{
  44.             width:950px;
  45.             margin:0px auto;
  46.         }
  48.         /*页面主体中的电影排行列表样式*/
  49.         #container .content .main ul li{
  50.             display:block;
  51.             height:220px;
  52.             line-height:220px;
  53.             width:100%;
  54.             margin-bottom:20px;
  55.             border:1px dashed #f60;
  56.         }
  57.         .main ul li .info{
  58.             height:100%;
  59.             width:680px;
  60.             float:right;
  61.             background-color:snow;
  62.             border-bottom:1px solid #aaa;
  63.         }
  65.         .main ul li .info .info-right{
  66.             width:80px;
  67.             height:80px;
  68.             border:1px dashed orange;
  69.             float: right;
  70.             margin-top:70px;
  71.         }
  73.         .main ul li .info .info-left{
  74.             width:300px;
  75.             height:120px;
  76.             border:1px dashed orange;
  77.             margin-top:50px;
  78.         }
  79.         .main ul li .ids{
  80.             height:50px;
  81.             width:50px;
  82.             margin-top:85px;
  83.             margin-bottom:85px;
  84.             background-color:orange;
  85.             display:inline-block;
  86.         }
  88.         .main ul li .pic{
  89.             height:200px;
  90.             width:160px;
  91.             margin:10px 25px;
  92.             border:1px dashed green;
  93.             display: inline-block;
  94.         }
  96.         /*页面尾部样式*/
  97.         #footer{
  98.             height:300px;
  99.             background-color:#46474a;
  100.         }
  101.     </style>
  102. </head>
  103. <body>
  106.     <!-- 网页头部开始 -->
  107.     <div id="header">
  108.         <div class="header-nav">
  109.             <h2>使用div+CSS布局实现《猫眼电影》榜单排行界面的布局效果</h2>
  110.             网址：https://maoyan.com/board
  111.         </div>
  112.     </div>
  113.     <!-- 网页头部结束 -->
  115.     <!-- 导航开始 -->
  116.     <div id="nav">
  117.     </div>
  118.     <!-- 导航结束 -->
  120.     <!-- 页面主体开始 -->
  121.     <div id="container">
  122.         <div class="content">
  123.             <div class="main">
  124.                 <!-- 电影排行列表开始 -->
  125.                 <ul>
  126.                     <li>
  127.                         <div class="info">
  128.                             <div class="info-right"></div>
  129.                             <div class="info-left"></div>
  130.                         </div>
  131.                         <div class="ids"></div>
  132.                         <div class="pic"></div>
  133.                     </li>
  134.                     <li>
  135.                         <div class="info">
  136.                             <div class="info-right"></div>
  137.                             <div class="info-left"></div>
  138.                         </div>
  139.                         <div class="ids"></div>
  140.                         <div class="pic"></div>
  141.                     </li>
  142.                     <li>
  143.                         <div class="info">
  144.                             <div class="info-right"></div>
  145.                             <div class="info-left"></div>
  146.                         </div>
  147.                         <div class="ids"></div>
  148.                         <div class="pic"></div>
  149.                     </li>
  150.                     <li>
  151.                         <div class="info">
  152.                             <div class="info-right"></div>
  153.                             <div class="info-left"></div>
  154.                         </div>
  155.                         <div class="ids"></div>
  156.                         <div class="pic"></div>
  157.                     </li>
  158.                     <li></li>
  159.                     <li></li>
  160.                     <li></li>
  161.                     <li></li>
  162.                     <li></li>
  163.                     <li></li>
  164.                 </ul><!-- 电影排行列表结束 -->
  165.             </div>
  166.         </div>
  167.     </div><!-- 页面主体结束 -->
  170.     <!-- 页面尾部开始 -->
  171.     <div id="footer"></div>
  172.     <!-- 页面主体结束 -->
  173. </body>
  174. </html>

2. HTML5+CSS3布局

HTML5 可以让很多更语义化的结构化代码标签代替⼤量⽆意义的 div 标签
1. 这种语义化的特性提升了⽹⻚的质量和语义
2. 减少了以前⽤于CSS 调⽤的class 和 id 属性
对搜索引擎的友好 新的结构标签带来的是⽹⻚布局的改变及提升对搜索引擎的友好。
HTML5的新标签元素有：

<header> 定义⻚⾯或区段的头部；
 <footer> 定义⻚⾯或区段的尾部；
 <nav> 定义⻚⾯或区段的导航区域；
 <section> ⻚⾯的逻辑区域或内容组合；
 <article> 定义正⽂或⼀篇完整的内容；
 <aside> 定义补充或相关内容；

image.png
注意：使⽤HTML5 语义化标签的布局模式在IE9以下浏览器不兼容，可使⽤下⾯的代码解决。

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

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5语义话标签网页布局</title>
    <!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> 
    <![endif]-->
    <style>
        /*公共的css样式*/
        *{margin:0px;padding:0px}
        a{text-decoration: none;}
        ul{list-style:none;}

        /*页面头部样式*/
        #header{
            position:fixed;
            top:0px;
            width:100%;
            border-bottom:1px solid #46474a;
        }
        #header .header-nav{
            height:80px;
            width:1200px;
            background-color: goldenrod;
            margin:0px auto;
        }

        /*页面导航样式*/
        #nav{
            height:60px;
            margin-top:81px;
            background-color:#46474a;
        }

        /*页面主体样式*/
        #container{
            width:100%;
        }
        #container .content{
            width:1200px;
            margin:0px auto;
            margin-top:50px;
        }
        #container .content .main{
            width:950px;
            margin:0px auto;
        }

        /*页面主体中的电影排行列表样式*/
        #container .content .main ul li{
            display:block;
            height:220px;
            line-height:220px;
            width:100%;
            margin-bottom:20px;
            border:1px dashed #f60;
        }
        .main ul li .info{
            height:100%;
            width:680px;
            float:right;
            background-color:snow;
            border-bottom:1px solid #aaa;
        }

        .main ul li .info .info-right{
            width:80px;
            height:80px;
            border:1px dashed orange;
            float: right;
            margin-top:70px;
        }

        .main ul li .info .info-left{
            width:300px;
            height:120px;
            border:1px dashed orange;
            margin-top:50px;
        }
        .main ul li .ids{
            height:50px;
            width:50px;
            margin-top:85px;
            margin-bottom:85px;
            background-color:orange;
            display:inline-block;
        }

        .main ul li .pic{
            height:200px;
            width:160px;
            margin:10px 25px;
            border:1px dashed green;
            display: inline-block;
        }

        /*页面尾部样式*/
        #footer{
            height:300px;
            background-color:#46474a;
        }
    </style>
</head>
<body>


    <!-- 网页头部开始 -->
    <header id="header">
        <div class="header-nav">
            <h2>HTML5语义话标签实现《猫眼电影》榜单排行界面的布局效果</h2>
            网址：https://maoyan.com/board
        </div>
    </header>
    <!-- 网页头部结束 -->

    <!-- 导航开始 -->
    <nav id="nav">
    </nav>
    <!-- 导航结束 -->

    <!-- 页面主体开始 -->
    <section id="container">
        <div class="content">
            <article class="main">
                <!-- 电影排行列表开始 -->
                <ul>
                    <li>
                        <div class="info">
                            <div class="info-right"></div>
                            <div class="info-left"></div>
                        </div>
                        <div class="ids"></div>
                        <div class="pic"></div>
                    </li>
                    <li>
                        <div class="info">
                            <div class="info-right"></div>
                            <div class="info-left"></div>
                        </div>
                        <div class="ids"></div>
                        <div class="pic"></div>
                    </li>
                    <li>
                        <div class="info">
                            <div class="info-right"></div>
                            <div class="info-left"></div>
                        </div>
                        <div class="ids"></div>
                        <div class="pic"></div>
                    </li>
                    <li>
                        <div class="info">
                            <div class="info-right"></div>
                            <div class="info-left"></div>
                        </div>
                        <div class="ids"></div>
                        <div class="pic"></div>
                    </li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul><!-- 电影排行列表结束 -->
            </article>
        </div>
    </section><!-- 页面主体结束 -->


    <!-- 页面尾部开始 -->
    <footer id="footer"></footer>
    <!-- 页面主体结束 -->
</body>
</html>

3. 响应式布局

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

<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>

3.2第⼆种：导⼊不同的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" />