一起走到
2015-06-08 00:51
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>页码的制作</title> <style> /*在此定义相关CSS样式*/ .page { height:40px; } .page a { display:inline-block; border:1px solid #E8E8E8; color:black; margin:5px; padding:5px 10px; } .page a:link,.page a:visited { text-decoration:none; } .page a:hover,.page a:active { background-color:red; } </style> </head> <body> <!--在此制作页码的基本结构--> <div class="page"> <a href="#">首页</a> <a href="#"><</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">...</a> <a href="#">></a> <a href="#">末页</a> </div> </body> </html>
加一个样式:
.page a:focus{
background-color:red;
}
<script>
$(function(){
$("a").click(function(){
var $lis=$("a");
$lis.removeClass("active");
$(this).addClass("active");
}).hover(
function(){
$(this).addClass("move");
},
function(){
$(this).removeClass("move");
}
)
})
</script>
<a href="#" class="selected"><</a>
<style type="text/css">
.page .selected{
background-color:red;
}
</style>
企业网站综合布局实战
157042 学习 · 1984 问题
相似问题