جلسه ی ششم
پنجشنبه, ۱۸ ارديبهشت ۱۳۹۳، ۱۱:۲۹ ب.ظ
با سلام و شب بخیر.
مباحث آموزش داده شده در جلسه ی ششم کلاس؛
پنج شنبه مورخ 18 اردیبهشت 1393.
- فصل دهم (div)
- Align
- Margin
- Padding
- Border
- Width
- Height
مروری اجمالی بر مباحث این جلسه:
خب دوستان؛
استپ با استپ جلو میرویم...
در ابتدای تمرین میخواهیم که سه عدد باکس یک اندازه داخل یک باکس بزرگتر داشته باشیم که این باکس ها خود از یکدیگر فاصله دارند.
به قطعه کدهای زیر دقت کنید؛
HTML
<html>
<head>
<meta charset="utf-8">
<title>SixthSession</title>
<link type="text/css" rel="stylesheet" href="second.css">
</head>
<body dir="rtl">
<center><div id="main">
<div id="num-1">
دایو قرمز رنگبا آی دی شماره یک.
</div>
<div id="num-2">
دایو سبز با آی دی شماره دو.
</div>
<div id="num-3">
دایو آبی با آی دی شماره سه.
</div>
</div>
</center>
</body>
</html>
CSS
body
{
font-size:18px;
}
#main
{
margin-top:10%;
border:#F0F 1px solid;
width:70%;
}
#num-1
{
border:#F00 1px solid;
width:50%;
text-align:right;
}
#num-2
{
margin-top:5%;
border:#0F0 1px solid;
width:50%;
text-align:right;
}
#num-3
{ margin-top:5%;
border:#00F 1px solid;
width:50%;
text-align:right;
}
تا بدین جای کار خروجی به این شکل در آمد:
حالا میخواهیم اولین باکسمان یا همان اولین دایومان از دایو اصلی (از بالا)فاصله داشته باشدو باکس سوم یعنی دایو آبی نیز از قسمت پایین دایو اصلی فاصله دار باشد:
#num-1
{
border:#F00 1px solid;
width:50%;
text-align:right;
margin-top:3%;
}
#num-3
{ margin-top:5%;
border:#00F 1px solid;
width:50%;
text-align:right;
margin-bottom:3%;
}
خروجی حاصل شده:
در این مرحله قصد داریم که نوشته های باکس اول از سمت راست دایوشان فاصله بگیرند:
و مرحله ی اخر که میخواهیم باکس دوم کمی از سمت راست فاصله بگیرد:
#num-2
{
margin-top:5%;
border:#0F0 1px solid;
width:50%;
text-align:right;
margin-right:10%;
}
و در پایان آنچه را که مشاهده میکنیم:
نکتـــــه: دوستان دقت داشته باشند،همان طور که در کلاس بحث شد،تمام این مارجین ها و پدینگ ها بر روی یک دیگر تاثیر گذار هستند و در اندازه های آنها باید دقت کافی را به کار ببریم تا بتوانیم آنها را به راحتی جابه جا کنیم. که انشاالله این مشکل نیز با تمرین و ممارست قابل حل می باشد.
نتایج تمرین ها لطفا در بخش نظرات اعلام گردد.
موفق باشید.
۹۳/۰۲/۱۸
فرشته حسینی