12 Mayıs 2011, PERŞEMBE

Sırasız Liste Ve Arka Plan Renkleri İle Dikey Navigasyon Menüsü

Hey bu kullanarak bir navigasyon menüsü oluşturarak üzerine gitmek bu videoyu İstiyorum Ralph olduğunu sırasız liste bölümünde bu konuyla ilgili bir kaç farklı videolar olacak ve ben onun silahlarla çalışmaz bu bir dikey özellikle olacak amaçlı Ben bu yüzden arka plan rengini kullanarak navigasyon menüsü ne bir bir noktaya Page geliyor Kurulum var burada iyi başlamak oluyor Ben bir html5 doctype tanım başlığı ile seks var mister dahil karakter benim CSS işe yarıyor boş iç tarzı var vücut benim sayfa sadece bir başlık olarak adlandırılan bir ama navigasyon menüleri vardır ve ben za

ten bu özel menü için bir başlık kurdum olacak arka plan renkleri ile El Vertical üzerinde çalışmak ve ben kullanabilir farklı stilleri için aynı sayfa Koleksiyon, farklı menüler ve ben bu yapacağız Videonun açıkla

masında size sunulan sayfa Bu linke tıklayarak beri yakala size bazı iyi bir hikaye istiyorum eğer senin O beri görmek tahmin edersem ANSI füzeleri biraz eserlerin ve zoom vardı ve Girit bu artık yasadış

“Dikey bir 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

ı Menü artık bu minis hepsi olacak dahilinde oluşturulacak olan Listeyi emretti ve bu gerçekten şimdi satmak oranı gitmek yoludur üzerinde Ben sırasız liste kurmak iyiyim ve bir var benim kendi sıralı liste içinde ben Liste öğeleri serisi Her liste öğesi bir içinde bir köprü var olacak olan ve ben sadece bakalım şimdi bana bağlantısını iyi geliyor yapmak gerekir Bir köprü temel bakalım alanlar Şimdi bir kaç kere alanları satır biz var taş tekrarı Kenema navi

Sırasız Liste Ve Arka Plan Renkleri İle Dikey Navigasyon Menüsü Resim 1 Sırasız Liste Ve Arka Plan Renkleri İle Dikey Navigasyon Menüsü Resim 2 Sırasız Liste Ve Arka Plan Renkleri İle Dikey Navigasyon Menüsü Resim 3 Sırasız Liste Ve Arka Plan Renkleri İle Dikey Navigasyon Menüsü Resim 4

gasyon menüsü kendi sıralı liste kapanışında burada oluyor Her liste öğesi bir olduğu kadar benim kendi kelime listesi liste öğeleri için bu durumda var köprü a ne sayfası artık biliyorum naif artık adında yeni bir unsur olduğunu html5 öz ile Tamam Bir Deniz Kuvvetleri bütün bu kapatamadı Elbette vergi kurmak, bu bize bir belirlemek yardımcı olacaktır Bizim navigasyon bölümünde sırasız liste olacak farklı muamele edilir göre bir yerde sahada başka ve bu doğrudur iyi listesinde ve iyi dinleyici ek altında o olacak ölçüd

e farklı bakmak var Daha sonra sırasız liste sayfanızda bazı kuralları istedim gerçekten listeyi iptal Ben nafta etiketini kullanarak ilgili çit hala yaşıyorum Ben kullandığım vermedi eğer gerçekten, örneğin burada bir şey rüzgar değil çünkü nafta etiketler: Ben sadece benzersiz bir kimlik benim sırasız liste gidebiliriz Mektup menü var gibi açıkça olur benzersiz kendi 100 listesinde değil tanımlamak böyle bir navigasyon menüsü yüzden orada alanlar var olduğu ve ben kesinlikle herhangi bir farklı bu yaz listeyi biçimlendirebilirsiniz ben deneysel olduğumu sana kadar tür böylece diğer sırasız liste Ben mevcut yeni bir yana taft etiketi davayı kullanarak başlamak edeceğim Bize en oa denemek vereyim nafta etiketi gerçekten herhangi kendisi kadar biçimlendirme yok o tespit amacı sadece kendi olduğunu o sıyrılıyor böylece ne içerdiğini bu yüzden benim sırasız liste de benim nap içinde Ben gideceğim net biraz o yaptım Bu yüzden biz bir benzediğini bu gösterisi görmüyorum bugüne kadar ne var benim Tarayıcı orada bu herhangi için ne beklenir go Bu örnekte de iptal edilen liste aşk köprüler sırasız liste Bu navigasyon menüsü sırasız liste için gerçekten iyi de için iyidir navigasyon menüsü artık önemi yoktur sırasız liste ima çünkü sayfa 4 sayfa iki orada daha Bu sıralı liste üzerinde işaretli liste ya da size bir listesini verir vermez ne ürün Önem sırasına göre herhangi ima etmeden böylece biz başlamak için gidiyoruz ne içine nasıl CSS üzerinde ve gerçekten çoğu bu çatlama olsun Hücre bir oluşturarak bir yıldız değilim 37 margin: 0 piksel padding: 0 piksel ve reset kuralı çift videoları önce yetişmiş ve ben her zaman yaptığım bir şey ve ben muhtemelen hep yapıyor alışkanlığı alırsınız bu videoları Kurallar bu fantastik ekleyerek set şeyi 20 Kenar Boşluklarını Avrupa'yı yapacağız reset web tasarımları tutarlı bakmak oluşturmanıza yardımcı olacak bir yol Bütün büyük tarayıcılar Safari Opera Chrome IE Firefox arasında bu nedenle her zaman olacak, benim toplama kuralları başında son kural koymak Ben bir iç stilleri kullanarak ve burada veya daha fazla yapıyorum olsun harici stil sayfasını kullanarak daha gerçekçi tamam şimdi şeyleri görmek, böylece ben de bazı şeyler koymak duyuyorum Çeşitli background-color in: Biri bugün lotta arka plan renklerini var Bir özellikle başlangıçta bu yüzden biraz bunları nasıl yapılandırıldığını görebiliyorum Bu içinde şimdi bir var ben bir buçuk var Sırasız liste tamam bu bir terbiyeli Seçici ben Sırasız liste işlemek istiyorum Bu içinde ve elbette farklı matematik ve sadece Sırasız liste söyleyerek K I olsaydı tüm o bunu yapmak için Sırasız liste aynı formata sahip ancak soyundan kullanarak ederim gözlerimi söyleyerek seçiciler benzersiz olması benim NAB en sereceğim öyle sırasız liste ve şimdi ben go ahead ve diyecek background-color: diyez işareti koyu, orta, koyu kırmızı ve Colorado önce renkli Beyaz K bazı biz devam edin ve benim tarayıcı ve yenileme üzerinden bu işi kurtarmak Şimdi o reset kural nedeni var benim marj dolgu bir sürü kaybettim Bu sırasız liste Tamam olduğu ama şimdi biz açıkça görebiliyorum Sırasız liste navigasyon menüsü ve tabii Eğer önceki videoları izledim eğer şimdi hey bu olduğunu biliyorum Karakteristik bir blok elemanı Blok elemanları bu yüzden kendilerine sunulan tam bir sürebilir Bu bizi Sırasız listede bir blok elemanı olduğunu biliyorum sağlar ve gerçekten bu yüzden beni Hanson biraz yapalım orada benim panoları göremiyorum Ben go ahead ve bu yaklaşık 20 piksel bazı marj koymak ediyorum o 40 piksel hakkında çok az biraz daha büyük orada bakın biz bu alınan bakım ve var gitmek ve beni de burada biraz doldurma etsinler alanları şimdi sen benim sırasız liste sadece içeride olduğunu görebilirsiniz Benim liste öğeleri terimler sırasız liste olduğunu sadece içeriden vardır Şimdi bu ile gösterilen kırmızı kutu k burada hareket edelim Ben devam edin ve benim sırasız liste almak ve ben assert dilerim hiçbiri sıkı liste stili Bu benim liste öğeleri mermi kurtulmak için gidiyor orada artık panoları bu parçayı navigasyon menüsünü görmek istemiyorum biliyorum Bir sonraki benim Sırasız liste içinde liste öğeleri biçimlendirmek istiyorum şimdi olacak / li bir kez daha iyi bir seçici Teknik seni onların ben bu şekilde yapabileceğini olacak gerekmez Benim koymak sonraki yarısında liste öğeleri sıra içinde sadece gerçekten açık hale getirmek için şimdi benim dahilinde bir sırasız liste ile liste öğeleri daha iyi Tamam ve üzerine arka plan rengi için bu yüzden onları görebilirsiniz ve renkli liste öğeleri 21 değiştiremezsiniz sarı beyaz bir tabaka var Siyah ve ben burada biraz farkla bunu gidiyordu olduğum sürece dolgu dönüş biraz içinde şimdi liste öğeleri siyah metin ile açık sarı bir arka plan olmalıdır ama benim sıralı liste hala kırmızı bir arka plan sahip oluyor iyi beyaz metin ile size bana metnin wat fuar görebilirsiniz biliyorum Diğerleri oldu ve ders kitabı bu check out tamam şimdi ben bir sırasız liste ile dört liste öğeleri var gerçekten açık olmalıdır ve benim liste öğeleri tabii ki blok elemanları gibi davranıyorsun ve işte ne olduklarını liste öğeleri bizim blok elementleri sırasız liste Bu çalışabilirsiniz anlamına gelen bir blok elemanıdır Eğer paragraflarda manşetlerine dudes ile çalışmak gibi Onun tüm bu şeyler yapabileceği bir şamandıra ile marj doldurma kontrol edebilirsiniz bu kadar az gangster iki sütun düzeni video bana vermek olduğunu izlemek Bu dışarı işe nasıl bazı göstergeler bu nedenle bu eylem benim navigasyon menüsü böylece iyi görünüyor serin yüzden yapmak istediğim bir sonraki şey, bu yapmak istiyorum olduğunu daha fazla navigasyon menüsü gibi bakmak hangi Benim liste süreleri biraz daha küçük yapacağım anlamına gelir ama ben yapmak istiyorum Bu ben edeceğiz anlamına gelir daha düğmeleri ve güzel radikal navigasyon menüsü gibi bakmak Benim liste öğeleri ile ayar olması ve ben kesinlikle sözsüz benim genel ile sadece olacak öz Ben burada geri editör üzerinde öndeyim listemde için öğeleri onlara nasıl 220px hakkında biraz daha dar yapmak biz biraz daha dar ile birlikte gitmek orada bakım ve benim sırasız listeye kendisini gidebiliriz ve ben buna set olabilir Bir 200px gibi bir şey hakkında ben sadece orada numaralardan tahmin ediyorum nasıl aşağı 180 gurur biraz daha küçük Şimdilik yeterli hızı Seldes d 170 kapatın ve biz sadece bir an onu kontrol edeceğiz tamam şimdi benim liste öğeleri çapa etiketi karıştırın karışıklık etrafında istiyorum o yüzden bu bakalım ve diğer muhalifler artık seçmen Sırasız liste / li bir tamam bu yüzden bu benim kendi sıralı liste içinde benim liste öğeleri içinde çapa etiketleri Benim şekerleme içinde bu is a derin Senato senin bu ben ne var seçin Bir buçuk içinde sırasız liste içinde liste öğeleri içinde çapa ve ben yapacağım burada birkaç şey yapacağım um ama biz buraya size iş bir nokta bu dışarı yaptım aslında ilk şey görmek saniye Benim köprüler birini tıklatın istiyorum ben tam anlamıyla koymak zorunda olduğunu bilir benim işaretçi oranı İstiyorum do not do that metni hoover temyiz etkinleştirmek için bu düğmeye alanında herhangi bir yere tıklayın Bağlantı yani Benim çapa etiketleri olacak dönüştürülebilir vardır Blok elementleri tamam blok elementleri o küçük anlamıyla bir dikdörtgen şekil olacak demektir dk bunu ve ben özlüyorum benim çapa etiketleri 220px ile Yükseklik 02:30 vergisi de düşmanlık tamam bu yüzden benim çapa etiketleri blok elementleri bir başlık 1 bir blok gibi olan eleman Eğer bir başlık metni ortalamak istiyorsa iyi sen text-align olacaktır: merkezi sinemada tamam işte bunu text-align: center orada bir şey daha gitmek Ben metin dekorasyonu yapmak ediyorum Olacak abartma için alt çizgi okumak olsun ki 9 Bu tasarruf comments Benim tarayıcı yenileme geri atlamak Orada şimdi biz benim vergi yatay merkezli görebilirsiniz gitmek Bu düğme alanında nasıl dikey merkezli alabilirim Bu check out my my çapa 30 piksel uzun boylu Ordunun saldırı onun mülkiyet line-height: 30 piksel, bazı I line-height: benim blok yüksekliği ile eşleşen Ben tarayıcı yenileme geri bu arabayı kurtarmak nedenle zaman uğramak şimdi onun dikey ben eğer bu da işe yaramaz gibi görünüyor merkezli metin bir satır ile harika çalışıyor metnin iki çizgiler vardı soma dikey navigasyon menüleri artık fark ederseniz büyük gelip benim çapa etiketleri taşlarıdır Burada benim postaları koyarsanız ben aa biraz hiper bağlantı olsun ve şimdi ben bu kadar biliyorum Çok kenarına onu tüm yol alamadım Ben kendini uğraşmak istiyorum orada bazı dolgu var, çünkü bu Benim liste öğeleri bu dolgu olan bazı dolgu koymak işin üzerinde geri atlama değilim Sadece bu doldurma kurtulmak bundan kurtulmak Şimdi geri dönüp şimdi gideceğim bir düğme durum sağ olsun orada yenilemek istiyorum en kısa sürede benim çapa artık blok çünkü ben o yella Park içine almak gibi elementler yani orada biz çok daha iyi görünüyor sanırım bir çift yapmak burada hızlı şeyler bana savaşırken yakın gidelim Benim sırasız liste ile ve ben de bunlar üzerinde bir sınır koymak kulüpler I çapa metin bir liste ile çapa etiketi üzerinde bir sınır koyabilirsiniz olabilir kalem her iki şekilde gerçekten zor dersin burada nasıl um kriminalist işleri Sınır 5 piksel başından sonra yol a üzerinde Bir mola ekmek en çalıştığını görelim Bir 3d sınırın biraz sadece tür yüzden alan Belki yerine mavi bir gölge sağladı yıl söylemek önce biraz zor ama sağ tarafında biraz henüz alt kısmı üst sol daha koyu biraz bu yüzden başından tür orada 3d görünüm aaa verir bu yüzden ben II artık neredeyse bitmiş o ile yaşayabilir edeceğiz tamam Başka bir şey istiyor vurgulu durumunu değiştirmek için birini dikkat çekmek soma kapmak bu Burada yeni bir seçici olun 8 Colin tamam kapsayacak bu sözde sınıfı İç içe seçici veya seçici alçalma Aylardır listemi çapa etiketleri ona ait onun ilk sekiz kontrol etmek istediğiniz Kendi bulunan öğeler artık benimde listesinde onu sipariş gerçekten kolay arka plan rengi Parlak sarı bir kutu üzerine şimdi ben kontrol ederken bu navigasyon menüsü Elton birisi üzerinde gezinen arka plan renkleri böylece o dikey gitmek yüzden orada değişir sırasız listeden yapılmış arka plan renkleri ile navigasyon menüsü o.

Açıklama

Dikey bir 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



9.8/10

  • 60
    Olumlu
  • 1
    Olumsuz
  • 11
    Yorum
  • 10183
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Caroline Saquet

    Caroline Saq

    1 EKİM 2011
  • Gan Eden Productions

    Gan Eden Pro

    11 HAZİRAN 2011
  • SavageLuxxxGaming - Daily NBA 2K15 & NBA Live 15 Enjoy And Subscribe!

    SavageLuxxxG

    11 Ocak 2013

ANKET



Bu sayfa işinize yaradı mı?