12 Mayıs 2011, PERŞEMBE

Yatay Navigasyon Menüsü Rakamsız Liste Ve Arka Plan Renkleri İle

P bu bir nother yapmak istiyorum bu video Ralph olduğunu Bu oluşturulan benim son video sırasız listeden navigasyon menüsü arka plan rengini değişiklikleri ile dikey odaklı navigasyon menüsü Bir sonraki kişinin olacak yatay navigasyon menüsü olacak ve tam üzerine koydu Burada aynı web sayfası böylece her iki menüler aynı sayfada olduğunu ve bunu bulabilirsiniz Videonun açıklamasında bu HTML dosyaları CSS dosyası şimdi duruyor kadar kurulumunun biraz burada benim sayfası yapalım Ben arka plan rengi ile benim dikey var ama arka plan ile ben bir yatay renk şimdi Aslında bu her şeyi k

opyasını almak ediyorum şimdi ve h2 devam eden değişim bu yapıştırılan Ben olmak istiyorum ama yatay üzerinde benim ilk navigasyon menüsü Amiga farklı menüler kendini nafta etiketi var ve doksan koymak ilk eşittir tama

m böylece dikey biri ve ben doksan eşitler bu diğer birine gidin Yatay tamam selma siparişleri olduğunu kaydetmek Eğer biz şimdi üzgün gitmek orada Asya ortağı çıkmak umut zaman için belki navigasyon me

“Yatay navigasyon menüsü içine sırasız liste dönüştürmek için CSS kullanın. Demo dosyası: http://www.ralphphillips.com/youtube/ulnavmenus.html...”
Ralph Phillips

nüleri benzersiz tanımlanır Şimdi ben orada bu değişiklikleri yaptı ve ben bunu bir fikir saf gitmek gerekir çünkü benim CSS Benim asıl olandan tüm stilleri Ben iyi bir adam olduğum Bir dakika içinde ve bunun için diyez işareti İlk sette kadar benim referansların her şimdi bu yüzden bu benim dikey üzgünüm tüm kontrol benim yatay şekerleme vardır navigasyon menüsü bu yüzden senin benim şimdi tarayıcı ve reefer kül olduğunu kaydetmek gerekir fark benim dik

Yatay Navigasyon Menüsü Rakamsız Liste Ve Arka Plan Renkleri İle Resim 1 Yatay Navigasyon Menüsü Rakamsız Liste Ve Arka Plan Renkleri İle Resim 2 Yatay Navigasyon Menüsü Rakamsız Liste Ve Arka Plan Renkleri İle Resim 3 Yatay Navigasyon Menüsü Rakamsız Liste Ve Arka Plan Renkleri İle Resim 4

ey navigasyon menüleri gayet emin ve şimdi benim gelecekteki yatay navigasyon menüsü Ben bazı biçimlendirme yapmak gerekir çünkü bu sadece bir düz eski listeye benziyor hücrenin o birinin üzerinde çalışmaya başlayalım ve görmek Benim yatay navigasyon menüsü olacak bir şey yok aynı HTML olacak farklı Eğer bir yatay menü yapmak için yapmanız gereken şeylerin HTML tarafı ile tüm Style Sheets ile yapılır Hücre tarzı o kısmı üzerinde çalışıyor dönelim ve ben de go ahead ve oluşturmak değilim diyez işareti yabancıları manevra

sırasız liste ve ben o beni önceki videoda yapmak gördüm iyi şeyler duyuyorum çünkü dikey yapmak için onlar hemen hemen aynı çift olduğunu konum Küçük farklar böylece bu bir hızlı biraz gidip en ileri gittim ve koyun alacağım görelim içinde Bir arka plan rengi ama do ile ilgili bu Orada o yeşil ve ben yaklaşık 40 piksel devam edin ve seks marjı edeceğiz O Prop 20 piksel doldurma birazcık oldukça iyi biliyorum Seni o adam ilgilenir do cümle yıl efendim seçmek benim şimdi hepsi sırasız listesine öğeler üzerinde giyer Tarzı ile K silahsızlanma anlaşması hiçbiri tamam bu mermilerin kurtulur tipi şimdi diğer menü için ben liste ben sırasız liste için hiçbiri yazın edeceğiz vermedi Şimdi ben liste yapıyorum ben olsa farketmez liste öğesi için hiçbiri alacağım bunu ben sadece bu bir iki yöne gidebilir göstermek istiyorum iki şekilde yapabilirsiniz ne tarz tip 9 sırasız liste için kural içinde gidebilirsiniz Sırasız liste içinde liste öğeleri için kural çalışan gitmek Ayrıca ben Minnesota background-color: Meese tüm siyah yapabilirim ve ben marjı biraz emniyete alacaktır dava Şimdi bu gidiyoruz orada arıyor görelim ve biz bunu nasıl görüneceğini beklemesin tam olarak ne bana bu yüzden benim video biraz daha yüksek, bu bir vida kurmak istiyorum hiç tür burada bu bölümden göz ardı ama ben sprintler Britax değilim Orada aşağı grup yanlış düğme senin kız tekrar onların alanlar yukarı için daha kolay yüzden ben çalışıyorum ne odaklanabilirsiniz yapar burada yani yatay background-color: biz şimdiye kadar var ne Şimdi bir kez daha yan bir iyi tarafı, örneğin barış yapmak için Seni sadece benim liste öğeleri böylece beni o hale gidelim Liste süreleri biraz daha dar Yine 220 piksel ne gerek güçleri ile Bu tasarruf Rio şimdi kendi dar onları yan yana olsun Eğer hatırlayacak olursak ben üyesinde yaptıklarından iki sütun düzeni Video yıllar önce bir iki sütun düzeni yapma bir çift yorumlar temelde iki sütun düzeni birkaç bira aldı ya o video kullanılan bölüm etiketleri: bölümlerin ruh çift Öyle sola sonraki eti bir bölüm süzülüyor bölüm burada yapılacak aynı şey sağa yukarı doğru kaydırın istiyorum Liste öğeleri sadece bölümleri yoksul canlarım veya başlık olanlar gibi blok elemanları vardır onarım çim o sağa yukarı doğru kaydırın olacak şu ne olursa olsun enerji akışı 01:02 Sol bir oda var varsayarak ve bunlar dar olduğundan bol ne var ki bu bir sorun olmamalı anlaşma Benim liste tüm öğeleri yüzer olacak hücre ritmine üzgünüm para ne şu şekilde sol aktı orada Oranı yukarı tarafında başka tarafın bu ilgilenelim slaytlar Sırasız liste Ben taşması olacak koymak kulüpler genişletmek ve yüzen bu nesneleri içeren sağlayacak olan gizli tamam bu yüzden işler gerçekten iyi arıyoruz burada yatay var navigasyon menüsü Ne iyi ben işlemek için gidiyorum biraz o kadar temiz çapa listemi öğeleri içinde çok benim idi Zainal şimdi içinde sırasız listesi vardır onların Bazı liste öğeleri bu içinde olduğunu içinde bazı gerçekleştikçe vardır Ben bu çapa almak Ben bu blok elemanları görüntülenen gonna ediyorum Ben işleyebilirsiniz böylece blok elemanı haline dönüşecektir kendi kum marjları ile çok daha kolay ve ben de bir 120 piksel olmak için bu orada oturup değilim casa yüksekliği 30 piksel metin bir dakika olmak Metni merkezi olacak çevrimiçi merkezi Sadece düğmeye içinde on AM Bell Merkezi'nde metin kuvvet Hayvanlar olacak line-height yapın: 30 piksel Dikey menüde: tamam ben line-height kullanıldığı hakkında konuştuk yani line-height yapıyor: bu yükseklik aynı şey olacak bu blok çapa kadar dikey merkezli bakmak yapmak Tamam düğmesini ve gitmeme ve güzel bir parlak renk ayarlamak izin sarı O siyah arka plan beri bu değişikliklerin yenileme yapmak için geldi mükemmellik şimdi doğru her yerde benim işaretçi koyabilirsiniz fark edeceksiniz siyah düğme o köprüler durumunu almak için Nehir metin dekorasyon almaya gidiyordu: Burada ne yapıyorum bakın görünce yukarı ve en az yaklaşık görelim font-weight: bold iyi görünüyor font-size: dokuz puan ve mütevazı ama metin dönüşümü ettik: Büyük Biz gidip orada böylece benim navigasyon menüleri benim yatay bakarak nasıl navigasyon menüsü Yapmanız belki bir sonraki şey, sadece bu sırasız liste almak ve ben dar duyuyorum aşağı biraz 10 Ben iyi matematik olsaydı ben tam ihtiyacım numarayı söyleyebilirdim 244 e görelim böylece düğmeleri ile yaklaşık 480 piksel arasında biraz boşluk darbe Ben öylece sen tahmin ediyorum 520 piksel o ve ben biraz deneme yanılma yapacağız Eğer Nero onların Tamam kaydetme yok İyi Kim aslında sevindim bu yüzden benim 100 listesine içeren Nero yapıldı oldu Tüm dört düğme arasında orada farklı bir alanda bu yüzden benim düğmeleri hemen sonra yani orada dibinde devrilen aldığımda onların Bir konser burada bir seferde biraz yukarı gitmek gerekir en biraz daha büyük oraya gidiyoruz gidelim bu yüzden şimdi ben yan benim düğmeleri yan alabilirsiniz Benim yatay navigasyon menüsü WI var backgroundcolors beni çok sadece bu yüzden biz orada biraz vurgulu yapalım bu işi biraz benim kopya o seçici yağmurluk yapmak Başka biri yapmak ama bu olacak vurgulu devlet olacak ve benim çapa etiketleri ben arka plan yapmak renk Dört yuvarlak yakalı kırmızı itibaren sarı ve oldukça iyi Linzi bakmak için Biz oraya gitmek yenilemek Şimdi ben zaten kilolu senin büyük değişiklik kullanarak beri K böylece arka plan renklerini kullanarak benim yatay navigasyon menüsü var Gerçekten hoş çok dikey menü aynıdır ama her liste yüzen ediyorum sola öğe.

Açıklama

Yatay navigasyon menüsü içine sırasız liste dönüştürmek için CSS kullanın. Demo dosyası: http://www.ralphphillips.com/youtube/ulnavmenus.html

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Ralph Phillips

Ralph Phillips

Üretkenlik yazılımları ve web geliştirme üzerinde durularak öğretici videolar. Web Geliştirme, HTML, CSS, JavaScript, PHP, Internet, SEO, Flash, Dreamweaver, Excel, Access, Word, PowerPoint, Web tabanlı uygulamalar ...

YORUMLAR



10/10

  • 27
    Olumlu
  • 0
    Olumsuz
  • 11
    Yorum
  • 4411
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • jeffisthecoolguy

    jeffisthecoo

    17 HAZİRAN 2013
  • modica89

    modica89

    24 HAZİRAN 2007
  • SellerDp

    SellerDp

    27 EKİM 2009

ANKET



Bu sayfa işinize yaradı mı?