下面是html代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width = device-width,initial-scale=1">
<title>index01</title>
<link href="style01.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="heading">第一</div>
<div class="container">
<div class="left">第二</div>
<div class="main">第三</div>
<div class="right">第四</div>
</div>
<div class="footing">第五</div>
</body>
</html>
下面是css3代码
*{
margin:0px
padding: 0px
}
.heading,
.container,
.footing{
margin: 10px auto
}
.heading{
height: 100px
background-color: red
}
.left,
.right,
.main{
height: 300px
background-color: yellow
}
.footing{
height: 100px
background-color: gray
}
<!--media="only screen and (max-width:640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表-->
@media screen and (min-width: 960px){
.heading,
.container,
.footing{
width:960px
}
.left,
.main,
.right{
float: left
height: 500px
}
.left,
.right{
width:200px
}
.main{
margin: 0px 5px
width:550px
}
.container{
height: 500px
}
}
@media screen and (min-width: 600px) and (max-width: 960px){
.heading,
.container,
.footing{
width: 600px
}
.left,
.main{
float: left
height:400px
}
.right{
display: none
}
.left{
width: 160px
}
.main{
width: 435px
margin-left: 5px
}
.container{
height: 400px
}
}
@media screen and (max-width: 600px){
.heading,
.container,
.footing{
width: 400px
}
.left,
.right{
width: 400px
height: 100px
}
.main{
margin-top: 10px
width:400px
height:200px
}
.right{
margin-top: 10px
}
.container{
height: 420px
}
}
这样就可以实现简单的响应式布局！如果你想要了解的话，可以到华清远见学习一下。我就是在那里学习的。
<header>标签
<header>标签定义文档的页眉（介绍信息）
用法：
<header><h1>windyauang的Dreamweaver专栏</h1></header>
<nav>标签
<nav>标签定义导航链接的部分
用法：
<nav>
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
</ul>
</nav>
<section>标签
<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
用法： <section>
<h1>标题一</h1>
<p>文章段落内容</p>
</section>
<article>标签
<article>标签定义外部的内容。 外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。总之，可以理解为article所表示的就是文章内容。
用法：<article>
<a href="#">文章内链接</a><br />
文章内容文章内容文章内容
</article>
<aside>标签
<aside>标签定义article以外的内容。aside的内容应该与article的内容相关，如上图所示，它类似于布局中的辅助侧边栏。
用法： <aside>
<h4>小标题</h4>
段落内容段落内容
</aside>
<footer>标签
<footer>标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息，也就是类似于版权信息的东西。
用法： <footer>
页脚文字，版权信息等
</footer>
整体的Html5代码应该如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<header><h1><a href="#">windyauang的Dreamweaver专栏-Html5布局示范文档</a></h1></header>
<nav>
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li></ul>
</nav>
<section>
<header>内容标题</header>
<article>文章内容</article>
<footer>文章版权内容</footer>
</section><aside>相关内容</aside>
<footer>页脚、页面版权内容</footer>
</body>
