Setelah sebelumnya kita mempelajari cara membuat navigasi vertikal menggunakan CSS, mari kita lihat sedikit tentang cara navigasi horizontal dengan CSS.
Navigasi horizontal
Masih berlanjut dengan kode standar di atas, navigasi horizontal menggunakan daftar inline atau float.
Contoh dengan inline :
1
2
3
4
5
6
7
| li{display:inline;} |
Hasilnya :
Home News Contact About
Contoh dengan float :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| li{float:left;}a{display:block;width:60px;} |
Hasilnya :
Home News Contact about
Nah, mudah bukan? Kurang lebih seperti itu dasar-dasar membuat navigasi bar. Kalau anda kreatif banyak sekali modifikasi-modifikasi agar tampilan navigasi menu kita keren seperti bermain dengan warna, font dan lain-lain.
Ok, akhirnya melalui serial belajar css ini anda sudah belajar bagaimana menggunakan css untuk mengontrol style dan tata letak dari suatu situs dengan mudah. Dengan css anda bias mengatur background, memformat text, menambah border, margin, padding, mengatur posisi suatu elemen. Menambahkan special efek dan lain-lain. Sekarang, anda tahau tentang CSS dan kegunaannya yaitu memudahkan anda dalam mengedit kode-kode web anda.
So, apa selanjutnya? Mungkin suatu saat anda kepengen web anda terlihat dinamis? Kalau jawabannya “iya” anda bias mulai dengan belajar javascript. Dimana bias menemukan tutorial javascript yang lengkap dan mudah? Tunggu saja yaa..
0 comments:
Post a Comment