1、准备一个html页面代码
<?xml version="1.0" encoding="UTF-8" ?>
<!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 type="text/css">
</style>
</head>
<body>
</body>
</html>
2、为导航栏创建一个div块以及添加相应的css,以及导航栏元素(ul、li)
</div>
<div class="bt">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">生活大小事</a></li>
<li><a href="#">公告</a></li>
<li><a href="#">校园美景</a></li>
<li><a href="#">个人主页</a></li>
</ul>
</div>
</div>
.dt{
font-family:Cursive,New York,Helvetica;
width:980px;
height:45px;
background-color:#983794;;
margin-top:0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
红色的3行css是将导航栏的边框设置为圆角,但是IE8及其以下的IE浏览器不支持。
效果图为:
3、为元素li加入css
.bt ul li{
list-style-type:none;/*将第二步中的小黑圆去除*/
width:150px;
float:left;
display:inline; /*将li水平显示*/
line-height:45px; /*将此高度设置为与dt中的height一样,实现垂直居中的效果*/
text-align:center;
height:45px;
}
效果图如下:
4、为超链接加入css
.bt a{
display:block;
align:center;
font-size:25px;
color:#FFFAF0;
text-decoration:none;
}
效果图如下:
5、添加鼠标滑过特效
.bt a:hover{
background-color:#A15B76;
color:#FFCCCC;
}
效果图如第四步所示:
这里不方便截图大家可以试一试看看