一、效果

二、代码

1、html文件

<!DOCTYPE>
<html><head><meta charset="utf-8"/><title>网页名称</title><link rel="stylesheet" href="html5.css"></head><body><header><h1>页眉header</h1></header><div id="container"><nav><a href="http://www.xxxxx.com">菜单一</a><a href="http://www.xxxxx.com">菜单二</a><a href="http://www.xxxxx.com">菜单三</a><a href="http://www.xxxxx.com">菜单四</a><a href="http://www.xxxxx.com">菜单五</a><a href="http://www.xxxxx.com">菜单六</a><a href="http://www.xxxxx.com">菜单七</a><a href="http://www.xxxxx.com">菜单八</a></nav><aside><h3>侧栏Aside</h3><p>侧栏内容</p><p>侧栏内容</p><p>侧栏内容</p><p>侧栏内容</p><p>侧栏内容</p></aside><section><article><header><h1>文章页眉Article Header</h1></header><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><footer><h2>文章页脚Article Footer</h2></footer></article><article><header><h1>文章页眉Article Header</h1></header><p>正文内容</p><p>正文内容</p><p>正文内容</p><footer><h2>文章页脚Article Footer</h2></footer></article></section><aside><h3>侧栏Aside</h3><p>侧栏内容</p><p>侧栏内容</p><p>侧栏内容</p><p>侧栏内容</p><p>侧栏内容</p></aside><footer><h2>页脚Footer</h2></footer></div></body>
</html>

2、css文件

body{background-color:#CCCCCC;margin::0px auto;max-width:2000px;boder-color:#FFFFFF;color:black;
}
header{background-color:#2289F0;display:block;color:#FFFFFF;text-align:center;
}
h1{font-size:72px;margin:0px;txet-align:center;
}
h2{font-size:24px;margin:0px;text-align:center;
}
h3{font-size:18px;magin:0px;text-align:center;
}
nav{display:block;width:100%;float:left;text-align:center;background-color:white;padding-top:20px;padding-bottom:20px;
}
nav a:link,nav:visited{display:inline;border-bottom:3px solid #fff;padding:10px;text-decoration:none;font-weight:bold;margin:5px;
}
nav a:hover{color:white;background-color:#F47D31;
}
nav h3{margin:15px;
}
#container{background-color:#CCC
}
section{display:block;width:60%;float:left;
}
article{background-color:#eee;display:block;margin:10px;padding:10px;
}
article header{padding:5px;
}
article footer{padding:5px;
}
article:h1{font-size:18px;
}
aside{display:block;width:20%;float:left;
}
aside:h3{margin:15px;
}
aside p{margin:15px;font-weight:bold;
}
footer{clear:both;display:block;background-color:#2289F0;color:#FFFFFF;text-align:center;padding:15px;
}
footer h2{font-size:14px;color:white;
}
a{color:#F47D31;
}
a:hover{text-decoration:underline;
}