Merhaba arkadaşlar bu gün sizinle css kodları ile menü yapmayı öğreteceğim iyi dersler.
Menü yaparken listeleme etiketleri ve link vermeye yarayan <a href >etiketini bolca kullanacağız.
Burada listeleme etiketleri ile menü yaptık.# işareti nedir diye sorarsanız buna çapa işlemi deniyor.Bu işlem tıklandığında bir yere yönlendirilmesin diye yaptık.
Çalıştığında böyle bir sonuç alırız.
Çalıştırdığımızda;
Şimdi linklerin altındaki çizgileri kaldıralım onlarda görüntüyü bozuyor :)
Dikkat ettiyseniz her şey bir düzen içinde ve bir sırası var sıra bozuldu mu
yaptıklarımız çalışmaz.
Çalıştırdığımızda;
Şimdi linklerin üzerine gelindikçe renk değişsin.Ayrıca menünün arka plan rengini de değiştirelim.
Menü yaparken listeleme etiketleri ve link vermeye yarayan <a href >etiketini bolca kullanacağız.
Burada listeleme etiketleri ile menü yaptık.# işareti nedir diye sorarsanız buna çapa işlemi deniyor.Bu işlem tıklandığında bir yere yönlendirilmesin diye yaptık.
Çalıştığında böyle bir sonuç alırız.
Şimdi linklerin önündeki yuvarlakları kaldıracağız görüntümüzü bozuyor :)
Şimdi linklerin altındaki çizgileri kaldıralım onlarda görüntüyü bozuyor :)
yaptıklarımız çalışmaz.
Çalıştırdığımızda;
Şimdi linklerin üzerine gelindikçe renk değişsin.Ayrıca menünün arka plan rengini de değiştirelim.
KODLAR
| <html> | |
| <head> | |
| <title>Menü Yapımı</title> | |
| <style type="text/css"> | |
| .menu | |
| { | |
| list-style-type:none; | |
| } | |
| .menu a | |
| { | |
| text-decoration:none; | |
| background-color:brown; | |
| font-family:Bradley Hand ITC; | |
| font-weight:bold; | |
| color:yellow; | |
| } | |
| .menu a:hover | |
| { | |
| color:red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul class="menu"> | |
| <li><a href="#">Ana Sayfa</a></li> | |
| <li><a href="#">Ürünler</a></li> | |
| <li><a href="#">Parçalar</a></li> | |
| <li><a href="#">Bize Ulaşın</a></li> | |
| </ul> | |
| </body> | |
| </html> |
Yorumlar
Yorum Gönder