Dalam posting ini saya akan memberitahu Anda bagaimana untuk mendesaign sebuah paging menggunakan css. Dengan menggunakan CSS, kita semakin terlihat paging keren dan paging yang lebih baik daripada mereka yang tidak dalam desain. Ok mari kita mulai tahap:
1 Buat halaman baru di halaman editor teks, dan nama file index.php. Kemudian ketik script berikut:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<link rel = "stylesheet" type = "text / css" href = "style.css" />
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<title> Untitled Document </ title>
</ head>
<body>
<div id = "conatiner">
<P> Pager Desain Menggunakan CSS </ P>
</ Hr>
<div class = "p">
<a href="#" class="page"> 1 </ a>
<a href="#" class="page"> 2 </ a>
<a href="#" class="page"> 3 </ a>
<a href="#" class="page"> 4 </ a>
<a href="#" class="page"> 5 </ a>
<a href="#" class="page"> terakhir </ a>
</ Div> </ div> </ body> </ html> 2. Lalu kita membuat gaya cssnya. Copy dan paste script di bawah ini: @ charset "utf - 8"; / * CSS Document * / # conatiner {
background: # CCC;
padding: 20px;}. halaman {
display: inline - block;
padding: 5px 9px;
margin-right: 4px;
border- radius: 3px;
border: 1px solid # 999;
background: # 06F;
font-size: 12px;
Font - weight: bold;
text-decoration: none;
color: # FFF;
text-transform: memanfaatkan;}. Halaman: hover {
background: # 333;}. aktif,. aktif: hover {
background: # 757272;
border-color: # 403C3C;
warna: e9e9e9;
kursor: default;}. p {
font-family: "Comic Sans MS ', kursif;} Hasilnya:
Untuk mendapatkan script lengkap silahkan download file di sini.
Semoga bermanfaat. :)
Selasa, 19 Agustus 2014
