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
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
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: not ( .active) {background-color: #ddd;}
CSS Examples
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
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
transition: background-color .3s;
}
With border tab
We can use the border
attribute to add a page with a border:
CSS Examples
border: 1px solid #ddd; / * Gray * /
}
Rounded corners
Tip: In the first and last page pagination links Link Add fillets:
CSS Examples
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
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
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
text-align: center;
}
More examples
CSS Examples
Breadcrumbs
Another navigation as breadcrumbs, examples are as follows:
CSS Examples
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";
}