رفتن به مطلب

ساخت باكس و كادر در css


پست های پیشنهاد شده

با سلام

من مدتي ميشه كه دارم css ياد ميگيرم ، و مبتدي هستم

ميخواستم بدونم چطوري ميشه در css كادر بندي يا همون باكس درست كرد ( مثلا ستون كناري ، ستون وسطي و ... ) و كدهايي كه بايد توي html فراخواني كرد چي بايد باشه ؟

لینک به ارسال

سلام قدیم ترها با table صفحه را بخش می کردند مثل


<table style="width: 100%; height: 180px" cellpadding="5" cellspacing="5" dir="rtl" class="style1">
<tr>
<td colspan="2"><h1>HEAD</h1></td>
</tr>
<tr>
<td style="width: 250px">Sidebar</td>
<td>CONTACT</td>
</tr>
<tr>
<td colspan="2">FOOTER</td>
</tr>
</table>

ولی الان بیشتر از div و لایه ها استفاده می کنند

Div ها به صورت دیفالت خاصیت block و No-Float دارند و در کنار هم قرار نمی گیرند به همین خاطر لایه های کنار هم یا به چپ و یا به راست float می شوند

مانند


<div style="clear:both"><h1>HEAD</h1></div>
<div style="float:right;width:250px;">Siderbar</div>
<div style="float:right;width:650px">CONTENT</div>
<div style="clear:both">FOOTER</div>

که همان table بالایست با استفاده از div

لینک به ارسال

به نظرم بهتره اول با table ها شروع کنی درسته که کمی خشکند ولی تنظیمشون راحته وقتی دستت توی کار راه افتاد بری سراغ div ها

post-336-0-20213000-1345633475_thumb.png

این قالب رو نگاه کن بک لایه 7 یک عکس در تکراره و لایه 8 یک عکس ثابت در وسط کادر

این هم کدش


<table style="width: 100%;" cellpadding="0" cellspacing="0" dir="rtl" class="style1">
<tr>
<td colspan="4" style="background:green;height:80px;">1</td>
<td rowspan="4" style="background:gold">2</td>
</tr>
<tr class="m1">
<td style="background:lime">3</td>
<td style="background:orange">4</td>
<td style="background:fuchsia">5</td>
<td style="background:blue">6</td>
</tr>
<tr>
<td colspan="2" rowspan="6" style="background-image: url('bg.jpg')">
7</td>
<td rowspan="6" style="background-image: url('hamrah.GIF'); background-repeat: no-repeat; background-position: center center; background-color: #CCFFFF;color:#009933">
</td>
<td style="background-color: #CCCCFF; height: 50px">9</td>
</tr>
<tr>
<td style="background-color: #CC66FF; height: 50px">10</td>
</tr>
<tr>
<td style="background-color: #FF00FF; height:50px">11</td>
<td rowspan="2" style="color: #CC0000">15</td>
</tr>
<tr>
<td style="height: 50px; background-color: #CC00CC">12</td>
</tr>
<tr>
<td style="height: 50px; background-color: #660066">13</td>
<td rowspan="2" style="border: medium double #3C7390; color: #663300;">16</td>
</tr>
<tr>
<td style="height: 50px; background-color: #660033">14</td>
</tr>
</table>

من اگه جات بودم تمرین می کردم و بیست سی تا شکا مختلف پیاده می کردم

کدها را می تونی با نوتپد و در فرمت html ذخیره کنی و با بروسر ببینی

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...