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

Editor to share with you how to use HTML and CSS to make paging effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

HTML section:

Create a tag and multiple tags on the page and give each of them a class class name to facilitate CSS styling. Ul and li can make an unordered list. Because we need to click on the jump effect, we need to insert a tag in the li tag as follows:

Previous

one

two

three

four

five

six

seven

Next

CSS section:

The basic framework has been built, 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:

.box {list-style:none;display:inline-block;padding:0;margin-top:10px;}

.boxli {display:inline;text-align:center;}

.boxa {

Float:left

Display:block

Font-size:14px

Text-decoration:none

Padding:5px12px

Color:#fff

Margin-left:-1px

Border:1pxsolidtransparent

Line-height:1.5

}

.boxa.active {cursor:default;}

.boxa: active {outline:none;}

. modal-4a {

Margin:05px

Padding:0

Width:30px

Height:30px

Line-height:30px

-moz-border-radius:100%

-webkit-border-radius:100%

Border-radius:100%

Background-color:#F7C12C

}

. modal-4a.prev {

-moz-border-radius:50px0050px

-webkit-border-radius:50px

Border-radius:50px0050px

Width:100px

}

. modal-4a.next {

-moz-border-radius:050px50px0

-webkit-border-radius:0

Border-radius:050px50px0

Width:100px

}

. modal-4a:hover {background-color:#FFA500;}

. modal-4a.active,.modal-4a:active {background-color:#FFA100;}

Effect picture:

As you can see from the figure, a complete html paging effect has been made. When the mouse hovers over the paging content or when the paging content is activated, it appears dark orange, and when the mouse leaves, it appears orange.

The above is all the contents of the article "how to use HTML and CSS to make paging effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.