Ana içeriğe atla

CSS İle Menü Yapımı(Ders-2)

Merhaba arkadaşlar bu gün sizinle yatay menü yapımını işleyeceğiz.Önceki dersimizde dikey menü yapmıştık.Şimdi yatay menü yapacağız dikey menüden bir farkı yok.Kodları ve tasarımı kendime göre hazırladım işinize yarayacağını düşünüyorum herkese iyi dersler.

Hemen linklerimizi yazıyoruz.

















Yuvarlakları kaldırıyoruz.



















Amacımız bunu yatay menü yapmak bunun için menüye display özelliği ekleyeceğiz.Daha sonrada inline yapacağız bu menümüzü yatay bir şekilde dizilmesini sağlayacak.


















Şimdi çizgilerimizi kaldıralım.Menüye biraz renk katalım :)




















Şimdi üzerine gelindiğinde renk değiştirsin.



















                                                                                                  KODLAR


<html>
<head>
<title>Menü Yapımı</title>
<style type="text/css">
.menu
{
list-style-type:none;
}
.menu li
{
display:inline;
}
.menu a
{
text-decoration:none;
color:yellow;
background-color:pink;
font-weight:bold;
font-family:Algerian;
}
.menu a:hover
{
color:blue;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="www.google.com.tr">Google</a></li>
<li><a href="www.facebook.com">facebook</a></li> 
<li><a href="www.twitter.com">Twitter</a></li>
<li><a href="instagram.com">İnstagram</a></li>
</ul>
</body>
</html>

Yorumlar

Bu blogdaki popüler yayınlar

Algoritma İle 4 işlem Hesabı Yapan Program

Merhaba arkadaşlar yeni bir algoritma çalışması ile birlikteyiz.Bu günkü çalışmamız dört işlem üzerine olacak.Girilen iki sayı arasında toplama,çıkarma,çarpma ve bölme işlem sonuçlarını ekranda gösterecek.Mini bir hesap makinesi yapacağız ilerde şimdi sadece 4 işlemi konu alan bir çalışma yaptım. Kolay bir uygulama  üstelik karışıkta olmadı Adımları aşağıda gösterdim.Umarım işinize yarar herkese kolay gelsin iyi dersler. ÇALIŞMADA İZLENECEK ADIMLAR Adım 1: Başla Adım 2: Birinci Sayıyı Gir:A Adım 3: İkinci Sayıyı Gir:B Adım 4: sonuç1=a+b A8 gideceğiz Adım 5 :sonuç2=a-b A9  gideceğiz Adım 6: sonuç3=a*b A10  gideceğiz Adım 7: sonuc4=a/b A11  gideceğiz Adım 8: Toplama işleminin sonucu:sonuç1 Adım 9: Çıkarma işleminin sonucu:sonuç2 Adım 10: Çarpma işleminin sonucu:sonuç3 Adım 11: Bölme işleminin sonucu:sonuç4 Adım 12: Bitir PROGRAMDA YAPIYORUZ; İşlemlerimiz bu kadar arkadaşlar.Göründüğü gibi zor bir tarafı yok.Mantık aynı mantık.Sadec...

C# İle Hesap Makinesi

KOD GÖRÜNÜMLERİ DENEDİĞİMİZDE; ÇALIŞMA KODLARI int sec;             int sonuc, s1, s2;             Console.WriteLine("1.toplama");             Console.WriteLine("2.çıkarma");             Console.WriteLine("3.çarpma");             Console.WriteLine("4.bölme");             Console.Write("İşlem şeç (1-4):");             sec = Convert.ToInt32(Console.ReadLine());             if (sec == 1)             {                    Console.WriteLine("İşlem TOPLAMA İşlemi");                 Console.Write("1.Sayıyı giriniz:");                 Console.Write("2.Say...

PHP İLE VÜCUT KİTLE İNDEKSİ HESAPLAMA

Bu uygulama için 3 ayrı sayfa oluşturmamız gerekecek Birinci sayfa form sayfa olacak ve diğer sayfaya POST-GET medotlarından biri ile gönderilecek. hesapla.html Uygulama.php Burada formdaki textbox isimlerini çağırdık.Ve oluşturduğumuz sinif.php sayfasına yönlendirdik. sinif.php Burada vücut kitle indeksi andında bir sınıf oluşturup döngüyü karara bağladık. ÇALIŞMA KODLARI hesapla.php <form id="form1" name="form1" method="post" action="uygulama.php">   kilo:   <label for="textfield"></label>   <input type="text" name="kilo" id="textfield" /> boy: <label for="textfield2"></label> <input type="text" name="boy" id="textfield2" /> <input type="submit" name="button" id="button" value="Gönder" /> </form> Uygulama.php ...