Detailed graphic explanation of how to create paging effects with HTML and CSS

Careful friends will find that almost every website has a pagination mark. When you click on the next page, it will jump to the next page. Friends who are learning HTML and CSS, do you know how to create pagination in HTML? This article will introduce the steps of HTML paging technology and the HTML paging code with examples. Interested friends can take a look.

Achieving paging effects requires the use of many attributes in CSS, such as float, hover pseudo-class selector, etc. If you are unclear, you can refer to the relevant articles on the PHP Chinese website, or visit CSS video tutorial, I hope it can help you.

The following is a detailed explanation of the steps to achieve paging effect with HTML and CSS:

HTML part:

Create a

tag in the page and For multiple
• tags, give them a class name respectively to facilitate CSS styling. ul and li can make an unordered list. Because we need a click jump effect, we need to insert a in the li tag. Tag, the specific code is as follows:

  <ul class="box modal-4">
  <li><a href="#" class="prev"><i class="fa fa-chevron-left"></i> Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#" class="active">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#" class="next"> Next<i class="fa fa-chevron-right"></i></a></li>
  </ul>

  CSS part:

  The basic framework has been built, now we need to use CSS to beautify it. First, use float: left to make the unordered list float left and arrange it in one line. Use text-decoration: none to remove the default underline of the a tag. Use padding to adjust the spacing. Add color and mouse click or hover effect to the paging effect. The specific code As follows:

  .box {list-style: none;display: inline-block;padding: 0;margin-top: 10px;}
  .box li {display: inline;text-align: center;}
  .box a {
  float: left;
  display: block;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 12px;
  color: #fff;
  margin-left: -1px;
  border: 1px solid transparent;
  line-height: 1.5;
  }
  .box a.active {cursor: default;}
  .box a:active {outline: none;}
  .modal-4 a {
  margin: 0 5px;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background-color: #F7C12C;
  }
  .modal-4 a.prev {
  -moz-border-radius: 50px 0 0 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px 0 0 50px;
  width: 100px;
  }
  .modal-4 a.next {
  -moz-border-radius: 0 50px 50px 0;
  -webkit-border-radius: 0;
  border-radius: 0 50px 50px 0;
  width: 100px;
  }
  .modal-4 a:hover {background-color: #FFA500;}
  .modal-4 a.active,.modal-4 a:active {background-color: #FFA100;}

  Rendering:
  

  

  As can be seen from the picture, a complete html paging effect has been created. When the mouse hovers over On paginated content or when it is activated, it appears dark orange, and when the mouse leaves it, it turns orange.

  The above introduces to you how to create pagination effects in HTML. It is quite detailed. Beginners can try it by themselves to see if you can create a cooler pagination effect. I hope this article will be helpful to you. !

  【Recommended related tutorials】

  1. Html tutorial
  2. CSS3 latest version reference manual
  3. HTML5 complete version manual
  

The above is the detailed content of Detailed graphic explanation of how to create paging effects with HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!