حاوية النموذج
جزء من قسم 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)تحدي المراجعةتدرّب بنفسك: Playground لـ Web