CSS3（13）分页

简单分页

代码：

<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;} /*设置为内联元素*/

ul.pagination li a {
    border:1px solid #ddd;
    border-radius:5px;  /*设置圆角*/
    color: black;
    float: left;
    padding: 8px 16px;
    margin:0 2px; /*设置边距*/
    text-decoration: none;
}
ul.pagination li a.active{
    background:green;
    color:white;
}
ul.pagination li a:hover:not(.active){
    background:#ddd;
    transition:background .6s;  /*设置当鼠标悬停时的过渡效果*/
}
</style>

<ul class="pagination">
　　<li><a>&lt;&lt;</a></li>
　　<li><a>1</a></li>
　　<li><a class="active">2</a></li>
　　<li><a>3</a></li>
　　<li><a>4</a></li>
　　<li><a>5</a></li>
　　<li><a>6</a></li>
　　<li><a>&gt;&gt;</a></li>
</ul>

• <<
• 1
• 2
• 3
• 4
• 5
• 6
• >>

 

block 块级元素

inline 内联元素

inline-block 内联块状元素（所有元素都在一行，元素的高度、宽度、行高以及顶和底边距都可设置。）