Latest web development tutorials

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;
}

try it"

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;}

try it"

CSS Examples

ul.pagination li a.active {
background-color: # 4CAF50;
color: white;
}

ul.pagination li a: hover: not (.active) {background-color: #ddd;}

try it"

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;
}

try it"

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;
}

try it"

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 * /
}

try it"

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;
}

try it"

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 * /
}

try 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;
}

try it"

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;
}

try it"

More examples

CSS Examples


try it"

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";
}

try it"