css Resimli Menu yapımı

forget29.04.2013 - 22:54

css Resimli Menu yapımı


Resim kullarak menu yapımı nasıl olur bunu anlatacağız.

İlk başta Kategori oluşturmak için liste oluşturan ul ve li etiketlerini kullanacağız.

Kodun görünümü

Kod: [Seç]
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetlerimiz</a></li>
<li><a href="#">İletişim</a></li>
</ul>

Şimdi ul    li Etiketlerimiz ve kategori isimlerimiz hazır şimdi css kodlarını yazmamız gerekir


Li etiketlerinin oluşturduğu noktayı kaldırmak için list-style-type:none; kodunu kullanıyoruz

linklerin altındaki çizgiyi kaldırmak içinde text-decoration:none; kullanıyoruz

Kullanılan resim aşagıdadır. istediğiniz şekilde resim yapıp kullanabilirsiniz.

Kod: [Seç]
<style type="text/css"><!--
<style type>.menu ul{
float:center;
margin:0px;
padding:0px;
list-style-type:none;
width:1000px;
}
.menu ul li{

float:left;
background: url(img/sol3.png) no-repeat;
}
.menu li a{

display:block;
text-decoration:none;
float:left;
padding:8px 65px 10px 10px;
}
body{
background-color:#49;
}


Linkback: https://www.buyuknet.com/css-resimli-menu-yapimi-t40707.0.html


Etiket:

Bu bilgi size yardimci oldu mu?

EvetHayır
css Resimli Menu yapımı
css Resimli Menu yapımı
(Ortalama: 5 üzerinden 1.7 - 3 Oy)
3