Atölye › Trafik lambası › 3/12. adım

İçine üç lamba

Ne yapıyoruz

Trafik lambasında üç ışık var: kırmızı, sarı, yeşil. Gövdenin içine üç küçük kutu koyuyoruz; hepsinin sınıf adı aynı: lamp. Aynı sınıfı taşıyan her şeye tek bir CSS kuralı yetecek.

```html
<div class="light">
  <div class="lamp"></div>
  <div class="lamp"></div>
  <div class="lamp"></div>
</div>
```

Ne işe yarıyor

Gövdenin açılış (<div class="light">) ve kapanış (</div>) etiketleri artık ayrı satırlarda; üç lamba ikisinin arasında, yani gövdenin içinde.
Üçü de class="lamp": bir sınıfı istediğin kadar öğe taşıyabilir. Kimlik (id) tektir, sınıf (class) değil.

Sıra sende

<div class="light"></div> satırını ikiye aç: <div class="light"> bir satırda, </div> en altta.
Aralarına üç lamp satırını yaz (iki boşluk içeriden).
Çalıştır.

Beceriler: HTML ile sayfa yapısı

← Kutuya biçim ver Yuvarlak lambalar →

Tüm adımlar