The best Examples of CSS tab Tutorial In 2024, In this tutorial you can learn
Simple tabs,Click the tab and hover style,With border tab,Paging font size,Center tab,More examples,Breadcrumbs,
Examples of CSS tab
This chapter we will introduce how to create an instance of paging through the use of CSS.
Simple tabs
If your site has many pages, you'll need to use the tab to make the navigation for each page.
The following example demonstrates how to use HTML and CSS to create page:
CSS Examples
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;
}
Click the tab and hover style
If you click on this page, you can use .active
to set the current page style, you can use the mouse-over :hover
selectors to modify the style:
CSS Examples
ul.pagination li a.active {
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: not ( .active) {background-color: #ddd;}
CSS Examples
ul.pagination li a.active {
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: not (.active) {background-color: #ddd;}
Rounded style
You can use the border-radius
property for the selected page to add rounded corners style:
CSS Examples
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Hover transition effects
We can add the transition
property to move the mouse on the page when you add transition effects:
CSS Examples
ul.pagination li a {
transition: background-color .3s;
}
With border tab
We can use the border
attribute to add a page with a border:
CSS Examples
ul.pagination li a {
border: 1px solid #ddd; / * Gray * /
}
Rounded corners
Tip: In the first and last page pagination links Link Add fillets:
CSS Examples
.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;
}
Paging interval
Tip: You can use the margin
property to add a space directly to each page:
CSS Examples
ul.pagination li a {
margin:. 0 4px; / * 0 is for top and bottom Feel free to change it * /
}
Paging font size
We can use the font-size
property to set page font size:
CSS Examples
ul.pagination li a {
font-size: 22px;
}
Center tab
If you want to center tab, you can (such as <div>) to addtext-align on the container element: centerstyle:
CSS Examples
div.center {
text-align: center;
}
More examples
Breadcrumbs
Another navigation as breadcrumbs, examples are as follows:
CSS Examples
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";
}