تحدي المراجعة
جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 34 من 43.
التحدي
سهلاستخدم CSS Grid لبناء تخطيط بسيط يحتوي على رأس ومعرض مكون من 3 صور في صف واحد كما هو موضح في الصورة أدناه:
- قم بتعيين
.containerإلىdisplay: gridوأضفgapبين العناصر. - أنشئ شبكة بـ صفين و 3 أعمدة.
حدد مناطق الشبكة باستخدام:
grid-template-areas: "header header header" "img1 img2 img3";- قم بتخصيص كل عنصر في الشبكة لمنطقته باستخدام خاصية
grid-area.
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
}
img{
width: 100%;
}
.header{
text-align: center;
padding: 10px;
background-color: #afe1e3;
}
/* Add you CSS code here */
</style>
</head>
<body>
<div class="container">
<div class="header">My Gallery</div>
<div class="img1"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Burchell%27s_zebra_%28Equus_quagga_burchellii%29_2.jpg"></div>
<div class="img2"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Zebra_zebras_-_tarangire_tanzania_africa.jpg"></div>
<div class="img3"><img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Zebra-Lake_Nakuru.jpg"></div>
</div>
</body>
</html>
جميع دروس CSS Mastery
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعة