您的位置：首页 > 其它

互动导航条

2015-07-24 23:12 316 查看

摘自《网页开发手记》

1、效果图：

2、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" xml:lang="en" lang="en">
<head>
<title>互动导航条布局</title>
<style type="text/css">
*{
margin: 0px; padding: 0px
}
ul{
list-style: none;
}
#nav{
width: 425px;
height: 22px;
margin: 0px auto;
background-color: #dddddd;
}
li{
width: 98px;
height: 20px;
border: 1px solid #d00;
margin-left: 5px;
text-align: center;
color: #333;
background-color: #cf3;
float: left;
}
li:hover{
background-color: #69c;
color: #fff;
}
li:active{
background-color: #f00;
}
</style>
</head>
<body>
<ul id="nav">
<li>
<a href="#" title="这是首页的链接">首页</a>
</li>
<li>
<a href="#" title="这是产品的链接">产品</a>
</li>
<li>
<a href="#" title="这是企业文化的链接">企业文化</a>
</li>
<li>
<a href="#" title="这是留言区的链接">留言区</a>
</li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航