• m_mohamadlu@yahoo.com

ایجاد قالب ساده با دایو

برای ساخت یک قالب ساده نیاز به دانش HTML و CSS داریم . در HTML5 از برچسب های معنایی جهت ایجاد قالب استفاده میشود . اما من در اینجا میخواهم نحوه و منطق چینش قالب با  تگ div به شکل بسیار ساده توضیح بدم تا بتونید برای ایجاد قالب های بزرگ و پیچیده تر ایده بگیرید . ما در اینجا یک قالب ساده که شامل هدر ، منو ، فوتر ، ساید راست و چپ و محتوا میباشد را آموزش میدهیم .

بهتره ابتدا در body یک دایو کلی ایجاد کنید و تمام کدها رو درون اون بنویسید :

<div id="main">
this is main ...
</div>

کد css مربوط به main  به شکل زیر است :

#main{
 width:980px;
 min-height:700px;
 margin:auto;
 margin-top:30px;
 background-color:#00FFFF;
overflow:hidden
}

حال درون main را با دایو های دیگر تقسیم بندی میکنیم : 

<div id="main">

	<div id="header"></div>
	<div id="menu"></div>

	<div id="wraper">
		<div id="side-right"></div>
		<!-- end right -->
		<div id="text">content</div>
		<div id="sid-left"></div>
		<!-- end right -->
	</div>
	<!-- end wraper -->

</div><!-- end main -->

<div id="footer"></div>

فایلهای css زیر را بنویسید و سپس آن را اجرا کنید . 

body{font-size:12px; background-image:url(../pic/pink011.jpg)}
#main{width:980px; min-height:700px; margin:auto; margin-top:30px; background-color:#00FFFF;overflow:hidden}
#header{ width:980px; height:120px; background-color:#FF99CC}
#menu{ width:980px; height:40px; background-color:#FF9966;margin-top:10px;}
#wraper{ width:980px; min-height:500px; background-color:#CCCCCC; margin-top:10px;overflow:hidden; margin-bottom:10px;}
#side-right{width:20%; min-height:400px; background-color:#993366; float:right;overflow:hidden}
#sid-left{width:20%; min-height:400px; background-color:#993366; float:left;overflow:hidden}
#text{width:60%; min-height:400px; background-color:#FFFFFF;float:right;}
#footer{ width:980px; height:40px; background-color:#FF9966; margin:auto; margin-top:10px;}
.box{ widows:95%; min-height:150px; background-color:#FF6633; margin-top:5px; overflow:hidden; margin-bottom:5px;}

ملاحظه میکنید که با قرار دادن دایو ها درون دایو main از تکرار بعضی کدها پرهیز شد . علت آن ارث بری دایو های زیر مجموعه از دایو اصلی و مادر میباشد .

ارسال نظر