HTML学习笔记（网页布局）

一、传统的DIV+CSS布局

<div id="header">

<div id="nav">

<div class="article">

<div class="section:>                                                                           <div id="sidebar">

<div id="footer">

二、HTML5语义化标签+CSS3布局

HTML5语义化标签

<header>定义页面或区段的头部（页眉）

<footer>定义页面或区段的尾部（页脚）

<nav>定义页面或区段的导航区域（导航）

<section>页面的逻辑区域或内容组合（区块）

<article>定义正文或一篇完整的内容（文章）

<aside>定义补充或相关内容（侧边栏）

HTML5语义化标签，提高了搜索优化，但存在不兼容问题，会导致部分内容显示不出来。

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

<!--[if lt IE 9]>

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

<![endif]-->

三、响应式布局

第一种：直接在页头中使用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>

第二种：导入不同的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"/>