Shulou(Shulou.com)06/01 Report--

This article is about how html+css achieves static paging. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Html part

Create one and give it a class name center to make it easier to center the pages; create tags and tags in the tag, and ul and li can create an unordered list. Because we need to click on the jump effect, we need to insert a tag in the li tag, as shown below:

Previous page

one

two

three

four

five

six

seven

eight

next page

The current effect is as follows:

Bb.jpg

CSS part

As you can see from the above picture, the current page is ugly, and now we need to beautify it with CSS. First, use float:left to float the unordered list left and arrange it on a line, remove the default underscore of a tag with text-decoration:none, adjust the spacing with padding, and add color and mouse click or hover effect to the paging effect. The specific code is as follows:

.page {

Display:inline-block

Padding:0

Margin:0

}

.pageli {display:inline;}

.pagelia {

Color:black

Float:left

Padding:8px16px

Text-decoration:none

Transition:background-color.3s

Border:1pxsolid#ddd

}

.page.active {

Background-color:#4CAF50

Color:white

Border:1pxsolid#4CAF50

}

.pagea: hover:not (.active) {background-color:#ddd;}

.center {text-align:center;}

Thank you for reading! This is the end of this article on "how to achieve static paging effect in html+css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.