1. Buatlah halaman baru dihalaman text editor, dan beri nama file index.php . Lalu ketikkan script dibawah ini :
<!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>Desain Paging 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">Last</a>
</div>
</div>
</body>
</html>
2. Lalu kita buat style cssnya. Copas script dibawah :
@charset "utf-8";
/* CSS Document */
#conatiner {
background:#CCC;
padding:20px;
}
.page {
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:capitalize;
}
.page:hover {
background:#333;
}
.active, .active:hover {
background:#757272;
border-color:#403C3C;
color:e9e9e9;
cursor:default;
}
.p {
font-family:"Comic Sans MS", cursive;
}
Untuk mendapatkan script lengkapnya silahkan download filenya disini.
Semoga bermanfaat.
No comments:
Post a Comment