چینش صفحه – یک ستون – عرض متغیر

چینش صفحه با ساختار یک ستون با عرض متغیر به وسیله CSS


امیر سروری ۵ دیدگاه CSS , HTML , اصول طراحی وب سایت جمعه, ۱۷ام تیر , ۱۳۹۰ 8128 بازدید

چینش صفحه با ساختار یک ستون با عرض متغیر به وسیله CSS

در ابتدا می توانید نمونه ای از این ساختار را ملاحظه نمائید . استفاده از این ساختار که در اصطلاح به عنوان ساختار Liquid شناخته می شود با توجه به متغیر بودن عرض صفحات نمایش و رزولوشن های متفاوت تصویر در کامپیوتر های متفاوت بسیار متداول است و می توان گفت پایه تمام ساختارهای متغیر از این چینش به وجود خواهند آمد.

نمایش صفحه

ساختار HTML


<div class="container">
	<div class="header">
		<h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
        <h2>یک ستون – عرض متغیر</h2>
	</div>
	<div class="navigation">
		<ul>
			<li><a href="#">خانه</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">خدمات</a></li>
			<li><a href="#">ارتباط با ما</a></li>
		</ul>
	</div>
	<div class="content">
		<h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
		<p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
        <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
	</div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS


نکات مهم در چینش صفحه


  • liquid

    با توجه به چینش از نوع متغیر و یا در اصطلاح liquid عرض ثابت برایcontainer در نظر گرفته نشده است . برای ایجاد فاصله از چپ و راست از margin:0 30px استفاده شده است که نشان دهنده ۳۰px فاصله از سمت چپ و راست و ۰px از بالا و پایین است. در این رابطه می توانید مطلب Margin , Padding – خلاصه نویسی دستورات CSS را برای درک بهتر مطالعه نمائید .

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */ 
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
	margin: 0 30px;
	background:#fff;
}

.header
{
	background:#ccc;
	padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;} 
.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
	padding: 20px;
	background:#eee;
}
.content p { text-align:justify; line-height:17px;}

.content h2
{
	color:#000;
	margin: 0 0 .5em;
}

.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}


نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۵ دیدگاه برای این نوشته ثبت شده است


  1. hadi
    ۱۹ تیر ۱۳۹۰

    ممنونم




  2. طراح
    ۲۲ تیر ۱۳۹۰

    سلام

    من دنبال خودآموز یه فریم ورک سی اس اس (ترجیحا بلوپرینت) می گردم.

    البته به صورت کلی با فرم ورک بلوپرینت آشنا هستم اما می خوام بصورت کامل کلاسها و همه کدها و ویژگیهای این ادیتور فریم ورک رو یاد بگیرم.

    اگر امکانش هست توی سایتتون یه آموزش جامع در مورد این فریم ورک قرار بدید.




  3. حسن
    ۹ شهریور ۱۳۹۰

    دمت گرم
    خیلی ممنون




  4. سامان
    ۱۴ فروردین ۱۳۹۱

    با سلام خدمت طراح محتزم
    آموزش خیلی خوبی دادید. طراحی liquid که میفرمایید همان Fluid Grid است که بیشتر در طراحی Responsive به کار میرود.اگر ممکن است آموزش اصول Fluid Grid را هم بگذارید و همچنین استاندارد هایش را.
    ممنون





کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.