Tasarımı HTML5 ve CSS3′e dökmek (Son) – CSS Yazma – 2

Bu yazıda CSS Kodumuzu yazmaya devam ediyoruz. Özet navigasyonu bitirdik ve detaylı navigasyonu bitirmemiz gerek. İlk iş detaylı navigasyonla başlayalım. Navigasyonun şu anki durumu bu şekilde. Bunu şu şekle çevirmeliyiz: Yani üst başlıklar yatay ama her üst başlığın alt menüleri dikey olacak. Bunu da #detail-navigation > ul > li{ float: left; display: inline-block; margin-right: 72px; } ile hallediyoruz. Burada “>” işareti etiketin içindeki ilk child-elemente gider. Mantığı şu şekilde açıklayabiliriz: <nine> <evlat id="anne"> <evlat id="kiz"></evlat> </evlat> </nine> Eğer “nine > evlat” dersek burada sadece id’si anne olan elemanı seçeriz. ama “nine evlat” deseydik, id’si “anne” olanı ve id’si “kız” olan etiketleri seçecektik. Bir sonraki adımımız, özet alt bilgi, yani “summary footer”. Burada 3 tane liste elemanımız var. Bu liste elemanlarını dağıtmak istiyoruz. Bunun için de foundation’un block-grid özelliğinden yararlanacağız. <div id=...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Tasarımı HTML5 ve CSS3′e dökmek (Son) – CSS Yazma – 2” için 2 yorum

  1. Anlatılanların bitmiş halini arşivleyip bizlere sunarsanız çok faydalı olur. Mesela anlatırken ufak tefek kod yanlışlığı yapılmış. Örneğin ilk kutuda temel htmlin kodlarını vermişsiniz ama diğer konuda şimdiye kadar şu kadar kodumuz var dediğinizde bazı divler farklı kafa karıştırıyor bu. Analtımlarınızın bitmiş halinide arşiv olarak paylaşabilirseniz seviniriz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir