页码案例

最新推荐文章于 2024-09-14 17:54:00 发布

小獾哥

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量216

点赞数

分类专栏： Web前端文章标签： html5

Web前端专栏收录该内容

69 篇文章 3 订阅

订阅专栏

#代码：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页码案例</title>
<style>
/*2.初始化重置样式 */
ul{
list-style: none;
margin: 0;
padding: 0;
}

/* 1.设置边框 */
.box{
width: 900px;
height: 50px;
border: 1px solid black;
margin: 0 auto;
text-align: center;
line-height: 50px;
}

/* 3.将li标签转换成行内块元素 */
.box li{
display: inline-block;
}

/* 4.修改a标签 */
.box li a{
color: black;
text-decoration: none;
background-color: gold;
/* 外边距 */
margin: 0 10px;
/* 内边距 */
padding: 0 5px;
}
</style>
</head>
<body>
<div class="box">
<ul class="list">

<li><a href="">上一页</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>...</li>
<li><a href="">17</a></li>
<li><a href="">18</a></li>
<li><a href="">19</a></li>
<li><a href="">20</a></li>
<li><a href="">下一页</a></li>
</ul>
</div>

</body>
</html>