您的位置：首页 > Web前端 > CSS

css学习2----css动态菜单

2013-08-23 13:54 281 查看

这里是一个没有用table标签的动态效果菜单：
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test4_css.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="../css/test4_css.css" type="text/css"></link></head>

<body>
<div id="navigation">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">SPORTS</a></li>
<li><a href="#">WEATHER</a></li>
<li><a href="#">CONTACTS</a></li>
</ul>
</div>
</body>
</html>

css代码：
body{
border-color: #ffdee0;

}
#navigation{
width:200px;
font-family: Arial;

}
#navigation ul{
list-style-type: none; /* 去掉项目符号*/
margin: 0px;
padding:0px;
}

#navigation li{
border-bottom: 1px solid #ed9f9f; /* 添加下划线 */

}
#navigation li a{
display: block; /* 区块显示 */
padding: 5px 5px 5px 0.5em;
text-decoration: none;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
}
#navigation li a:link, #navigation li a:visited:visited { /*正常连接*/
background-color: #c11136;
color: #ffffff;

}
#navigation li a:hover{ /*鼠标经过时*/
background-color: #990020;
color: #ffff00;
}

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

标签：

相关文章推荐

新的分享

章节导航