Uygulama: Temel düzen bilgisi kavrama

Bu klavuz üzerinde çalıştıysanız, bugün CSS düzeni oluşturmak ve eski CSS ile çalışmak için bilmeniz gerekenlerin temellerini kavramış olmalısınız.

Bu klavuz üzerinde çalıştıysanız, bugün CSS düzeni oluşturmak ve eski CSS ile çalışmak için bilmeniz gerekenlerin temellerini kavramış olmalısınız. Bu alıştırma, çeşitli teknikler kullanarak basit bir web sayfası düzeni geliştirme yoluyla bilgilerinizin bir kısmını test edecektir.

Ön Koşullar:Bu değerlendirmeye başlamadan önce bu modüldeki tüm makaleler üzerinde çalışmış olmanız gerekmektedir.
Amaç:Flexbox, Grid, Float ve Konumlandırma kullanarak CSS düzen yöntemlerinin anlaşılmasını test etmek.

Başlangıç noktası

HTML, CSS ve altı resimden oluşan bir seti buradan indirin.

HTML belgesini ve stil sayfasını bilgisayarınızdaki bir dizine kaydedin ve görüntüleri images adlı bir klasöre ekleyin. index.html dosyasını bir tarayıcıda açtığınızda, temel stillere sahip ancak düzen içermeyen bir sayfayla karşılaşacaksınız; bu sayfa aşağıdaki resme benzer bir şekilde görünmelidir.

Bu başlangıç noktası, düzeninizin tüm içeriğini tarayıcı tarafından normal akışta görüntülendiği şekilde içerir.

Alternatif olarak, HTML ve CSS’yi yapıştırarak değerlendirmenizi yapmak için Glitch gibi bir site kullanabilirsiniz. Çevrimiçi bir düzenleyici kullanıyorsanız görüntüleri yüklemeniz ve src niteliklerindeki değerleri yeni görüntü konumlarına işaret edecek şekilde değiştirmeniz gerekeceğini unutmayın. Kullandığınız çevrimiçi düzenleyicinin ayrı bir CSS paneli yoksa, bunu belgenin baş kısmındaki bir <style> öğesine koymaktan çekinmeyin.

Proje özeti

Size bazı ham HTML, temel CSS ve görseller sağlandı – şimdi tasarım için bir düzen oluşturmanız gerekiyor.

Görevleriniz

Şimdi düzeninizi uygulamanız gerekiyor. Başarmanız gereken başlıklar şunlar:

  1. Navigasyon öğelerini, öğeler arasında eşit miktarda boşluk bırakarak bir satır halinde görüntülemek.
  2. Gezinme çubuğu içerikle birlikte kaydırılmalı ve ardından görüntü alanına ulaştığında görüntü alanının en üstünde takılı kalmalı.
  3. Makalenin içindeki resmin etrafına metin sarılmış olmalıdır.
  4. <article> ve <aside> öğeleri iki sütunlu bir düzen olarak görüntülenmelidir. Sütunlar esnek bir boyutta olmalıdır, böylece tarayıcı penceresi küçüldüğünde sütunlar da daralmalıdır.
  5. Fotoğraflar, görüntüler arasında 1 piksel boşluk olacak şekilde iki sütunlu bir ızgara olarak görüntülenmelidir.

İpuçları ve tavsiyeler

Bu düzeni elde etmek için HTML’yi düzenlemenize gerek olmayacak. Kullanmanız gereken teknikler şunlardır:

  • Flexbox
  • Grid
  • Float
  • Konumlandırma – Positioning

Bu görevlerden bazılarını gerçekleştirmenin birkaç yolu vardır ve genellikle doğru ya da yanlış tek bir yol yoktur. Birkaç farklı yaklaşım deneyin ve hangisinin en iyi sonucu verdiğini görün. Deneme yaparken notlar alın.

Örnek

Aşağıdaki ekran görüntüsü, tasarım için bitmiş düzenin nasıl görünmesi gerektiğine dair bir örnek göstermektedir:

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

Kategoriler: CSS Sayfa Düzeni, CSS, Kılavuz

konular

Okumaya devam et!

Izgaralar – Grid

CSS Izgara Düzeni, iki boyutlu bir sayfa düzen sistemidir.

CSS Floats

Aslen metin blokları içindeki görüntüleri kaydırmak için kullanılan float özelliği, web sayfalarında çoklu sütun düzenleri oluşturmak için en sık kullanılan araçlardan biri haline geldi.

İşaretlenmemiş bir HTML listesi nasıl oluşturulur

Sıralanmamış bir listedeki liste işaretlerinin rahatsız edici olduğunu düşünüyorsanız bu işaretleri kolayca kaldırabilirsiniz.

Tür, sınıf ve kimlik seçicileri

Bu makalede muhtemelen en sık kullanacağınız en basit seçicilerden bazılarını inceleyeceğiz.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.