服务咨询热线:

022-88711099

当前位置:

CSS+DIV网站导航条

发布时间:2014-7-21 15:06 作者:伟伟 访问量:1060

CSS+DIV网站导航条

<!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>无标题文档</title>
<style>
.nav ul{
width:980px;
margin:0px auto;
height:38px;
padding:0;
}
.nav ul li{
float:left;list-style-type:none
}
.nav ul li a{
width:80px;/*设置元素宽为80px*/
height:28px;/*设置高度为28px*/
line-height:28px;/*设置行距为28px,让文字在每行的中间位置*/
background:red;/*设置元素的背景为红色*/
color:#FFF;/*文字颜色是白色*/
margin:2px 1px;/*每块的间距*/
font-size:12px;/*用12号字*/
display:block;/*这个比较关键,因为a本身就是联级元素,本身不具有宽高,用这个把它变成块级元素,这样前面设置的宽和高就能起作用了*/
text-align:center;/*让文本居中*/
text-decoration:none; /*去掉下划线*/
}
.nav ul li a:hover{
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
</style>
</head>

<body>
<div class="nav">
 <ul>
   <li><a href="#">首页</a></li>
   <li><a href="#">导航1</a></li>
   <li><a href="#">导航2</a></li>
   <li><a href="#">导航3</a></li>
   <li><a href="#">导航4</a></li>
   <li><a href="#">导航5</a></li>
   <li><a href="#">导航6</a></li>
 </ul>
</div>
</body>
</html>