一、传统的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]-->