HTML部分： <!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/moveCss.css" /> </head> <body> <nav id= ...
HTML部分：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/moveCss.css" />
</head>
<body>
<nav id="nav">
<section class="center">
<h1 class="logo">LOGO</h1>
<ul class="link">
<li class="active"><a href="###">首頁</a></li>
<li><a href="###">資訊</li>
<li><a href="###">視頻</a></li>
<li><a href="###">聊天</a></li>
<li><a href="###">聯繫我們</a></li>
</ul>
</section>
</nav>
<header></header>
<section></section>
<footer></footer>
</body>
</html>
CSS部分：
body,h1,ul{
margin: 0; /*去掉外邊距*/
padding: 0; /*去掉內邊距*/
}
a{
text-decoration: none; /*所有超鏈接去掉下劃線*/
}
ul{
list-style: outside none none; /*去掉ul樣式*/
}
#nav{
width: 100%;
height: 70px;
background-color: #CCCCCC;
}
.center{
width: 1280px;
height: 70px;
margin: 0 auto; /*水平居中*/
}
.logo{
width: 50px;
height: 70px;
float: left;
line-height: 70px;
}
.link{
width: 650px;
height: 70px;
line-height: 70px; /*行間居中*/
float: right;
}
.link li{
width: 100px;
float: left;
text-align: center; /*文字居中*/
}
.link a{
display: block; /*塊極化元素*/
}
.link a:hover,
.active{
background-color: #C0C0C0; /*滑鼠移入鏈接時,li的背景色變化*/
}
