CSS/HTML5简单大方的蓝色CSS分页样式

最新推荐文章于 2024-08-21 02:14:52 发布

原创最新推荐文章于 2024-08-21 02:14:52 发布 · 5.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #分页列表

样式笔记同时被 2 个专栏收录

5 篇文章

订阅专栏

组件

5 篇文章

订阅专栏

这篇博客介绍了如何使用CSS和HTML5实现一款简单大方的蓝色分页样式。内容包括设计的分辨率适应性，CSS代码的解释，以及具体Index代码的展示，还附带有演示图，帮助读者理解并实现这一设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

固定宽度实现页面自适应居中

说明

演示效果分辨率为1980x1080分辨率效果
width设置为1336px使在分辨率为1366x720的浏览器不出现左右移动框
使用margin来控制浮动

部分css代码解释

#model14 ul {
			  padding-inline-start: 0 !important;
			 /* 设置ul的开头距离为零必面设置自动居中时影响美观  */
			}
			#model14 li:first-child {
					margin-left: 0;
				/*	li:first-child可设置第一个li元素的样式，第二个第三个同。 */
				}

Index代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a{
				text-decoration: none;
			}
			#arrowup-center {
			  display: table;
			  height: 16px;
			  margin: 0 auto;
			}
			
			#model14 ul {
			  padding-inline-start: 0 !important;
			}
			#model14 li:first-child {
					margin-left: 0;
					}
			#model14 {
			  float: left;
			  width: 1100px;
			  text-align: center;
			  margin-top: 500px;
			}
			
			#model14 li {
			  position: relative;
			  float: left;
			  list-style: none;
			  margin-left: 31px;
				
			
			}
			
			#model14 li.active a {
			  font-size: 16px;
			  color: #2699fb;
			}
			
			#model14 li a {
			  font-size: 16px;
			  color: #bce0fd;
			}
			
			
			li a img {
			  margin-top: -3px;
			}
			
		</style>
	</head>
	

	<body>

		<div id="model14">
			<div>
				<ul id="arrowup-center">
					<li class="arrowup">
						<a href="#" >
							<img src="翻页-上一页.png" alt="">
						</a>
					</li>
					<li ><a href="#" >1</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="#" >8</a></li>
					<li ><a href="#" >9</a></li>
					<li ><a href="#" >10</a></li>
					<li class="arrowdown">
						<a href="#" >
							<img src="翻页-下一页.png" alt="">
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>