How to implement digital paging effect code and steps in CSS
|
A considerable number of websites use digital paging effects. For example, the paging of this site also adopts this method, which is quite beautiful to use. The code example is as follows Copy code The code is as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com/" /> <head> <title>Ant Tribe</title> <style type="text/css"> ul { list-style:none; } ul li { float:left; width:22px; height:22px; margin-left:5px; } a { width:20px; height:20px; display:block; text-align:center; text-decoration:none; background-color:white; border:1px solid #666; } a:hover { width:40px; height:30px; border:1px solid #666; position:absolute; line-height:30px; margin:-5px 0 0 -10px; } </style> </head> <body> <ul> <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="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> </ul> </body> </html> The above code achieves the desired effect. Here is a brief introduction to the implementation steps : 1. Use the float property to align the li elements horizontally. 2. Set the a elements as block-level elements and then set their sizes. 3. By using the link pseudo-class to control the size of the a element when the mouse is placed on the link, and using absolute positioning, the current a element can cover the surrounding elements. Special note: The reason why the background color of the a element is set to white is because the background is transparent by default. If the background color is not set, you will see the borders on both sides being covered. |
<<: Does Mysql ALTER TABLE lock the table when adding fields?
>>: How to handle long data when displaying it in html
Recommend
Characteristics of JavaScript arrow functions and differences from ordinary functions
Table of contents 1. Use of arrow functions 1. Fr...
Summary of online MYSQL synchronization error troubleshooting methods (must read)
Preface After a failover occurs, a common problem...
Steps to introduce PWA into Vue project
Table of contents 1. Install dependencies 2. Conf...
Modularity in Node.js, npm package manager explained
Table of contents The basic concept of modularity...
Solution to the problem of the entire page not being centered when using margin:0 auto in HTML
I wrote a jsp page today. I tried to adjust <di...
VMware vSAN Getting Started Summary
1. Background 1. Briefly introduce the shared sto...
Understanding and application analysis of mysql pessimistic locking and optimistic locking
This article uses examples to describe MySQL pess...
In-depth analysis of the Identifier Case Sensitivity problem in MySQL
In MySQL, you may encounter the problem of case s...
How to do a good refactoring is not only refactoring the code but also refactoring life
It is really not easy to do a good reconstruction...
The front-end page pop-up mask prohibits page scrolling
A problem that front-end developers often encount...
What is web design
<br />Original article: http://www.alistapar...
MySQL 5.6 zip package installation tutorial detailed
Previously, we all used files with the suffix .ms...
Detailed example of getting the maximum value of each group after grouping in MySQL
Detailed example of getting the maximum value of ...
How to use the flash plug-in to call the PC's camera and embed it into the TML page
Preface The reason for writing this article is mai...
Linux swap partition (detailed explanation)
Table of contents linux 1. What is SWAP 2. What d...