02.03.2017 Views

CSS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

ایجاد طرح های سه ستونه شناور:‏<br />

ساختار صفحه<br />

نام<br />

HTML<br />

مورد استفاده برای ایجاد طرح های سه ستونه بسیار شبیه به ساختار طرح<br />

های دو ستونه است،‏ تنها تفاوت،‏ اضافه شدن دو عنصر Div جدید در بخش<br />

Content<br />

MainContent<br />

برای محتوای اصلی و دیگری با نام<br />

که قرار است در سمت راست نمایش داده شود:‏<br />

SecondaryContent<br />

است:‏ یکی با<br />

برای محتوای ستون سوم<br />

آموزش کاربردی <strong>CSS</strong>3<br />

<br />

<br />

…….<br />

<br />

<br />

……..<br />

<br />

دقیقاً‏ با همان روش که قبال ً اشاره شد میتوان عنصر<br />

mainContent<br />

secondaryContent<br />

را به سمت راست عنصر Content هدایت کرد:‏<br />

را به چپ و عنصر<br />

#mainContent {<br />

Width: 320px;<br />

Float: left;<br />

}<br />

#secondaryContent {<br />

Width: 180px;<br />

Float: right;<br />

}<br />

آموزش کاربردی <strong>CSS</strong>3<br />

در واقع با این کار ما عنصر<br />

Content<br />

را به دو قسمت تقسیم کردیم که با عنصر<br />

تشکیل سه ستون میدهند.‏ تصویر زیر گویای موضوع خواهد بود.‏<br />

ً<br />

mainNav جمعا<br />

134<br />

‏”رسولی”‏ نویسنده:‏ فردوس

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!