06/06
CSS ve Resim Yok Sekmeli Gezinme Nasıl Oluşturulur
Web sayfalarında gezinme, bir liste biçimidir ve sekmeli gezinme, yatay bir liste gibidir. CSS ile yatay sekmeli gezinme oluşturmak oldukça kolaydır, ancak CSS 3 bize daha güzel görünmeleri için birkaç araç daha sunar.
Bu eğitici, CSS sekmeli bir menü oluşturmak için gereken HTML ve CSS'yi size götürecektir. Nasıl görüneceğini görmek için bu linke tıklayın.
Bu sekmeli menüde görüntü yok , sadece HTML ve CSS 2 ve CSS 3. Daha fazla sekme eklemek veya içindeki metni değiştirmek için kolayca düzenlenebilir.
Tarayıcı Desteği
Bu sekme menüsü tüm önemli tarayıcılarda çalışacaktır. Internet Explorer yuvarlatılmış köşeleri göstermez, ancak aksi halde Firefox, Safari, Opera ve Chrome gibi sekmeleri gösterir.
02/06
Menü Listenizi Yazın
Tüm navigasyon menüleri ve sekmeler gerçekten sadece sıralanmamış bir listedir. Yani yapmak istediğiniz ilk şey, sekmeli gezintinizin nereye gitmesini istediğiniz sıralanmamış bağlantılar listesidir.
Bu eğitim, HTML'nizi bir metin düzenleyicisine yazdığınızı ve menünüze ait HTML'yi web sayfanıza nereye yerleştireceğinizi bildiğinizi varsayar.
Sıralanmamış listenizi şu şekilde yazın:
- class = "tablist">
- CSS 3
- id = "mevcut"> Sekmeler
- İçin
- Menüler
Kodun iki şeyi çağırdığını fark edeceksiniz: class = "tablist" ve id = "current". İlk gerekli . Sekme listesi sınıfını sırasız listeye koymazsanız, sekmeler çalışmayacaktır. İkincisi isteğe bağlıdır. Bu sayfada vurgulanmak istediğiniz sekmede id = "current" değerini girin. Bunu genellikle bulunduğum sayfayı vurgulamak için kullanırım, ancak en önemli sekmeyi vurgulamak için kullanabilirsiniz. Ya da tamamen kaldırabilirsiniz.
03/06
Stil Sayfanızı Düzenlemeye Başlayın
Harici stil sayfası veya dahili stil sayfası kullanabilirsiniz . Örnek menü sayfası, belgenin
bölümünde dahili bir stil sayfası kullanır.Önce UL Kendini Stillendireceğiz
Bu, HTML'deki class listesini kullanıyoruz. Sayfanızdaki tüm sıralanmamış listeleri stilleyecek olan UL etiketini şekillendirmek yerine, yalnızca UL sınıfını stillemelisiniz. tablist CSS'nizdeki ilk giriş şu şekilde olmalıdır:
.tablist {}Zamanın sonundaki kıvrık kaşlı ayraçları (}) koymayı seviyorum, bu yüzden daha sonra unutmam.
Sekme menü listesi için sıralanmamış bir liste etiketi kullanırken, ancak herhangi bir mermi veya sayının içeri girmesini istemiyoruz. Bu nedenle, eklemeniz gereken ilk stil. list-style: none; Bu, tarayıcıya bir liste olsa da, önceden belirlenmiş stiller (mermi veya sayı gibi) içermeyen bir liste olduğunu söyler.
Ardından, listenizin yüksekliğini, doldurmak istediğiniz alanı eşleştirmek için ayarlayabilirsiniz. Yükseklik için 2em seçtim, çünkü standart yazı tipi boyutu iki katına çıkıyor ve sekmenin metninin üstünde ve altında yaklaşık yarım em veriyor. yüksekliği: 2em; Ancak, genişliğinizi istediğiniz boyuta getirebilirsiniz. UL etiketleri otomatik olarak genişliğin% 100'ünü alacaktır, bu yüzden mevcut konteynerden daha küçük olmasını istemiyorsanız, genişliği dışarıda bırakabilirsiniz.
Son olarak, ana stil sayfanızın UL ve OL etiketleri için önayarları yoksa, bunları koymak isteyeceksiniz. Bu, UL'nizdeki kenarlıkları, kenar boşluklarını ve dolguyu kapatmanız gerektiği anlamına gelir. dolgu: 0; marjı: 0; kenarlık: yok; UL etiketini zaten sıfırladıysanız, kenar boşluklarını, dolguyu veya kenarlığı tasarımınıza uyan bir şeyle değiştirebilirsiniz.
Son .tablist sınıfınız şöyle görünmelidir:
.tablist {list-style: none; yüksekliği: 2em; dolgu: 0; marjı: 0; kenarlık: yok; }04/06
LI Liste Öğelerini Düzenleme
Sıralanmamış listenizi tasarladıktan sonra, içindeki LI etiketlerini stillemeniz gerekir. Aksi takdirde, standart bir liste gibi davranacaklar ve sekmelerinizi doğru bir şekilde yerleştirmeden her bir sonraki satıra geçeceklerdir.
Öncelikle stil mülkünüzü kurun:
.tablist li {}Ardından, sekmelerinizi yatay düzlemde sıralanacak şekilde yüzdürmek istiyorsunuz. yüzer: sol;
Sekmeler arasında bir miktar boşluk eklemeyi unutmayın, bu nedenle birlikte birleşmezler. margin-right: 0.13em;
Li stilleri şöyle görünmelidir:
.tablist li {float: left; margin-right: 0.13em; }05/06
Sekmelerin CSS 3 ile Sekmelere Bakılması
Bu stil sayfasındaki ağır kaldırmanın çoğunu yapmak için, sırasız liste içindeki bağlantıları hedefliyorum. Tarayıcılar, bağlantıların bir web sayfasında diğer etiketlerden daha fazla şey yaptığını fark eder, bu nedenle bağlantı istasyonlarına (bağlantılar) eklerseniz daha eski tarayıcıların gezinme durumları gibi şeylere uyması daha kolaydır. Bu yüzden önce stil özelliklerinizi yazın:
.tablist li a {} .tablist li a: hover {}Bu sekmeler bir uygulamada sekmeler gibi davranması gerektiğinden, yalnızca bağlantılı metin için değil, sekmenin tüm alanının tıklanabilir olmasını istersiniz. Bunu yapmak için, A etiketini normal " satır içi " durumundan bir blok öğesine dönüştürmeniz gerekir. Ekran bloğu; (Fark hakkında daha fazla bilgi sahibi olmak istiyorsanız, Block-Level vs. Inline Elements bölümünü okuyun.)
Daha sonra, sekmelerinizi birbirleriyle simetrik olmaya zorlamak için kolay bir yoldur, ancak yine de metnin genişliğini sığdırmak için esnek olmaları, sağ ve sol dolguların aynı olmasını sağlamaktır. Üst ve altını 0'a, sağa ve sola 1em'e ayarlamak için dolgu kısayolu özelliğini kullandım. dolgu malzemesi: 0 1em;
Ayrıca bağlantı altlarını kaldırmayı seçtim, böylece sekmeler daha az bağlantıya benziyor. Ancak, kitleniz bununla karıştırılabilirse, bu satırı dışarıda bırakın. Bağlantı-decoration: none;
Sekmelerin etrafında ince bir kenarlık koyarak, onları sekmelere benzetir. Dört kenar sınırının etrafındaki sınırı koymak için sınır kısayol özelliğini kullandım: 0.06em katı # 000; Ve sonra alttan kaldırmak için sınır-alt özelliğini kullandı. Çerçeve dipli: 0;
Sonra sekmelerin yazı tipi, rengi ve arka plan renginde bazı ayarlamalar yaptım. Bunları sitenizle eşleşen stillere göre ayarlayın. yazı tipi: kalın 0.88em / 2em arial, geneva, helvetica, sans-serif; Renk: # 000; Arka plan renkli: #ccc;
Yukarıdaki stillerin tümü, genel olarak bağlantı etiketlerini etkileyecek şekilde seçici .tablist li a kuralına girmelidir. Daha sonra sekmelerin daha tıklanabilir görünmesini sağlamak için, birkaç durum kuralı .tablist li a: hover eklemelisiniz.
Metnin üzerine geldiğinizde sekmenin pop olmasını sağlamak için metnin ve arkaplanın rengini değiştirmeyi seviyorum. background: # 3CF; Renk: #fff;
Ayrıca, tarayıcıya, bağlantının altı çizilmeyecek şekilde kalmasını istediğim başka bir hatırlatma ekledim. text-decoration: none; Diğer bir yaygın yöntem, sekmenin üzerine fare tıklattığınızda alt çizgiyi tekrar açmaktır. Bunu yapmak isterseniz, metin dekorasyonuna değiştirin: alt çizgi;
Ama CSS 3 nerede?
Dikkat ediyorsanız, muhtemelen stil sayfasında kullanılan CSS 3 stilleri olmadığına dikkat çektiniz. Bu, Internet Explorer dahil olmak üzere herhangi bir modern tarayıcıda çalışmanın avantajına sahiptir. Ancak, sekmelerin kare kutulardan başka bir şey gibi görünmemesidir. Bir CSS 3 stili çağrı sınır yarıçapı (ve ilgili tarayıcıya özgü aramalar) ekleyerek, bir manila klasöründe sekmelere daha çok benzemek için kenarları yuvarlayabilirsiniz.
.tablist'e eklemeniz gereken stiller şu şekildedir: -webkit-border-top-right-radius: 0.50em; -webkit ötesi-sol üst-yarıçapı: 0.50em; -moz ötesi yarıçap topright: 0.50em; -moz ötesi yarıçap topLeft: 0.50em; border-top-sağ yarıçapı: 0.50em; border-top-left-radius: 0.50em;
Bunlar yazdığım son stil kuralları:
.tablist li a {display: block; dolgu malzemesi: 0 1em; text-decoration: none; kenarlık: 0,06em katı # 000; Çerçeve dipli: 0; yazı tipi: kalın 0.88em / 2em arial, geneva, helvetica, sans-serif; Renk: # 000; Arka plan renkli: #ccc; / * CSS 3 öğeleri * / webkit-sınır-üstü-sağ yarıçapı: 0.50em; -webkit ötesi-sol üst-yarıçapı: 0.50em; -moz ötesi yarıçap topright: 0.50em; -moz ötesi yarıçap topLeft: 0.50em; border-top-sağ yarıçapı: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: vurgulu {background: # 3cf; Renk: #fff; text-decoration: none; }Bu stillerle, tüm önemli tarayıcılarda çalışan sekmeli bir menünüz vardır ve CSS 3 uyumlu tarayıcılarda güzel basılı sekmeler gibi görünür. Bir sonraki sayfa size daha fazla elbise giymek için kullanabileceğiniz bir seçenek daha sunuyor.
06/06
Mevcut Sekmeyi vurgula
Oluşturduğum HTML'de, UL'nin bir kimliği olan bir liste öğesi vardı. Bu, bir LI'ya diğerlerinden farklı bir stil vermenizi sağlar. En yaygın durum, mevcut sekmenin bir şekilde öne çıkmasını sağlamaktır. Bunu düşünmenin başka bir yolu da, canlı olmayan sekmeleri gri tutmak istediğinizdir. Daha sonra, kimliğin farklı sayfalarda nerede olduğunu değiştirirsiniz.
Hem #current A etiketinin hem de #current A: hover sta'yu her ikisinin de biraz farklı olmasını sağlarım. Rengi, arka plan rengini, hatta o elemanın yüksekliğini, genişliğini ve dolgusunu değiştirebilirsiniz. Tasarımınızda hangi değişikliklerin anlamlı olduğunu öğrenin.
.tablist li # current bir {background-color: # 777; renk: #fff; } .tablist li # geçerli a: vurgulu {background: # 39C; }Ve işin bitti! Web siteniz için yeni sekmeli bir menü oluşturdunuz.