مرحباً جميعاً
المهمة المطلوبة:
طريقة مشاركة الأكواد التي قمت بكتابتها:
قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات
```
هنا ضع الأكواد
```
شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق
قم بنسخ الأكواد من بيئة العمل ومن ثم لصقها بين هذه العلامات
```
هنا ضع الأكواد
```
شاهد الفيديو التالي لتعرف طريقة مشاركة الأكواد للمنتدى بشكل منسق
اول رد
<!DOCTYPE html>
<html>
<head>
<title>ID</title>
<meta charset="utf-8">
<style>
div {
background-color: #cd1c54;
width: 40px;
height: 40px;
margin: 15px 0 -10px 15px;
}
.small {
width: 100px;
}
.medium {
width: 150px;
}
.large {
width: 250px;
}
</style>
</head>
<body>
<div class="small"></div>
<div class="large"></div>
<div class="medium"></div>
<div class="small"></div>
<div class="large"></div>
<div class="medium"></div>
</body>
</html>
اول رد
شغلك صحيح 100% ولكن فوت شئ من متطلبات المهمة، أعد قرأتها وركز على أنها تدرب على عمل كلاسات متعددة للعنصر.
ما يعني بأنه لن تستهدف العناصر بالقاعدة
div{}
صحيح ما انتبهت زين هههههه
تم التصحيح
<!DOCTYPE html>
<html>
<head>
<title>ID</title>
<meta charset="utf-8">
<style>
.box {
background-color: #cd1c54;
width: 40px;
height: 40px;
margin: 15px 0 -10px 15px;
}
.small {
width: 100px;
}
.medium {
width: 150px;
}
.large {
width: 250px;
}
</style>
</head>
<body>
<div class="box small"></div>
<div class="box large"></div>
<div class="box medium"></div>
<div class="box small"></div>
<div class="box large"></div>
<div class="box medium"></div>
</body></html>
الأن مية مية
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> كلاسات متعددة للعنصر الواحد </title>
<style type="text/css">
.box {
background-color: #cd1c54;
width: 100px;
margin: 5px 0 5px 0;
height: 30px;
}
.box1 {
width: 90px;
}
.box2 {
width: 200px;
}
.box3 {
width: 130px;
</style>
</head>
<body>
<div class="box small"></div>
<div class="box large"></div>
<div class="box medium"></div>
<div class="box small"></div>
<div class="box large"></div>
<div class="box medium"></div>
</body>
</html>
رائع @Siuf
ما رأيك بتسمية كلاسات الاحجام المختلفة بأسماء تعكس دورها بشكل واضح، مثلاً بدلاً من box1
قم بتسميته s
أو small
وهكذا للكلاسين الأخرين.
في هذه الحالة عندما اقرأ الكود الخاص بك أعرف ما دور كل كلاس من اول نظرة، مثلاً عندما أرى
<div class="box small"></div>
يتبادر لذهني بأن هذا هو عبارة عن صندوق box
بحجم small
في الجانب الأخر عندنا هذا الكود:
<div class="box box1"></div>
عندما أشوفة راح اعرف انه في box
لكن كلمة box1
ما بتوحي لي ايش دورها إلا اذا صعدت لأكواد الـ CSS
وشوف أيش التنسيقات المسندة له.
نفس هذه الملاحظة لك محمد @mohamed1 بخصوص تسميتك للكلاس الأول بـ def
بدلاً من أسم له معنى كـ box
.
بالمناسبة جاري رفع الدرس الأخير في هذه الوحدة وراح يتكلم عن تسمية الكلاسات ولماذا علينا الإهتمام بذلك
تمام رح اعدل علية واسمي box اني سميتة def اختصار لكلمة default على اساس انو الاعدادات الافتراضية
بس مثل ماكلت تسمية box رح تكون افضل واسهل
سوف اهتم بهذا الموضوع انشاء الله سوف اقوم بتصحيحها الان، شكرا لك على ملاحظتك دائما ما تكون لها قيمة .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مهمة التدرب على لغة التنسيقات</title>
</head>
<style>
.box {
background-color: red;
height: 50px;
margin: 15px;
}
.s {
width: 100px;
}
.l {
width: 250px;
}
.m {
width: 150px;
}
</style>
<body>
<div class="box s"></div>
<div class="box l" ></div>
<div class="box m"></div>
<div class="box s"></div>
<div class="box l"></div>
<div class="box m"></div>
</body>
</html>
ممتاز
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>التدريب على الكلاسات المتعدده</title>
<style>
.box{background-color: red;height: 25px;margin: 15px}
.l{width: 250px}
.m{width:150px}
.s{width:100px}
</style>
</head>
<body>
<div class="box m"></div>
<div class="box l"></div>
<div class="box s"></div>
<div class="box m"></div>
<div class="box l"></div>
<div class="box s"></div>
</body>
</html>
مية مية
مهمة التدرب على الكلاسات المتعددة
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
height: 40px;
background-color: blueviolet;
margin: 5px;
}
.s{
width: 100px;
}
.m{
width: 150px;
}
.l{
width: 250px;
}
</style>
</head>
<body>
<div class="box s"></div>
<div class="box l"></div>
<div class="box m"></div>
<div class="box s"></div>
<div class="box l"></div>
<div class="box m"></div>
</body>
</html>
ممتاز حمزة
مرحباً
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>مهمة: التدرب على الكلاسات المتعددة</title>
</head>
<body>
<div class="box s"></div>
<div class="box l"></div>
<div class="box m"></div>
<div class="box s"></div>
<div class="box l"></div>
<div class="box m"></div>
</body>
</html>
.box{
background-color:#CD1C54;
height: 40px;
margin: 5px;
}
.s{
width: 100px;
}
.m{
width: 150px;
}
.l{
width: 250px;
}
طريقة كتابتك لحلول المهمة في التعليق بحد ذاتها ابداع .
رائع ي مروان إستمر
مستمرين بإذن الله
شكرا أستاذ محمد وكل عام وأنت بخير
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box s"></div>
<div class="box l"></div>
<div class="box m"></div>
<div class="box s"></div>
<div class="box l"></div>
<div class="box m"></div>
</body>
</html>
css code
.box {
background-color: #CD1C54;
width: 400px;
height: 50px;
margin: 10px;
}
.s {
width: 150px;
}
.m {
width: 220px;
}
.l {
width: 400px;
}
شغل ولا اروع