行内块运用

最新推荐文章于 2024-08-02 20:34:24 发布

吃不饱的我

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量48

点赞数

分类专栏：笔记文章标签： css html javascript

本文链接：https://blog.csdn.net/yh_31/article/details/125310697

版权

笔记专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				text-align: center;
			}
			.box a{
				display: inline-block;
				width: 36px;
				height: 36px;
				background-color: #f7f7f7;
				border: 1px solid #ccc;
				text-align: center;
				line-height: 36px;
				text-decoration: none;
				color: #333;
				font-size: 14px;
			}
			.box .prev,
			.box .next{
				width: 85px;
			}
			.box .current,
			.box .elp{
				background-color: #fff;
				border: none;
				
			}
			.box input{
				height: 36px;
				width: 45px;
				border: 1px solid #ccc;
				outline: none;
			}
			.box button{
				width: 60px;
				height: 36px;
				background-color: #f7f7f7;
				border: 1px solid #ccc;
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#" class="prev">&lt;&lt;上一页</a>
			<a href="#" class="current">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#" class="elp">...</a>
			<a href="#" class="next">&gt;&gt;下一页</a>
			到第
			<input type="text" />
			页
			<button type="button">确定</button>
		</div>
	</body>
</html>