 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 极简洁的标准CSS导航菜单代码 |
| 来源：源码爱好者 更新时间：2011/4/4 3:07:26 阅读次数： 我要投稿 |
|
<!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>
<title>CSS横向菜单</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 4px;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 3px 10px 2px 10px;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">CSS教程</a></li>
<li><a href="#">脚本资源</a></li>
<li><a href="#">站长学院</a></li>
<li><a href="#">软件下载</a></li>
<li><a href="#">CSS教程</a></li>
<li><a href="#">脚本资源</a></li>
<li><a href="#">站长学院</a></li>
<li><a href="#">WEB2.0</a></li>
</ul>
</div>
</body>
</html> |
| 特效说明： |
| 极简洁的标准型CSS菜单，代码少，采用常见的DIV/UL/LI列表的形式，修改二次开发都方便。 |
|
| 上一篇文章： 完全语义化的JS网页选项卡下一篇文章： 自动固定在网页顶部的悬浮菜单栏 |
|
|
|
注册 登录
