css翻转效果

来源：互联网发布：c语言四则运算程序a,b 编辑：程序博客网时间：2024/05/05 10:21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/css_main.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">

ol {
list-style-type:none;
}
ol li{
float :left;
margin-right:2px;
}
a {
display:block;
line-height:50px;
width:140px;
text-align:left;
/*background:url(../images/top_menu_down.png) 0 0 no-repeat;*/

}
a:hover,a:focus{background:url(../images/top_menu_over.png) 0 0 no-repeat;}
a:active{
background:url(../images/top_menu_down.png) 0 0 no-repeat;
}
a div {
float:left;
display:block;
margin-top: 5px; margin-left: 5px; margin-right: 0.6em;
}
</style>
</head>
<body class="body">
<div style="margin-top: 50px;">
<ol >
<li><a href='#'><div class="sprite top advset" /></div>第一项</a></li>
<li><a href='#'><div class="sprite top advset"   /></div>第二项</a></li>
<li><a href='#'><div class="sprite top advset"   /></div>第三项</a></li>
<li><a href='#'><div class="sprite top advset" ></div>第四项</a></li>
</ol>
        </div>
<script>
</script>
</body>
</html>