ads_header

Home HTML CSS Create Simple Pagination HTML CSS VIEWS

Create Simple Pagination HTML CSS

October 23, 2018
Read
Create Simple Pagination HTML CSS


Preview



Hello friends, in this tutorial I will make a simple pagination. Pagination is a feature to group pages on a website so it will be very easy to access certain pages if you have many pages on "your website". There are many types of tutorials like this, but I will review them for you.





Okey, First create a project folder and create the index.html and style.css files in it. When it's finished, open the index.html file and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pagination</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li><a href="#"><</a></li>
        <li><a href="#" class="active">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="#">></a></li>
    </ul>
</body>
</html>

Next, open style.css and enter the following code

body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    font-weight: bold;
    padding: 0;
    background: dodgerblue;
}

ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    margin: 0;
    padding: 0;
    box-shadow: 0 15px 20px rgba(0,0,0,.5), 0 0 0 4px #1886c5;
    border-radius: 25px;
    background: #fff;
}

ul li{
    list-style: none;
}

ul li a{
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #fff;
    color: #262626;
    text-decoration: none;
    border-radius: 4px;
    margin: 5px;
    box-shadow: inset 0 5px 10px rgba(0,0,0,.1), 0 2px 5px rgba(0,0,0,.5);
}

ul li:first-child a{
    border-radius: 20px 0 0 20px;
}

ul li:last-child a{
    border-radius: 0 20px 20px 0;
}

ul li a.active,
ul li a:hover{
    background: dodgerblue;
    color: #fff;
}

Save all files and run index.html
Tags :
Powered by Blogger.