Şeffaf Web Sitesi Gezinme Çubuğu Nasıl Oluşturulur

Gezinme çubuğunuzu belirli bir şekilde şekillendirerek, işletmenizin markasını ve tasarımını güçlendirebilirsiniz. Gezinme çubuğunuzun görünümünü dikte etmek için HTML ve CSS (Basamaklı Stil Sayfası) kodunun bir kombinasyonunu kullanarak sitenizde tutarlı bir görünüm ve his yaratabilirsiniz. Gezinme çubuğunu şeffaf yapmayı seçerseniz, bu, onu içeren bir öğenin arka planı veya arka planıyla aynı renkte olacağı anlamına gelir.

1

Gezinme çubuğunuz için bir HTML bölümü oluşturun. Üzerinde çalıştığınız sayfanın HTML dosyasında, gezinme çubuğunu eklemek istediğiniz bölümü bulun. Aşağıdaki gibi içermek için bir öğe kullanın:

Açılış ve kapanış etiketleri arasına gezinme bağlantılarınızı yerleştirebilirsiniz.

2

İhtiyaç duyduğunuz her gezinme bağlantısı için bir bağlantı öğesi ekleyin. "Gezinme" öğesinin içine, kullanıcıların göz atabilmesini istediğiniz her bağlantı için bir bağlantı öğesi ekleyin. Aşağıda, bir site bölümüne bağlanan örnek bir bağlantı öğesidir:

hakkında

Bu, site içinde, bu kodun göründüğü sayfayla aynı dizinde bulunan "hakkında" adlı bir klasörde bulunan bir bölüme bağlanır. Bir klasör yerine bir sayfaya bağlantı vermek için, biçimlendirme HTML için aşağıdaki gibi görünmelidir :

hakkında

3

Sayfanıza bir stil bölümü ekleyin. Gezinme çubuğunu biçimlendirmek için CSS kodu için bir bölüme ihtiyacınız var. Sayfanızın baş bölümünde, kapanış etiketinin önüne aşağıdaki gibi bir tane ekleyin:

Bunun içine, sayfanızdaki öğelerin stilini belirlemek için bildirimler ekleyebilirsiniz.

4

Çapaların stilini belirleyin. Sayfanızın CSS bölümünde, gezinme çubuğunuzdaki bağlantıların stilini belirlemek için bildirimler ekleyin. Örneğin, içindeki tüm bağlantı öğelerini kimlik özniteliği olarak "nav" ile biçimlendirmek için aşağıdaki seçicileri kullanabilirsiniz:

/ stil bildirimleri /

}

Bu, tüm eyaletlerdeki çapaları gösterir. Bu bölümün içine, uygulamak istediğiniz stil bildirimlerini ekleyebilirsiniz, örneğin:

metin dekorasyonu: yok; genişlik: 100px; Ekran bloğu; şamandıra: sol;

Bunlar, ankrajları yatay bir çizgi üzerinde yan yana görüntülemek için standart özelliklerdir. Öğenin kendisini biçimlendirmek için aşağıdaki sözdizimini kullanın:

genişlik: 800px; }

5

Arka planı şekillendirin. CSS'de gezinme çubuğunuza bir arka plan özelliği uygulamazsanız, varsayılan olarak şeffaf bir arka planla görüntülenir. Bununla birlikte, sayfanın arka planı veya arkasında başka bir içeren öğe ile görüntülenebilir. Örneğin, gövde öğesi için aşağıdaki CSS bildirimi, arka plan resminin gezinme çubuğunun arkasında görüntülenmesine neden olur:

gövde {arka plan resmi: url ("bgpic.jpg"); }

Gezinme çubuğu için bir arka plan görüntüsü veya renk belirtmediğiniz sürece, şeffaf arka planla görüntülenmesi gerekir.