                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /企业网站综合布局实战

如何实现“当前页的页码要显示红色背景”？

<!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="#">&lt;</a>  
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">...</a>
    <a href="#">&gt;</a>
    <a href="#">末页</a>
</div>


</body>
</html>

一起走到

2015-06-08

源自：企业网站综合布局实战 4-7

关注问题我要回答

2668

操作

收起

3 回答

jiankeke
2016-05-04

加一个样式：

.page a:focus{

background-color:red;

}

3 回复有任何疑惑可以回复我~

#1

慕移动5074419

牛逼啊大佬，来自小弟三年后的膜拜

2019-03-25 回复有任何疑惑可以回复我~

qq_夏_7
2016-01-22

<script>

$(function(){

$("a").click(function(){

var $lis=$("a");

$lis.removeClass("active");

$(this).addClass("active");

}).hover(

function(){

$(this).addClass("move");

},

function(){

$(this).removeClass("move");

}

)

})

</script>

0 回复有任何疑惑可以回复我~

chavin
2015-06-08

<a href="#" class="selected"><</a>

<style type="text/css">

.page .selected{

background-color:red;

}

</style>

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

企业网站综合布局实战

参与学习 157043 人
解答问题 1984 个

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

本课相似问答

5 回答"当前页的页码要显示红色背景" 如何实现？

2 回答logo的背景色显示不出来

1 回答为什么背景色没有显示？

1 回答请大神教我如何定义当前页码的CSS样式？

2 回答为什么只显示em背景只显示蓝色

搜索更多本课相关问答

如何实现“当前页的页码要显示红色背景”？

我要回答关注问题

意见反馈帮助中心 APP下载