Build with AI: From Zero to Your First App · Modül 4: AI ile ilk web sayfan · Lab
Taşma Avı ve Etiket Onarımı
35 dk uygulamalı · Çekirdek
Yalnız tarayıcı. Hatalı sayfa dosyaları başlangıç malzemesi olarak verilir; kaydet, aç, 360px'te taşma avla, etiketleri onar.
Bu labın üç yolu var. A: aşağıdaki tarayıcı adımları, ana yol, hesapsız ücretsiz. B: aynı görevi varsa kendi AI aracınla denemek (aracın koşul ve kotaları geçerli). C: verilen malzeme ve aşağıdaki açıklamalı çözümle çalışmak, aynı beceriyi öğretir. Hiçbir yol, canlı AI aracı kullanmamışa kullanmış gibi göstermez.
Hedefler
- 360px'te her yatay taşma nedenini kanıtıyla bulur
- Her birini tek satırlık sarma, sınırlama ya da akışkan değişiklikle düzeltir
- Yalnız yer tutuculu her alanı etiketli alana çevirir
Adım 1
Taşmayı avla
Dosyaları kaydet, index.html dosyasını aç, 360px'e daralt, yana kaydırmayı dene. Her nedeni listele: sarılmayan menü, 900px fotoğraf, 500px sabit girdiler.
Adım 2
Her birini tek satırla düzelt
Sarmayı (normal), görsel sınırını (en çok yüzde 100), girdileri akışkan (kutu boyutuyla yüzde 100) yap. Yeniden kontrol: 360px'e daralt, yana kaydırma sıfır doğrula.
Adım 3
Etiketleri onar
f1/f2/f3 alanlarına etiket öğesi ekle (Adın, Ürünler, Teslim saati); kısa yer tutucuları ipucu tut. Formu doldur, her değeri etiketiyle geri oku.
Çalıştığını nasıl doğrularsın
- Üç taşma nedeni tek satırlık düzeltmeleriyle listeli
- Düzeltmelerden sonra 360px'te yana kaydırma sıfır
- Üç etiket öğesi değerler doluyken görünür
- Yer tutucular ipucu diye kısaltılmış, tümden silinmemiş
Deneme alanı
0/4 kontrol geçiyor · Yalnız kapsam bilgisidir, kalite puanı değildir.
Başlangıç projesi aşağıda hazır yüklü. Düzenle, Çalıştır ile önizle, Sonucu kontrol et ile davranış kontrollerini işlet. Kayıt gerekmez; taslağın bu tarayıcıda kalır.
En fazla 10 dosya, yalnız .html/.css/.js, her biri 100 KB. Başarısız içe aktarma taslağına dokunmaz.
Taslak bu tarayıcıda saklanıyor.
İpuçları, üç aşamalı
Aşama 1: dürtme
Üç sabit genişlik üç taşma yapar: sarılmayan metin, 900px görsel, 500px girdiler. Her düzeltme tek CSS satırı.
Aşama 2: yön
Görselde en çok yüzde 100 artı otomatik yükseklik oranı korur. Girdiler içerde kalmak için yüzde 100 genişlik ve kutu boyutu ister.
Aşama 3: cevaba yakın
Etiket kontrolü doldur-geri-okudur. Doldurduktan sonra hangi değerin hangisi olduğu anlaşılmıyorsa etiketler hâlâ eksiktir.
Açıklamalı çözüm (dürüst denemeden sonra aç)
Çözüm. Düzeltmeler: .menu sarma normal; görsel { en çok yüzde 100; yükseklik otomatik; }; girdi { genişlik yüzde 100; kutu boyutu sınır-kutusu; }. Doğrulama: 360px daralt, yana kaydırma yok, masaüstü yine iyi. Etiketler: f1 için Adın etiketi, ürün ve teslim saati için aynısı; yer tutucular örneğe kısaltıldı ('örn. Aylin'). Doldurma testi: değerleri gir, her birini etiketiyle geri oku. Değişen beş satır, sayfa iki genişlikte geçer.