<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>
</ul>
</body>
setelah selesai membuat design dengan html kemudia kita buat tampilan untuk membentuk pagination menu atau disebut juga menu
halaman beriku dibawah ini adalah contoh script pagination mengunakan css
body {
margin: 0;
padding: 0;
background: rgb(23, 196, 161);
font-family: sans-serif;
}
ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
margin: 0;
padding: 0;
background: #fff;
border-radius: 25px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 5), 0 0 0 4px #b4004e;
}
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 rgb(0, 0, 0, 0.1), 0 2px 5px rgba(0, 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: #ff006a;
color: #fff;
}
Ikuti Kami Untuk Konten Berkualitas Tentang Pemograman ????
website www.creativemediateknologi.com
Ikuti:- @creativemediateknologi untuk lebih lanjut
Nyalakan cerita dan kirim notifikasi untuk pembaruan harian????
Butuh laptop buat kerja atau event silahkan kunjungi creativemediateknologi.com untuk informasi lebih lanjut silahkan hubungi no 08128094571
0 Komentar