div+css创建导航栏

来源：互联网发布：站长工具域名备案编辑：程序博客网时间：2024/06/07 03:23

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;
}

效果图如第四步所示:

这里不方便截图大家可以试一试看看

1 0