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

CSS实现菜单栏制作，鼠标经过变色

2014-04-09 21:17 603 查看

CSS样式为：

<style type="text/css">

#navigation
{
width:200px;
font-family:Arial;
}
#navigation ul
{
list-style-type:none;                 /* 不显示项目符号*/
margin:0px;
padding:0px;
text-decoration:none;
}

#navigation li
{
border-bottom:1px solid #ED9F9F;  /* 添加标签<li>的下划线*/
}

#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 /* 超链接正常状态、被访问过的状态*/
{
background-color:#c11136;            /* 设置背景色*/
color:#FFFFFF;                       /* 设置文字颜色*/
}
#navigation li a:hover      /*鼠标经过时*/
{
background-color:#990020;  /* 改变背景色*/
color:#ffff00;             /* 改变文字颜色*/
}
</style>

HTML前台代码：

<body>
<form id="form1" runat="server">

<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="#">Contact Me</a></li>

</ul>
</div>
</form>
</body>

初始效果：

鼠标经过效果：

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

标签：

相关文章推荐

新的分享

章节导航