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

布满荆棘的人生 2023-01-11 09:15 152阅读 0赞

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

效果显示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221119/233302ea5d5746ffb518ea3a13948a0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221119/4f47a57fa63d439a8c894b5c12dca98c.png