دروس دورة CSS : شرح الخاصية bottom xml html css3
بسم الله والحمد لله
السلام عليكم ورحمة الله وبركاته ,, كيف حالكم إخواني ..
اليوم بفضل الله سوف نقوم بشرح الخاصية bottom وهي تشبه بشكل كبير الخاصية line-height إلا أن خاصية line-height مسئولة عن تحريك السطر المكتوب لأعلى ,,
أما عن الخاصية bottom فهي مسئولة عن تحريك الصور لأعلى او اسفل بشكل بسيط
افتح صفحة تكست فارغة واعطها الامتداد html و ضع فيها هذا الكود ..
<!DOCTYPE html>
<html>
<head>
<style>
div{
border:1px solid #ccc;
width:200px;
}
img.ex2{
position:relative;
bottom:0px;
}
</style>
</head>
<body>
<div>
<h1>Mini Soft</h1>
<img class="ex2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6z43QlqfJS0BSCLQQRBpHStbbbd-tILlkxao-YoZVmd7L4nXmXM7X7MjqGh2x-X119Y3gnwaSNvuJ1uhyphenhyphenEEYyDEnVwd_6bZ2ckVcc-YKJI_mOiCho4-q31-NKTtjN0d0cNAmmCfQGbfl/w43-h42-no/Smile+%25282%2529.png">
</div>
</body>
</html>الآن اغلق هذه الصفحة بعد حفظها ثم قم بفتحها على متصفح انترنت لترى الآتي :
انظر هذه الصورة وانظر السطر الاحمر في الكود السابق , السطر المظلل بالاحمر هو bottom:0px
تعالوا نقوم بتغيير قيمة هذا الكود ولنجعله مثلاً 20px ثم طبق الكود على المتصفح لترى التالي .
لاحظ صورة الوجة الاصفر وقد تحركت للأعلى بمقدار 20px
وهذه هي خاصية اليوم bottom وارجو ان اكون قد وفقت في الشرح
اي استفسار اخوتي لا ترددوا في ترك تعليق
نراكم على خير
التعليقات