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>點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)