Layout üzrə praktiki iş

Tipik blokları birləşdir

Kart, şəkil başlığı, naviqasiya və yardım izahı bir neçə əsas qaydanın birləşməsidir. Yanaşı bloklar üçün Flexbox, lokal üst-üstə yerləşmə üçün relative/absolute istifadə et. Təkrarlanan bloklara eyni sinif ver.

<div class="help">
  <button type="button" aria-describedby="help-text">Ölçü haqqında</button>
  <p id="help-text" class="tip">Ölçülər santimetrlə göstərilir.</p>
</div>

Nümunə

.help { position: relative; }
.tip {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  max-width: 240px;
  padding: 12px;
  background: white; color: #17233b;
  border: 1px solid currentColor;
}
.help:hover .tip, .help:focus-within .tip { display: block; }

Nümunə

Praktik blokun yoxlanması

focus-within valideynin içində hər hansı element fokusda olanda işləyir. Beləliklə eyni məlumat klaviatura ilə də açılır. Vacib məzmunu yalnız hover-a bağlama; toxunma ekranında hover olmaya bilər. Mühüm təlimatı daim göstərmək daha uyğun ola bilər.

Şəkil yazısı üçün də relative valideyn və absolute açıqlama qura bilərsən. Mətn böyüdükdə blokun xaricinə çıxmadığını, yardımın ekran kənarında kəsilmədiyini və düymənin fokus çərçivəsinin göründüyünü yoxla.

Əlavə qeydlər və mənbələr

Tipik səhifə bloklarını Flexbox və mövqeləşmə ilə birləşdir. Şəkil üzərində yazı və izah elementi kimi detallar yarat; yalnız siçanla görünən məlumatı klaviatura istifadəçisinə də aç.

Niyə vacibdir?

CSS qaydalarını anlamaq dizaynı təsadüfi düzəlişlərlə deyil, məqsədli şəkildə qurmağa imkan verir.

Əvvəlki biliklər

HTML və semantik struktur

Bu mövzuda

Tipik səhifə blokları
Şəkil üzərində mətn
İzah elementinin yerləşdirilməsi

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Yardımı iki üsulla aç

Həm siçan, həm klaviatura istifadəçisi üçün yardımın görünməsini təmin et.

Prosesi son vəziyyətə çatdır.

Yardım gizlidir
Siçanla açıldı
Klaviatura ilə açıldı

Yardım gizlidir

Düymə görünür, izah hələ bağlıdır.

button + .tip

Bu məşq prosesi modelləşdirir.

Özün sına

Şəkil üzərində açıqlama və kömək düyməsinə bağlı izah yarat. İzahı hover ilə yanaşı fokus zamanı da göstər.

Nəticəni necə yoxlayım?

Kartlar təkrar üslubdan istifadə edir, şəkil üzərində yazı və yardım mətni həm hover, həm fokusla açılır.

Gözlənilən nəticə

Şəkil sahəsinin aşağısında açıqlama görünür.
Kömək düyməsinə həm siçanla yaxınlaşanda, həm Tab ilə fokus verəndə izah açılır.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Açıqlama üçün caption, kömək mətni üçün isə hover və focus-visible vəziyyətləri istifadə edilir.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<figure class="photo"><img class="scene" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMjQwIj48cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjI0MCIgZmlsbD0iI2RjZTlmNyIvPjxyZWN0IHk9IjEyMCIgd2lkdGg9IjYwMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiMyMTRlODAiLz48L3N2Zz4=" alt="Sadə eskiz: açıq səma və mavi dəniz"><figcaption>Yaydan bir xatirə</figcaption></figure>
<div class="help"><button type="button" aria-describedby="tip">Kömək</button><p role="tooltip" id="tip">Şəkli təsvir edən qısa açıqlama yaz.</p></div>
</body>
</html>

styles.css

.photo{position:relative;margin:0}.scene{height:150px;background:#dce9f7;display:grid;place-items:center}.photo figcaption{position:absolute;bottom:0;left:0;right:0;background:#14171d;color:white;padding:8px}.help{position:relative;margin-top:24px}.help p{display:none;padding:12px;background:#e9f881}.help:hover p,.help:focus-within p{display:block}.help button:focus-visible{outline:3px solid #214e80;outline-offset:3px}
.scene{display:block;width:100%;object-fit:cover}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.