Meydan okuma - Orta seviye projesi
Tüm orta seviye konularını birleştiren bir ana sayfa kurarsın.
Orta seviye projesi: ana sayfa
Bir ana sayfa, orta seviyenin tüm araçlarını birleştirir. :root seçicisinde --brand gibi özel değişkenler tanımlanır; var(--brand) ile her yerde çağrılır. Üst bilgi ve alt bilgi flex ile yan yana, ana bölüm grid-template-areas ile adlandırılmış bölgelerden kurulur.
@media (min-width: 768px) ile dar ekran bildirimleri daraltılır; transition ile durum geçişleri yumuşak, transform: scale() ile kartların üzerine gelindiğinde büyümesi sağlanır. Yedi nokta, tüm orta seviyeyi bir araya getirir.
Uygulama Ana sayfa iskeletini kur
Aşağıdaki CSS'i tamamla. :root içinde --brand: #2563eb tanımla. .page kabı grid olsun ve "header" "main" "footer" şeklinde tek sütunlu bir şablon kullansın. .header ve .footer etiketleri ilgili bölgelere yerleşsin.
Örnek çözümü göster
/* kök değişkenler */
:root {
--brand: #2563eb;
}
/* sayfa kabı */
.page {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
}
/* üst bilgi */
.header {
grid-area: header;
}
/* ana bölüm */
.main {
grid-area: main;
}
/* alt bilgi */
.footer {
grid-area: footer;
}Uygulama Kartlara geçiş ve dönüşüm ekle
Aşağıdaki CSS'i tamamla. .card için transition: transform 0.2s bildirimi olsun; .card:hover durumunda transform: scale(1.05) uygulansın. @media (max-width: 600px) içinde .page tek sütuna insin: grid-template-columns: 1fr.
Örnek çözümü göster
/* kart */
.card {
transition: transform 0.2s;
}
/* kart üzerine gelme */
.card:hover {
transform: scale(1.05);
}
/* dar ekran */
@media (max-width: 600px) {
.page {
grid-template-columns: 1fr;
}
}Kendini test et
-
Bir kartın üzerine gelindiğinde büyümesi için hangi dönüşüm kullanılır?
.card:hover { transform: ???; }- translate(10px, 0)
- scale(1.05)
- rotate(45deg)
- skew(10deg)
Cevabı göster
scale(1.05) — Doğru. scale(1.05), kartı %5 büyütür; hover durumunda tercih edilir.
-
Özel değişken tanımını yaz
:root { --brand: ____; }Cevabı göster
:root { --brand: #2563eb; } -
Araçları rolüyle eşleştir
- var(--brand)
- Değişkeni çağırır
- grid-template-areas
- Bölgeleri adlandırır
- @media (min-width: 768px)
- Geniş ekranı seçer
- transition
- Durum geçişini yumuşatır
- transform: scale()
- Kartı büyütür