css,html简单的分页源码

最新推荐文章于 2021-08-14 18:34:58 发布

少不入坑

最新推荐文章于 2021-08-14 18:34:58 发布

阅读量434

点赞数 1

文章标签： HTML CSS 分页样式前端开发

本文链接：https://blog.csdn.net/weixin_52222753/article/details/119699302

版权

html代码：

<div class="box">
			<a href="#" class="prve"> &lt;&lt;前一页</a>
			<a href="#" class="cur">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<a href="#" class="cur">...</a>
			<a href="#" class="next">&gt;&gt;后一页</a>
			到第
			<input type="tel" name="" />
			页
			<button type="button">确定</button>
		</div>

css样式代码：

			*{
				padding: 0;     /* 清除内外边距 */
				margin: 0;
			}
			.box{
				text-align: center;
				margin: 200px auto;
			}
			.box a{
				display: inline-block; 		/* 将a转为行内快元素,并给他设置宽和高 */
				width: 25px;
				height: 25px;
				border: 1px solid #ccc;
				text-align: center;
				line-height: 25px;			/* 将行高和高度设为一致,使它垂直居中 */
				text-decoration: none;
				color: #333;
			}
			.box .prve,			/* 考虑到权重 */
			.box .next{
				width: 80px;
				height: 25px;
				font-size: 14px
			}
			.box .cur{
				border: none;
			}
			.box input{
				width: 55px;
				height: 23px;
				outline: none; 	/* 取消轮廓属性 */
			}
			.box button{
				width: 40px;
				height: 25px;
				font-size: 14px;
				color: #333;
				background-color: #fff;
				border: 1px solid #ccc;
			}