02.03.2017 Views

CSS

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

HTML کد<br />

شرح کد:‏<br />

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

<br />

Relative<br />

<br />

در کد باال اوالً‏ ما صفحه را )Body( را با رنگی گالبی درست کردیم البته فقط برای درک بهتر و در<br />

ضمن یک باکسی دیگر بنام<br />

دهیم از خاصیت های Top و<br />

Div1<br />

Left<br />

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

و همچنان position را با مقدار<br />

Relative<br />

20px<br />

از چپ و<br />

20px<br />

شکل زیر بدست آمد:‏<br />

از باال فاصله دادیم و در نتیجه<br />

استفاده کردیم به انداز ه<br />

خوب شاید بگوید که چگونه یک باکس دیگری را باالی باکس آبی قرار دهیم؟<br />

به کد زیر توجه کنید:‏<br />

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

.main{ width:400px; height:400px; background-color:pink; padding:0; margin:0;<br />

.div1{<br />

Width:250px; height:250px; font:20px/25px Tahoma;<br />

Color:#fff; background-color:blue;<br />

Position:relative; top:20px; left:20px;<br />

}<br />

.div2{<br />

width:180px; height:180px; font:20/25px Tahoma;<br />

Color:#000; background-color:yellow;<br />

Position:absolute; top:30px; left:30px;<br />

}<br />

93<br />

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

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

Saved successfully!

Ooh no, something went wrong!