CSS3(13)分页

来源:
网络
收录时间:
2021-03-04 13:27:21
社会 阅读 261080

摘要:<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>. inline-block 内联块状元素(所有元素都在一行,元素的高度、宽度、行高以及顶和底边距都可设置。

简单分页

代码:

<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 内联块状元素(所有元素都在一行,元素的高度、宽度、行高以及顶和底边距都可设置。)

 

CSS3(13)分页

原文地址:https://www.cnblogs.com/1016391912pm/p/12688600.html

查看全文
返回顶部