HTML ve CSS Kullanarak Yatay Menü Yapımı

• İlk olarak menümüzün iskeletini oluşturalım yani HTML kodlarını yazalım.

HTML Menü Yapısı Kodu 1.1

• Şimdi ise menümüzün iskeletini olulşturduktan sonra CSS yani kıyafetlerini giydirmeye başlayalım.

İlk olarak "menu" class 'ına Yükseklik , Genişlik Verelim.

CSS Menü Kodu 1

Sonrasında ise menü içindeki iç ve dış boşluklarını ortadan kaldıralım.

CSS Menü Kodu 2

Sonrasında menü 'nün yan tarafındaki düzensiz liste elemanı olduğu için şekilleri kaldırıcaz. Yatay menü olması için 'de yan yana gelmesini sağlıcaz.

CSS Menü Kodu 3

• Ve Şimdi ise menü 'ye artık tasarım dokunuşları yaparak daha iyi bir görünüşe kavuşturucaz.

CSS Menü Kodu 4

1. .menu 'nun içinde ul 'un içindeki li 'nin içindeki a 'ya
2. Yazımızı Ortalar
3. Yazımızın altındaki çizgiyi kaldırır
4. Yükseklik ve Genişlik vermemizi sağlar
5. Her bir kutucuk yüsekliği
6. Her bir kutucuk Genişliği
7. Yazımızın Kalınlığı
8. Menümüzün arkaplan rengi
9. Yazımızın rengi
10. Yazımızın font 'u
11. Kenarından 20px ve 10px kıvırır
12. Yazıyı Yukardan ve Aşağıdan ortalar
13. Kenarlarına 1px kalınlığında düz beyaz kenarlık atar

Şimdi biraz daha güzel hoş bir görüntü katıcağız. {hover} olayı üzerine geldiğinde anlamını taşıyor.

CSS Menü Kodu 5

1.     background-color: crimson;           ➡️ ARKA PALAN RENGİ.              

2. color: white;                                          ➡️ RENG.

3. font-weight: 800;                                  ➡️ YAZI KALINLIĞI.

4. border-bottom: 2px solid #00FBFF;  ➡️ KENARLIK EKLER.

5. border-radius: 0px;                               ➡️ KENARINDAN KIVIRIR.

Dersteki Anlatılan Örneğin İndirme Linki ;   ! İNDİR !

RAR ŞİFRESİ :  html-seruveni.blogspot.com

Share on Google Plus

About codepage

Herkeze merhaba millet! benim adım mesut şuanda öğrenciyim ve bu işlerle uğraşmayı sevdiğim için böyle bir site açmaya karar verdim umarım işinize yarar.