HTML 的静态网页分页样式

最新推荐文章于 2025-09-11 09:38:04 发布

原创最新推荐文章于 2025-09-11 09:38:04 发布 · 6.3k 阅读

4 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML静态网页中实现分页样式的具体方法，包括使用CSS进行样式设计，如颜色、字体大小、边框等，并展示了如何在main.html文件中引入page.css样式文件来实现页面元素的布局。

HTML 的静态网页分页样式

page.css代码如下:

#page-normal{
	color:#ff9655;
	text-align:center;
	font-size:0px;
}

#page-normal a{
	border:1px solid #ff9600;
	padding:5px 7px;
	color:#ff9655;
	text-decoration:none;
	font-size:15px;
	margin-right:10px;
}

#page-normal a:hover{
	border:1px solid #ff9600;
	padding:5px 7px;
	background-color:#ffbe94;
}

#page-prev{
	border:1px solid #ff9600;
	color:#ff9600;
	padding:5px 7px;
	font-size:15px;
	margin-right:10px;
	}
	
#page-prev i{
	margin-right:5px;
	}

#page-next i{
	margin-left:5px;
	}

#page-current{
	border:1px solid #ff9600;
	padding:5px 7px;
	background-color:#ffbe94;
	font-size:15px;
	margin-right:10px;
}

#page-ellipsis{
	font-size:15px;
	margin-right:10px;
}

main.html代码如下：

<head><link href="../css/page.css" rel="stylesheet" type="text/css"></head>
<body>
<div id="page-normal">
<span id="page-prev"><i></i>上一页</span>
<span id="page-current">1</span>
<a herf="#">2</a>
<a herf="#">3</a>
<a herf="#">4</a>
<a herf="#">5</a>
<a herf="#">6</a>
<a herf="#">7</a>
<span id="page-ellipsis">...</span>
<a herf="#">148</a>
<a herf="#">149</a>
<a herf="#">150</a>
<a id="page-next" href="#">下一页<i></i></a>
</div>
</body>