css3 选择器 简单的分页 css选择器 ul.pagination li a:hover:not(.active) 选择除了类名为 active的项目

最新推荐文章于 2023-06-18 13:06:08 发布
最新推荐文章于 2023-06-18 13:06:08 发布
阅读量6k 收藏 3
点赞数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习 分页</title>
    
    <link type="text/css" href="css/style.css"/>
     <script src="js/jquery-3.3.1.js"></script>
     <style>
  *{margin:0;
padding:0;
list-style:none;}
ul.pagination{
display:inline-block;}
ul.pagination li{
display:inline;}
ul.pagination li:first-child a{
  border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul.pagination li a{
color:black;
float:left;
padding:8px 16px;
text-decoration:none;
border: 1px solid #ddd;
  margin: 0 4px;
  font-size: 22px;}
ul.pagination li a.active{
background-color: #4CAF50;
    color: white;
 
transition:background-color 2s;
}
ul.pagination li a:hover:not(.active){
background-color:#ddd;}
     </style>
</head>
<body>
<h2>简单的分页</h2>
        <ul class="pagination">
          <li><a href="#">«</a></li>
          <li><a href="#">1</a></li>
          <li><a class="active" href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">»</a></li>
        </ul>
        
    <script>
$(document).ready(function(e) {
           
        });
    </script>
</body>
</html>
liu709127859
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular ui.bootstrap.pagination分页
08-31
然后，创建了一个名为'ctrl'的控制器，其中包含了处理分页逻辑的代码。 在控制器中，有几个关键的变量和方法： 1. `$scope.reportData`：存储着从服务器获取的数据。 2. `$scope.maxSize`：定义了显示的分页按钮的...
用css来实现除了选中标签外的其他标签的背景颜色设置为指定颜色
qq_44929535的博客
11-30 2077
用css来实现除了选中标签外的其他标签的背景颜色设置为指定颜色 ul li a:not(.active) {background-color: #ddd;} 以上css实现了除了选中标签外的其他标签的背景颜色设置为灰色 ul li a:hover:not(.active) {background-color: #ddd;} 以上css是实现了当鼠标移动到某个元素上时，当这个元素不是被选中的元素时就置灰 ...
css3常用生僻标签
前端小99的博客
07-09 943
backgroumd-repeat(repeat-x)平铺 background-repeat:no-repeat; 设置不平铺 background-position 属性改变图像在背景中的位置: 简写形式 backgrond:（#ffffff url() no-repeat right top） background-attachment:fixed;固...
CSS基础学习--18 导航栏
yyxhzdm的博客
06-18 2571
如果要在每个选项上添加边框，可以在每个 元素上添加。导航条基本上是一个链接列表，所以使用 和 元素非常有意义。这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。对于所有的链接宽度相等，浮动 元素，并指定为 元素的宽度。接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。在我们的例子中我们将建立一个标准的 HTML 列表导航栏。我们只需要 元素的样式，建立一个垂直的导航栏。在上面的例子中链接有不同的宽度。
制作隔行变色的商品列表_前端css基础篇（四）导航栏和隔行变色
weixin_34603379的博客
01-26 367
一、垂直导航条固定在左侧的垂直导航条<style> body{ margin:0; } ul{ list-style-type: none;/*去除li有序列表默认样式*/ margin:0; padding:0; wi...
动态响应布局、iconfont笔记
m0_67390788的博客
03-18 1248
clip:rect矩形剪裁功能 rect(30px 200px 200px 20px) rect(top right bottom left) 参数：top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。 说明：裁剪矩形上边距上边的距离是30px 裁剪矩形右边距左边的距离是200px 裁剪矩形下边距上边的距离是200px 裁剪矩形左边距左边的距离20px :not li a:hover:not(.actio
asp.net mvc 分页
愤怒的菜鸟
03-27 3002
手学类库, //css样式表 <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li { ...
Bootstrap CSS组件之分页(pagination)和翻页(pager)
11-26
几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。 //源码 .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination ...
jquery分页插件jquery.pagination.js使用方法解析
10-22
`jQuery.pagination.js`是一款强大的jQuery分页插件，由Gabriel Birke开发，它使得在网页上实现分页功能变得简单高效。以下是对这个插件的详细解释和使用方法： ### 插件安装与引入 首先，确保你已经在项目中引入...
vue-ads-pagination tailwindcssvue-ads-pagination-使用css框架tailwindcss构建的vue分页组件-Vue.js开发
05-27
vue-ads-pagination vue广告分页是vue js分页组件。 在左侧，您可以找到有关所显示项目的一些信息。 在右侧的vue-ads-pagination中，Vue广告的分页是vue js的分页组件。 在左侧，您可以找到有关所显示项目的一些信息...
backbone.bootstrap.pagination:简单的分页主干视图
05-11
在给定的标题“backbone.bootstrap.pagination:简单的分页主干视图”中，我们关注的是Backbone.js的一个特定扩展，即用于分页功能的组件，结合了Bootstrap的UI设计。 Bootstrap是由Twitter开发的开源前端框架，它...
10月20日
qq_52345504的博客
10-20 183
1、盒子模型概念基础 2、css的四种选择器 后代选择器 ( ) 子选择器 (>) 相邻兄弟选择器 (+) 通用兄弟选择器 (~) 3、opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明 （使用opacity属性添加透明度时，其所有子元素都继承相同的...
HTML_选择器笔记
Zhou_MengDie的博客
12-01 205
常用的选择器 元素选择器 表示选择页面中所有的p元素,然后设置属性 p{ color:red; } ID选择器 表示选择页面中的id #p1{ color:red; } <p id="p1"> 内容内容内容内容 </p> CLass选择器(类选择器) 通过元素的class属性值选中一组元素。 class属性和id属性相似，只不过class属性可以...
CSS之伪类选择器
qq_53977993的博客
10-11 254
本章是关于CSS的伪类方面。
2.CSS学习笔记
qq_39264084的博客
09-10 327
文章目录2.CSS2.1 语法2.2 三种方式+四种选择2.2.1 三种方式2.2.2 四种选择2.3 CSS样式优先级2.3.1 CSS的继承性（标签从祖先继承来的属性）2.3.2 选择器的优先性（标签自有的属性）2.4 常用样式属性2.4.1 盒子模型、边框、边距、填充2.4.2 背景、文本、字体、显示2.4.3 导航栏(=链接列表)2.4.3.1 垂直导航栏2.4.3.2 水平导航栏2.4.5 下拉菜单2.4.6 分页2.4.7 图片2.4.8 网页布局2.5 响应式设计2.5.1 viewport2
html左侧导航栏点击下拉菜单,CSS中的导航栏和下拉菜单的实现
weixin_36354924的博客
05-30 3070
一、CSS导航栏(1)导航栏的作用熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。(2)垂直导航栏<1>代码如下垂直导航栏主页新闻联系关于垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏body{margin:0;}ul{padding...
CSS选择器
qq_30906791的博客
11-01 191
选择器是什么？ 选择一个或者一组特定元素的工具称作选择器 选择器本质上有3种类型，即 元素选择器 id选择器 类选择器 除了元素选择器外，两种最常见的选择器形式是id和class选择器。 元素（标签）选择器 元素选择器或标签选择器在HTML标签级别起作用。 当我们在CSS文件中直接为HTML标签添加样式时，这称为元素选择器。 h1{ color:red; } 我们直接将样式分配给了h1标签/元素，这种标签选择和样式化方法称为“元素选择器”，因为我们直接将样式
hover 选择器
GuangRong1的博客
11-30 592
所有主流浏览器都支持 :hover 选择器。 定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素。 hover 和 mouseover +mouseout  一样 $("#searchParams li").hover(             function(){                $(this).attr("class","curre
CSS学习，常用常记（伪元素，导航栏）
Sinhaeng_Hhjian
03-22 561
CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法： selector:pseudo-element {property:value;} CSS类也可以使用伪元素： selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 p:fir...
"ul.pagination li.active + li"
最新发布
07-14
`"ul.pagination li.active + li"` 是一个 CSS 选择器，用于在网页上选择特定的元素。让我们逐个解析这个选择器的含义： - `ul.pagination`：选择 class 为 "pagination" 的 `<ul>` 元素。 - `li.active`：选择 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值