2. Sayfa Nasıl Hazırlanır?

 
body {
   margin: 0px;
   background-image: url('http://img.webme.com/pic/b/bs-aktif/arkaplan.png');
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 18pt;
}
#tasiyici {
   width: 590px;
   margin: 0 auto;
}
#turuncu {
   margin: 20px 0px 0px 0px;
   display: inline-table;
}
#turuncu ul {
   list-style: none;
   margin: 0px;
   padding: 0px;
}
#turuncu ul li {
   width: 44px;
   height: 50px;
   float: left;
   text-align: center;
   line-height: 45px;
   margin: 0px 10px 0px 0px;
   color: #ffffff;
   text-shadow: 1px 1px #000000;
}
#turuncu ul li a {
   background-image: url('http://img.webme.com/pic/b/bs-aktif/turuncu.png');
   display: block;
   height: 50px;
   text-decoration: none;
   color: #ffffff;
   text-shadow: 1px 1px #d05c03;
}
#turuncu ul li a:hover, .active {
   background-position: 0px -50px;
}
#yesil {
   margin: 20px 0px 0px 0px;
   display: inline-table;
}
#yesil ul {
   list-style: none;
   margin: 0px;
   padding: 0px;
}
#yesil ul li {
   width: 44px;
   height: 50px;
   float: left;
   text-align: center;
   line-height: 45px;
   margin: 0px 10px 0px 0px;
   color: #ffffff;
   text-shadow: 1px 1px #000000;
}
#yesil ul li a {
   background-image: url('http://img.webme.com/pic/b/bs-aktif/yesil.png');
   display: block;
   height: 50px;
   text-decoration: none;
   color: #ffffff;
   text-shadow: 1px 1px #beb404;
}
#yesil ul li a:hover, .active {
   background-position: 0px -50px;
}
#pembe {
   margin: 20px 0px 0px 0px;
   display: inline-table;
}
#pembe ul {
   list-style: none;
   margin: 0px;
   padding: 0px;
}
#pembe ul li {
   width: 44px;
   height: 50px;
   float: left;
   text-align: center;
   line-height: 45px;
   margin: 0px 10px 0px 0px;
   color: #ffffff;
   text-shadow: 1px 1px #000000;
}
#pembe ul li a {
   background-image: url('http://img.webme.com/pic/b/bs-aktif/pembe.png');
   display: block;
   height: 50px;
   text-decoration: none;
   color: #ffffff;
   text-shadow: 1px 1px #985151;
}
#pembe ul li a:hover, .active {
   background-position: 0px -50px;
}
.ok-sol {
   background-image: url('http://img.webme.com/pic/b/bs-aktif/ok.png')!important;
}
.ok-sol:hover {
   background-position: 0px 0px!important;
}
.ok-sag {
   background-image: url('http://img.webme.com/pic/b/bs-aktif/ok.png')!important;
   background-position: 0px -50px;
}
.ok-sag :hover {
   background-position: 0px 0px!important;
}
 
 

        <!-- BS-AKTIF.TR.GG KOD BITISI -->

<div id="tasiyici">
   <div id="turuncu">
      <ul>
         <li><a class="ok-sol" href="#"></a></li>
         <li><a class="active" href="#">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>...</li>
         <li><a href="#">25</a></li>
         <li><a class="ok-sag" href="#"></a></li>
      </ul>
   </div>
   <div id="yesil">
      <ul>
         <li><a class="ok-sol" href="#"></a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a class="active" href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
         <li>...</li>
         <li><a href="#">25</a></li>
         <li><a class="ok-sag" href="#"></a></li>
      </ul>
   </div>
   <div id="pembe">
      <ul>
         <li><a class="ok-sol" href="#"></a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a class="active" href="#">5</a></li>
         <li>...</li>
         <li><a href="#">25</a></li>
         <li><a class="ok-sag" href="#"></a></li>
      </ul>
   </div>
</div>