Meydan okuma - Form ve tablo
Form ve tablo stilleriyle kayıt arayüzü kurarsın.
Form ve tablo arayüzü
Bir kayıt arayüzünde form ve tablo yan yana çalışır. .field etiketi için dolgu, kenar ve kenar yuvarlatma verilir; :focus durumunda kenar rengi vurgulanır, böylece kullanıcı aktif alanı görür. İpucu metni placeholder özniteliğine yazılır, değerine değil.
Tabloda border-collapse: collapse ile kenarlar birleşir; :nth-child(even) ile çift satırlara zebra çizgi, tr:hover ile üzerine gelinen satır vurgulanır. Bu beş nokta, okunaklı bir kayıt arayüzü kurar.
Uygulama Kayıt arayüzünü stillendir
Aşağıdaki CSS'i tamamla. .field etiketine 8px dolgu ve 4px kenar yuvarlatma ver; :focus durumunda kenar rengi #2563eb olsun. Tablo için border-collapse: collapse yaz ve çift satırların arka planını #f5f5f5 yap.
Örnek çözümü göster
/* giriş alanı */
.field {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.field:focus {
border-color: #2563eb;
}
/* tablo */
table {
border-collapse: collapse;
}
/* çift satır */
tbody tr:nth-child(even) {
background: #f5f5f5;
}Kendini test et
-
Form ve tablo özelliğini eşleştir
- :focus
- Aktif alan kenarını vurgular
- placeholder
- İpucu metnini taşır
- border-collapse: collapse
- Tablo kenarlarını birleştirir
- :nth-child(even)
- Çift satırları işaretler
- tr:hover
- Üzerine gelinen satırı vurgular
-
Zebra çizgi seçicisini yaz
tbody tr:____ { background: #f5f5f5; }Cevabı göster
tbody tr:nth-child(even) { background: #f5f5f5; } -
Bir input'a yazılacak ipucu metni en uygun olarak hangi yere konur?
<input type="text" ... />- <input ... value="Adınızı girin">
- <label>Adınızı girin</label>
- <input ... title="Adınızı girin">
- <input ... placeholder="Adınızı girin">
Cevabı göster
<input ... placeholder="Adınızı girin"> — Doğru. placeholder, alan boşken görünen ve yazınca kaybolan ipucu metnidir.