SOURCE

<div id="container">
<div id="header">
<header>
  <h2>IE浏览器</h2>
  </header>
  </div>
<div id="nav">
<nav>
<a href="/html/">颜色种类</a><br>
<br>
<a href="/css/">字体大小</a><br>
<br>
<a href="/js/">样式控制</a><br>
<br>
<a href="/jquery/">模块布局</a><br>
<br>
<a href="/html/">绝对定位</a><br>
<br>
<a href="/html/">网页布局</a><br>
<br>
</nav>
<br>
</div>
<div id="article">
<article>
<h1>Internet Explorer 9</h1> 
1.选择你喜欢的颜色: <input type="color" name="favcolor"><br>
<input type="submit"><br>
 2.选择周: <input type="week" name="year_week">
<input type="submit"><br>
3.滑动条:<br>
<input type="range" name="points" min="1" max="10"><br>
4.音频:<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="http://www.runoob.com/try/demo_source/horse.ogg" type="audio/mpeg">
</audio><br>
5.表单：<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
</article>
</div>
<div id="alide">
<aside>
<canvas id="myCanvas" >
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#808080";
ctx.fillRect(0,0,150,75);
</script>
<p>html+css+javascript</p>
<video width="240" height="150" controls="true">
<source src="http://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video><br>
</aside>
</div>
<div id="footer">
版权 © runoob.com</div>
</div>

#container
{
  border:4px;
  width:700px;
}
#header
{
  padding:1px;
  background-color:#C0C0C0;
}
h2
{
  margin-bottom:0;text-align:center;
}
#nav
{
  background-color:white;
  height:330px;
  width:100px;
  float:left;
}
#article
{
  background-color:#cococo;
  height:330px;
  width:360px;
  float:left; 
}
#alide
{
  background-color:white;
  height:330px;
  width:240px;
  float:left;
}
#myCanvas
{
  width:200px;
  height:100px
  border:1px solid #c3c3c3;
}
#footer
{
  background-color:#C0C0C0;
  clear:both;
  text-align:center;
}
#p1
{
  height:430px;
}