简单的css样式控制分页效果

记录下所见所学~~~

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*{ margin:0px; padding:0px;}
.wbox { margin:20px 0px 0px 20px;}
.wbox a{ background:#FC0; border:1px solid #F90; padding:2px 5px; margin:0px 2px; float:left; display:block; text-decoration:none; font-size:12px; color:#000;}
.wbox a.arrow:hover{ background:#6F6; padding:2px 5px; margin:0px 2px; float:left; opacity:0.5; filter:alpha(opacity=50);}
.wbox a:hover{ position:relative; background:#6F6; padding:4px 10px; margin:-2px -6px; opacity:0.5; filter:alpha(opacity=50); z-index:9999;}
.wbox a.hover{position:relative; background:#6F6; padding:4px 10px; margin:-2px -6px; opacity:0.5; filter:alpha(opacity=50);}
</style>
<body>
<div class="wbox">
<a href="#" class="arrow"><<</a>
<a href="#" class="hover">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#" class="arrow">>></a>
</div>
</body>
</html>

　此时背景颜色可以有漂亮背景图片替代~~~

 

posted @ 2012-09-12 23:47  laugh  阅读(390)  评论(0)  编辑  收藏  举报