一、效果
二、代码
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;
}
3、注意事项
html文件与css文件应位于同一文件夹下。