<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS练习</title>
<style type="text/css">
#nav{
width:400px;·/* 控制导航总宽度 */
}
/* 取消列表样式，内外补间为零 */
#nav ul{
list-style:none;
margin:0;
padding:0;
}
/* 横排：控制导航高度 ，使用float 指定每个li的宽度和高度 */
#nav li{
float:left;
width:100px;
height:30px;
line-height:30px; /* 文字垂直居中 指定行高为li高度 自动垂直居中 */
}
/* 将a标签区块化就可以指定高度 */
#nav a{
display:block;
height:100%;
text-decoration:none; /* 取消a标签下划线 */
text-align:center; /* 文字水平居中显示 */
background-color:#000;
color:#fff;
}
/* 鼠标放上效果 */
#nav a:hover{
background-color:#eee;
color:#000;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">首页</a></li>
<li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">个人介绍</a></li>
<li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">作品展示</a></li>
<li><a href="http://www.cnblogs.com/Orange-C/p/4042459.html">联系我们</a></li>
</ul>
</div>
</body>
</html>
