css中分页样式
css分页样式的设置，我们可以采用ul+li来实现，设置li标签float为left，让它们排列在一行，再设置li标签里面的a标签样式。
具体实现如下：
部分css代码解释
#model14 ul {
padding-inline-start: 0 !important;
/* 设置ul的开头距离为零必面设置自动居中时影响美观 */
}
#model14 li:first-child {
margin-left: 0;
/* li:first-child可设置第一个li元素的样式，第二个第三个同。 */
}全部代码
<!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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="翻页-上一页.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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="翻页-下一页.png" alt="">
</a>
</li>
</ul>
</div>
</div>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦