How to use css to display different paging effects at the bottom of the page? (various style examples)-CSS Tutorial-php.cn

How to use css to display different paging effects at the bottom of the page? (various style examples)

藏色散人

Release： 2018-08-11 11:37:55

Original

3055 people have browsed it

Most websites are composed of multiple pages, and rarely are composed of a single page. So many pages require the paging function. This article will introduce to you the specific implementation of css paging settings and css paging code.

1. A specific example of a simple css paging code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css分页样式代码测试</title>
    <style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
        ul.pagination li {display: inline;}

        ul.pagination li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h2>简单的分页</h2>
<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" 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="#">»</a></li>
</ul>
</body>
</html>

Copy after login

The effect is as follows:

How to use css to display different paging effects at the bottom of the page? (various style examples)

2. CSS paging effect--click and mouseover paging style specific code examples are as follows:

<h2>css分页效果--点击及鼠标悬停分页样式</h2>
<p>请你移动鼠标到分页的数字上</p>
<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" 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="#">»</a></li>
</ul>

Copy after login

style style code:

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}

Copy after login

The effect is as follows:

How to use css to display different paging effects at the bottom of the page? (various style examples)

Note: If you click on the current page, you can use .active to set the style of the current page, and when you hover the mouse, you can use the :hover selector to modify the style.

:Hover is a special style added when the mouse moves over the link. Can be used on all elements, not just links.

:link selector sets the style of links to unvisited pages

:visited selector sets the style of links to visited pages: active selector sets the style when you click the link style.

3. CSS paging style - rounded corner style

The main difference in the code here is related to the border-radius attribute.

ul.pagination li a {
    border-radius: 5px;
}
ul.pagination li a.active {   
	border-radius: 5px;
}

Copy after login

The effect is as shown below:

How to use css to display different paging effects at the bottom of the page? (various style examples)

Note: The

border-radius attribute is an abbreviated attribute used to set four border- *-radius attribute. This property allows you to add rounded borders to elements!

This article introduces three situations about css paging style for your reference. I hope it will be helpful to friends in need!

The above is the detailed content of How to use css to display different paging effects at the bottom of the page? (various style examples). For more information, please follow other related articles on the PHP Chinese website!