js+html+css实现一个分页特效-白红宇的个人博客

发布日期：2021-05-08 22:19:51 浏览次数：18 分类：原创文章

本文共 2044 字，大约阅读时间需要 6 分钟。

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;	 }