Siteye kendiniz için yatay menü olun

Yatay menü hemen hemen her site var - bu çekmek veya aksine, ziyaretçileri korkutmak için görünümü ve kullanılabilirlik ile olabildiğince çok önemli bir parçasıdır. en bir ilköğretim yatay menü oluşturmayı öğrenmek edelim: yaratma temel becerileri edinmek için, HTML o "iskelet" olun. Kesinlikle hazır bir menü bulabilirsiniz, ama çok daha güzel kendiniz geliştirmek öğrenmek için. Oldukça eğlenceli.

menüsünü yapmayı öğrenin

Biz düzeni lider rakamlara bağlı semantik, sapma çalışıyorum. Öncelikle, HTML bizim menüler için bir "iskelet" make kendi yatay menüler yapabilme becerisinin öğrenmek zorundayız. Ve sonra stil sayfalarını kullanarak, süsleyecek. Bizim yatay menü 5 öğe içerir edelim. ilk öğe ana sayfasına yönlendirileceksiniz. İkinci nokta - "Hakkımızda". Üçüncü - "Bizim ödül". Dördüncü - "Bu eğlenceli." Beşinci - "Bize ulaşın".

HTML kodu şöyle:

bilmiyor Kim: ul etiketi için kullanılan mermi, onun elemanları li ile başlar. Li etiketleri ul uygulanır stilleri devralır.

Ul - listenin blok elemanı, bu genişliğine uzatılır. Li, aynı zamanda bir bloktur.

Yani, bir index.html oluşturun. Bizim kodunu toplamak. Bu noktada, tarayıcı ziyade yatay bir menü daha dikey görüntüler. Ama size amacı ile biz - site için yatay menü yapmak. Bunun için CSS gerekir.

CSS nedir?

sitelerin gelişim master henüz varsa, Basamaklı Stil Sayfaları kavramı hakkında bilgi almak için gereklidir. Aslında bu web sitesinin sayfalarında farklı elemanlarına uygulanan biçimlendirme, işleme kurallardır. Biz standart HTML elementlerin özelliklerini geçerliyse, kod aynı parçaları bir tekrarını olsun, bu birkaç kez tekrarlamak zorunda kalacaktır. kullanıcının bilgisayarında sayfa yükleme süresi artacaktır. Bunu önlemek için, CSS yoktur. Sadece bir kez belli bir eleman tarif etmeye kelimeler yetersiz ve sonra basitçe nerede belirli bir stil özelliklerini kullanmak göstermektedir. Sayfanın kendi metin değil, aynı zamanda başka bir dosyada sadece açıklamasını yapmak mümkündür. Bu sitenin tüm sayfalarında farklı stilleri tanımını uygulamak sağlayacaktır. CSS dosyasında değişiklik, bazı sayfaları değiştirmek için de uygundur. Stil sayfaları sitenin grafik sayfalarını kötüleşen önlemek için yardımcı HTML daha iyi bir seviyeye yazı ile çalışmaya olanak sağlar.

Menü gelişimi için stil sayfaları kullanma

menü için CSS-kodu:

1. # My_1menu {list-style: none; dolgu: 6; en: 800 piksel; marjı: otomatik;}
2. # My_1menu li {float: left; yazı tipi: italik 18 pikselden Arial;}
3. # My_1menu a {color: # 756; görüntü: bloğu; yüksekliği: x 55 piksel; satır yüksekliği: x 55 piksel; dolgu: 0 piksel 15 piksel 0 piksel 15 piksel; Arka plan: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Şimdi ortaya çıkan yatay CSS menü bakalım.

- planlanan öğelerin bıraktığı izleri kaldırmak için bu komut yok: - # My_1menu böylece id = my_1menu, liste-tarzı ile UL elemanı için stil tahsisi yoktur.

genişlik: 800px - menümüz genişliği 800 piksel.

padding: 0 - Bu iç dolgu kaldırır.

margin: auto - Sayfamızın merkezinde yatay menü vyravnivnie.

# My_1menu li - stilleri li-elemanlarını atama.

height: x 55 piksel - menü yüksekliği.

# My_1menu a: hover - elemana stilleri atama ve indüklenir fare.

Her geliştirici burada kendi parametreleri belirtebilirsiniz gibi, ayrıntılı olarak her satırını tarif olmaz. Web sitesinde menüde stilleri kullanılmak üzere bu temeli. Sen resimleri kullanarak, bunu bir daha bitmiş ve güzel bir görünüm verebilir. örneğin, arka plan elemanı, özellikle atama fakat: URL (img1.png) tekrar-x. repeat-x bir için url (img2.png): vurgulu arka plan orada olalım.

hayal gücünüzü, yaratıcı tercihlerini kullanın. Sonra web sitesinde basit bir menü oluşturmak için nasıl bu bilgiye dayalı, sen kendine has tasarımı ile bir sayfayı gelişebilir.