个人网站导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人网站</title>
<style>
/*header begin*/
.header {
/*参考色块*/
background-color:black;
}
.header .content {
width: 1000px;
height:60px;
/*参考色块*/
background-color:black;
margin:0 auto;
}
/*头部内容区中的导航*/
.header .content .nav {
margin-top:0;
margin-bottom: 0;
padding-left:0;
}
.header .content .nav .item {
list-style-type: none;
}
/*头部导航中的链接样式:重点*/
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height:60px;
line-height:60px;
color:white;
text-decoration-line:none;
padding:0 15px;
text-align:center;
}
.header .content .nav .item a:hover {
color:white;
font-size: 1.1rem;
}
/*header end*/
/*虚拟的主体部分*/
.container {
width:1000px;
height:800px;
margin:5px auto;
background-color: lightgray;
}
/*footer begin*/
.footer {
background-color: lightgrey;
}
.footer .content {
width:1000px;
height:60px;
background-color:#444;
margin:0 auto;
}
.footer .content p {
text-align:center;
line-height:60px;
}
.footer .content a {
text-decoration:none;
color:lightgrey;
}
.footer .content a:hover {
color: white;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content" >
<ul class="nav" >
<li class="item"><a href="">我的主页</a></li>
<li class="item"><a href="">个人简介</a></li>
<li class="item"><a href="">网站首页</a></li>
<li class="item"><a href="">设计论坛</a></li>
<li class="item"><a href="">联系我们</a></li>
</ul>
</div>
</div>
</body>
</html>