Yazılım ve web sitesi geliştirmenin en önemli yönlerinden biri menü oluşturmadır. Microsoft ve onun en ünlü buluşu olan Windows işletim sistemi en iyi örnek olarak alınmalıdır. Bu ürünün dünyadaki PC kullanıcılarının ezici çoğunluğu tarafından kullanılmasına rağmen, eleştiriler sadece azalmakla kalmıyor, sürekli artıyor. Temel olarak, menü öğelerinin konumunun rahatsızlığı ile ilgilidir. Aşağıda, CSS ve Expression Web'de menülerin nasıl oluşturulacağı anlatılmaktadır.
Talimatlar
Aşama 1
Yatay bir menü oluşturmaya başlamak için Stili Yönet'e gidin ve ardından Yeni Stil düğmesini tıklayın. Yeni stile Selector ul li adını verin. Önemli! Oluşturulan dosyanın drop-down.css uzantısına sahip olduğundan emin olun. Yatay bir menü oluşturmak için oluşturulan öğeye tam olarak yatay olacağını belirtin. Ardından, her menü öğesinin genişliğini belirleyin ve listedeki tüm öğelerin önüne yerleştirilmiş tüm gereksiz noktaları kaldırın.
Adım 2
Düzen seçeneğine gidin, yatay hizalama yapmak için Görüntü özniteliğini Satır İçi olarak ayarlayın. Ardından, Sol değerini Float özniteliğine ayarlayın ve Apply (Uygula) düğmesini tıklayın. Tüm liste öğelerini bir satıra ayarlayın. Düzgün bir şekilde yerleştirilmeleri ve üst üste sürünmemeleri için Genişlik özelliğinde Konum değerini 150 piksel olarak ayarlayın. Listenin tüm öğelerinin aynı boyutta olup olmadığını kontrol edin. Ardından, tüm öğelerin önündeki noktaları kaldırın - bunun için Liste niteliğine gidin ve Liste Stili türü öğesinde Yok parametresini ayarlayın. Tüm değişikliklerin kabul edilmesi ve uygulanması için Tamam'a tıklayın.
Aşama 3
Ul li için yazı tipi boyutunu ve stilini ayarlayın. Bunu yapmak için, Stilleri Yönet'e gidin ve ul li'ye sağ tıklayın, ardından Stili Değiştir'i seçin. Tanıdık iletişim kutusu görünecektir. Font'a gidin, Font-family niteliğini seçin ve Sans-serif, Arial, Helvetica olarak ayarlayın. Ardından, yazı tipi boyutunu 0, 9'a ayarlayarak ayarlayın. Bundan sonra, Metin dönüştürme özelliğini Büyük Harf olarak ayarlayın. Yükseklik - Konum özniteliğinde menü öğelerinin yüksekliğini ayarlayın, değeri 30 piksele ayarlayın.
4. Adım
Tüm düzeltici eylemleri tamamladıktan sonra dosyayı menu.html olarak kaydedin. Ardından, doğru çalıştığından emin olmak için oluşturulan menüyü farklı tarayıcılarda test edin. Gördüğünüz gibi, yatay menünün tasarımı oldukça basittir.
