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 :)
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.
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