حاوية النموذج
جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 51 من 76.
التحدي
سهلفي هذا الدرس، سنجعل النموذج يبدو أكثر تنظيماً وجاذبية من الناحية البصرية.
اتبع الخطوات أدناه:
- قم بتطبيق الأنماط على حاوية النموذج لجعله بارزاً. اكتب قاعدة CSS تستهدف العنصر الذي يحمل الفئة
login-form.- قم بتعيين لون خلفية (أبيض أو أي لون يبدو جيداً).
- أضف padding بحيث يكون للمحتوى مساحة في الداخل.
- اجعل الزوايا مستديرة.
- قم بتطبيق box-shadow لإنشاء تأثير عائم ناعم.
- أضف border حول النموذج (اختر أي لون وسمك).
- قم بتوسيط النص داخل النموذج باستخدام خاصية
text-align.
جرّب بنفسك
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
جميع دروس Styling with CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة
8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعة