Tutorial Membuat Menu Tab Dengan CSS dan PHP

Hmmm..ini adalah tutorial Lanjutan Dari Mari belajar CSS dan PHP Grati
Dan kali ini kita akan membahas bagai mana sich cara untuk Membuat Menu Tab Dengan CSS dan PHP ini?? Berikut tutorial nya...:


--> Pertama tama DOWNLOAD file file serta ikuti petunjuk yang ada pada tutorial Mari belajar CSS dan PHP Gratis 

Dan hasil awal nya seperti ini :

--> Tahap selanjutnya adalah Masukan SCRIPT PHP Sebagai berikut
       <div id="menutab">
            <ul>
                <li><a href="#">Tips Dan Trik</a></li>
                <li><a href="#">Software Gratis</a></li>
                <li><a href="#">Belajar PHP dan CSS</a></li>
            </ul>
            </div>
</br>


--> Setelah Scipt berikut ini :


 <?php
                   include("menu.php");
                   ?>
        </td>
      <td valign="center">

--> Maka hasil nya seperti ini....

Gimana???hmmm...hasil nya kurang menarik dan kurang memuaskan....hee..hee..nah disinilah peran CSS itu sangat penting untuk mempercantik dan memperindah tampilan sebuah WEBSITE ...
Ok lalu gimana neh..untuk Membuat Menu Tab Dengan CSS dan PHP,???
Setelah kita memiliki file yang bersifat HTML dan PHP, Langkah selanjut nya adalah membuat file CSS Sebagai berikut :
---> Buat file baru dengan NOTEPAD atau disini saya menggunakan COMODO EDITTOR yang bisa juga di DOWNLOAD SOFTWARE nya DISINI. 
Lalu masukan atau buat script berikut ini :

#menuTab ul
{
float: left;
margin: 0;
padding: 0;
list-style: none;
width: 90%;
border-bottom: solid 1px #CCCCCC;
}
#menuTab li
{
    float: left;
    padding-left: 30px;
    margin-right: 1px;
    height: 30px;
    background: url(image/menu.png) no-repeat top left;
}
#menuTab li :first-child
{
  margin-left: 20px; 
   
}
#menuTab li a
{
    font:bold 1.1em Arial, Helvetica, sans-serif;
    color: green;
    text-decoration:none;
    display: block;
    height: 21px;
    padding: 9px 30px 0px 0px ;
    background-image: url(mage/menu.png);
    background-repeat: no-repeat;
    background-position: top right;
}
#menuTab li a:hover
{
    color: white;
}
#menuTab li a:focus
{
    color:yellow;
}
--> Dan jangan Lupa juga Kita masukan file berbentuk gambar yang nanti nya akan di sincronkan dengan file CSS
Disini saya mengunakan gambar berukuran 480x87 px seperti berikut :

--> Lalu simpan dengan nama
"tab.css"


-->Ingat file disimpan atau ditaruh bersama an dengan File atau Folder "index.php"
yang telah kita buat. maka hasil nya sebagai berikut...:

--> Semua file yang telah jadi dan untuk sekedar utak atik ,atau kalau kamu males menulis script-script tersebuat kamu bisa mendownload semua file beserta gambar nya DISINI
Samapai sini bagaimana??sudah paham??hmm...masih bingung  silahkan kirim kan komentar ,
dan semampunya aqu bantu dan kita saling share semuanya tentang Belajar membuat sebuah WEBSITE,PHP,MYSQL,HTML,JQUERY JAVA SCIPT dan lain sebagai  nya...sampai bertemu esok..dan teeetaaappp...seemaaannngaaattt.... :)