当前位置:网站首页>An article takes you to understand CSS pagination examples
An article takes you to understand CSS pagination examples
2020-11-06 20:42:00 【Python advanced】
The effect of paging in life is everywhere , Today, we will give you a detailed analysis of the paging effect .
How to use HTML and CSS To create pages ?
If your website has many pages , You need to use paging to navigate each page
One 、 Paging type
1. Simple Paging
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> project </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>Simple Pagination</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>
Click and mouse hover page style
If you click the current page , have access to .active To set the current page style , Hover over to use :hover Selector to modify style :
CSS example
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
2. Page style
2.1 Fillet style paging
have access to border-radius Property to add fillet style for the selected page number :
CSS example
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Mouse hover transition effect
We can add transition Property to add a transition effect to the mouse as it moves over the page number :
CSS example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> project </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;
transition: background-color .3s;
border: 1px solid #ddd;
}
.pagination li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul.pagination li a.active {
background-color: #f00;
color: white;
border: 1px solid #f00;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Pagination with Rounded Borders</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>
2.2 Page with borders
We can use border Property to add border paging :
CSS example
ul.pagination li a {
border: 1px solid #ddd; /* Gray */
}
2.3. Paging interval
Tips : You can use margin Property to add spaces directly to each page number :
CSS example
ul.pagination li a {
margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}
2.4 Page font size
We can use font-size Property to set the font size of the page :
CSS example
ul.pagination li a {
font-size: 22px;
}
2.5 Center page
If you want to center the page , Can be on container elements ( Such as <div>
) add to text-align:center
style :
CSS example
div.center {
text-align: center;
}
Two 、 Case study
Breadcrumb navigation
Another navigation is crumb navigation ,
Examples are as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> project </title>
<style>
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
</style>
</head>
<body>
<h2>Breadcrumb Pagination</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
</body>
</html>
3、 ... and 、 summary
This paper takes the phenomenon in life as the starting point , It mainly introduces Html Page effect in the use of styles , Application of paging effect when mouse hovers .
Use rich cases to help you understand the object better , Finally “ Breadcrumb navigation ” As a small project , Use Html programing language , Make a general integration of the results described above , It is convenient for you to increase the understanding of classes and objects , I hope it will help you in your study .
Want to learn more Python Web crawler and data mining knowledge , Go to a professional website :http://pdcfighting.com/ Want to learn more Python Web crawler and data mining knowledge , Go to a professional website :http://pdcfighting.com/
版权声明
本文为[Python advanced]所创,转载请带上原文链接,感谢
边栏推荐
- Get twice the result with half the effort: automation without cabinet
- MongoDB与SQL常用语法对应表
- Building a new generation cloud native data lake with iceberg on kubernetes
- How does filecoin's economic model and future value support the price of fil currency breaking through thousands
- 視覺滾動[反差美]
- 行为型模式之备忘录模式
- 【自学unity2d传奇游戏开发】如何让角色动起来
- Helping financial technology innovation and development, atfx is at the forefront of the industry
- PHP application docking justswap special development kit【 JustSwap.PHP ]
- Behind the record breaking Q2 revenue of Alibaba cloud, the cloud opening mode is reshaping
猜你喜欢
美团内部讲座|周烜:华东师范大学的数据库系统研究
Who says cat can't do link tracking? Stand up for me
文件过多时ls命令为什么会卡住?
Outsourcing is really difficult. As an outsourcer, I can't help sighing.
【ElasticSearch搜索引擎】
【:: 是什么语法?】
01. SSH Remote terminal and websocket of go language
前端未來趨勢之原生API:Web Components
Flink's datasource Trilogy 2: built in connector
一路踩坑,被迫聊聊 C# 代码调试技巧和远程调试
随机推荐
Flink's datasource Trilogy 2: built in connector
Asp.Net Core learning notes: Introduction
How to hide part of barcode text in barcode generation software
What are PLC Analog input and digital input
事件监听问题
嘉宾专访|2020 PostgreSQL亚洲大会阿里云数据库专场:曾文旌
Digital city responds to relevant national policies and vigorously develops the construction of digital twin platform
In depth to uncover the bottom layer of garbage collection, this time let you understand her thoroughly
hdu3974 Assign the task線段樹 dfs序
Description of phpshe SMS plug-in
Introduction to X Window System
Staying up late summarizes the key points of report automation, data visualization and mining, which is different from what you think
開源一套極簡的前後端分離專案腳手架
文件过多时ls命令为什么会卡住?
游戏主题音乐对游戏的作用
Pn8162 20W PD fast charging chip, PD fast charging charger scheme
Helping financial technology innovation and development, atfx is at the forefront of the industry
What are manufacturing and new automation technologies?
代码生成器插件与Creator预制体文件解析
What are the common problems of DTU connection