使用Python进行网站页面开发——网页布局介绍

一、传统的DIV+CSS布局

1.HTML5语义化标签
<header>定义页面或区段的头部(页眉)
<footer>定义页面或区段的尾部（页脚)
<nav>定义页面或区段的导航区域（导航)
<section>页面的逻辑区域或内容组合(区块)
<article>定义正文或一篇完整的内容(文章)
<aside>定义补充或相关内容(侧边栏)

作用：提高了搜索引擎优化 。

2.响应式布局
第一种:直接在页头中使用CSS样式修饰。
 

<style type="textcss">
/*宽度范围最高度*/
@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样式文件：

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

注意:使用HTML5语义化标签的布局模式在IE9以下浏览器不兼容，可使用下面的代码解决。

<!--[if lt lE 9]>

    <script src="http:/html5shiv.googlecode.com/svn/trunk/html5.js" type="textljavascript"></script>

<![endif]-->