js+html+css实现一个分页特效

最新推荐文章于 2024-07-01 11:34:43 发布

你的美，让我痴迷

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量627

点赞数

分类专栏： css html js

本文链接：https://blog.csdn.net/weixin_45932157/article/details/113185112

版权

js 同时被 3 个专栏收录

75 篇文章 1 订阅

订阅专栏

css

33 篇文章 1 订阅

订阅专栏

html

23 篇文章 1 订阅

订阅专栏

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="container">
			<ul class="pagination">
				 <li><a href="#">上一页</a></li>
				 <li><a 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>
		</div>
		  <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$('li').addClass("oldactive"); 
			$("li").click(function(){
			 
				$(this).addClass("active").siblings().removeClass("active"); 
			})
		</script>
	</body>
</html>

css:

*{
	margin: 0;
	padding: 0;
	outline: none;
	box-sizing: border-box;
	font-family: 'Poppins',sans-serif;
	 }
	 html,body{
		 display: grid;
		 height: 100%;
		 place-items: center;
		 text-align: center;
		 background: #dde1e7;
		 
	 }
	 .container{
		 background: #dde1e7;
		 padding: 25px;
		 border-radius: 3px;
		 box-shadow: -3px  -3px  7px #ffffff73,
		 				  3px  3px  5px rgba(94,104,121,0.288);
	 }
	 .container .pagination{
		 display: flex;
		 list-style: none;
	 }
	 .container  .pagination li{
		 flex:1;
		 margin: 0  5px;
		 border-radius: 3px;
		 background: #dde1e7;
		 
	 }
	 .pagination  li  a {
		 font-size: 18px;
		 text-decoration: none;
		 color:#4d3252;
		 height: 45px;
		 width: 55px;
		 display: block;
		 line-height: 45px;
		 
	 }
	 .oldactive{
	 		box-shadow:  -3px  -3px  7px #ffffff73,
	 						     3px  3px  5px rgba(94,104,121,0.288);
	 					 
	 		 
	 	 }
   .active{
		 box-shadow:inset -3px  -3px  7px #ffffff73,
		 				  inset  3px  3px  5px rgba(94,104,121,0.288);
					 
		 
	 }
	  .pagination  li  .active a{
	  		 font-size: 17px;
	  		 color: #6f6cde;
	  }
	  
	 .pagination  li:first-child  a{
		 width: 120px;
	 }
	 .pagination  li:last-child  a{
	 		 width: 100px;
	 }
	 .pagination li:last-child{
	 		 margin: 0 15px 0 0;
	 }
	 .pagination li:last-child{
		 margin: 0 0 0 15px;
	 }