How we can put press effect on anchor tag by use of css for ie 7
How I can put press effect on anchor tag.
This is my css & html:
<!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>Untitled Page</title>
<style> .navigation{
height:28px;
line-height:28px;
font-size:11px;
font-weight:bold;
text-transform:uppercase;
float:left;
padding-top:20px;
}
.navigation ul li{
margin:0px;
list-style-type:none;
float:left;
padding-right:5px;
}
.navigation ul li a{
list-style-type:none;
display:block;
float:left;
text-decoration:none;
padding-left:12px;
background:url("../images/nav-bg.png") 0 -56px no-repeat;
color:#999;
}
.navigation ul li a span{
list-style-type:none;
display:block;
float:left;
text-decoration:none;
cursor:pointer;
padding-right:12px;
background:url("../images/nav-bg.png") right -84px no-repeat;
}
.navigation a:hover{
background:url("../images/nav-bg.png") 0 0 no-repeat;
}
.navigation a:hover span{
开发者_如何学Go background:url("../images/nav-bg.png") right -28px no-repeat;
}
.navigation a.activetab{
background:url("../images/nav-bg.png") left -112px no-repeat !important;
}
.navigation a.activetab span{
background:url("../images/nav-bg.png") right -140px no-repeat !important;
color:#fff;
}</style>
</head>
<body>
<div class="navigation">
<ul>
<li><a href="javascript:void(0):" class="activetab"><span>Dashboard</span></a></li>
<li><a href="javascript:void(0):"><span>Courses</span></a></li>
<li><a href="javascript:void(0):"><span>Reports</span></a></li>
<li><a href="javascript:void(0):"><span>Message Board</span></a></li>
</ul>
</div>
</body>
</html>
First of all, don't use images to get this effect since they add to the page weight, need time to be downloaded and in particular are very inflexible.
Use CSS3 techniques instead. For example, check the source at http://ubuwaits.github.com/css3-buttons/ or read the tutorial at http://www.uxrevisions.com/freebies/css3-buttons-examples-with-source-code/181/ or any other tutorial on the CSS3 buttons that are available elsewhere
Then grab CSS3 Pie and make it work in IE6 and up.
Maybe you could try using the a:active pseudo-class instead of a.activetab.
加载中,请稍侯......
精彩评论