In this post I will tell you how to mendesaign a paging using css. By using CSS, we increasingly look cool paging and paging better than those not in the design. Ok let's start the stages:
1. Create a new page at page text editor, and name the file index.php. Then type the following script:
1. Create a new page at page text editor, and name the file index.php. Then type the following script:
<!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> Paging Design Using 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 . Then we make cssnya style . Copy and paste the script below :@ 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 ;}The result :
<div id="conatiner">
<P> Paging Design Using 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 . Then we make cssnya style . Copy and paste the script below :@ 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 ;}The result :
May be useful. :)
Post a Comment