主页 / 建站知识 /

纯CSS制作菜单栏当鼠标经过时会变色的

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设
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>

初始效果
 
鼠标经过效果
上一篇：表格设置table-layout:fixed后对单元格宽度设置无效 下一篇：网页布局之响应式设计简明指南

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by