用CSS控制菜单效果(鼠标悬停变化)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 id="Head1" runat="server">
<title>无标题页</title>
<style type="text/css">
body
{
margin:0;
padding:30px;
font:bold 14px;
}
span
{
color:#fff;
display:block;
padding:4px,39px;
}
ul
{
position: relative;
margin:0;
padding:0;
width:800;
height:131;
list-style-type:none;
background:url(3.png) no-repeat;
}
li#bu1 a,li#bu2 a,li#bu3 a,li#bu4 a
{
position:absolute;
width:110px;
height:24px;
background:url(2.jpg) no-repeat 0 0;
bottom:0;
}
li#bu1 a
{
left:0;
}
li#bu2 a
{
left:111px;
}
li#bu3 a
{
left:222px;
}
li#bu4 a
{
left:333px;
}
li#bu1 a:hover,li#bu2 a:hover,li#bu3 a:hover,li#bu4 a:hover
{
background:url(1.jpg) no-repeat 0 0;
}
</style>
</head>
<body>
<ul>
<li id=bu1><a href="#"><span>home</span></a></li>
<li id=bu2><a href="#"><span>one</span></a></li>
<li id=bu3><a href="#"><span>two</span></a></li>
<li id=bu4><a href="#"><span>five</span></a></li>
</ul>
</body>
</html>
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
