En basit haliyle css ve html ile Yatay menü yapmak için bir adet html dosyası ve bir adette css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.
- yataymenuolustur.html dosyasının içeriği;
<html>
<head>
<title>Yatay Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”yataymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”yataymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>
<head>
<title>Yatay Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”yataymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”yataymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>
- yataymenustilleri.css dosyasının içeriği;
.yataymenu{ /*yataymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.yataymenu a{ /*yataymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
}
.yataymenu a:hover{/*yataymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}
.yataymenu li{
display:inline;/*liste elemanlarını yanyana yerleştirir.*/
}
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.yataymenu a{ /*yataymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
}
.yataymenu a:hover{/*yataymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}
.yataymenu li{
display:inline;/*liste elemanlarını yanyana yerleştirir.*/
}
Hiç yorum yok :
Yorum Gönder