طراحي کادرها با css

[Rezaei]

مهمترين مزيت کدهاي css از ديدگاه يک طراح حرفه اي استفاده از ويژگيهاي آن جهت دسته بندي و کادربندي صفحه است. يک وب نويس تازه کار براي دسته بندي و مديريت مطالب از جدول و برچسب table استفاده مي کند. استفاده و مديريت جدول براي وب نويس بسيار ساده و راحت است اما براي يک مرورگر وب واقعا پيچيده است . مرورگرها و کراولرها از جدول بيزار هستند و دليل آن را خوب نمي دانم. بنابراين استفاده از توانمنديهاي ترسيم کادر و دسته بندي مطالب با css را خوب ياد بگيريد و کم.کم جايگزين جدول کنيد. در ترسيم کادر هم از class و id استفاده ميشود.

پروژه 1: قطعه کد طراحي يک کادر با css

#boxtext {border-right: #dddddd 1px solid; border-left: #dddddd 1px solid; border-top: #dddddd 1px solid; border-bottom: #dddddd 1px solid; padding-right: 2px; 
padding-bottom: 8px; padding-left: 2px; padding-top: 8px; background-color: #ffffff; margin-top:0px; margin-bottom: 8px;
}

ويژگي boreder: ويژگي border اندازه، ضخامت و رنگ کادر را تعيين ميکند. در مثال بالا BORDER-RIGHT: #dddddd 1px solid; قسمت اول يعني #dddddd معادل هگز رنگ بردار است که رنگ نيلي را برمي گرداند. همچنين 1px ضخامت کادر را 1 پيکسل تعيين کرده است. کلمه کليدي solid يز مي تواند با مقاديري مانند Thick, thin, dashed, medium, inset, outset و ... تعيين شود که نرم افزارهاي طراحي سايت مانند dreamweaver همه را نشان مي دهد.ويژگي padding: براي تعيين فاصله مندرجات يک کلاس از لبه کادر از ويژگي padding به صورت زير استفاده مي شود:

padding-right:2px; padding-bottom:8px; padding-left:2px; padding-top:1px;

ويژگي margin:براي تعيين فاصله يک کلاس از هاي کلاس ديگر از ويژگي margin به صورت زير استفاده مي شود:

margin-right: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 0px;

علامت px يعني پيکسل، در اين مثالها همه حاشيه ها 0px درجشده است که مي توانيد آن را تغيير دهيد.

پروژه 2: قطعه کد منوي لغزان

براي تهيه چنين منوئي ابتدا کلاس زير را تعريف کنيد:

.navigation:link, .navigation:visited {
font-size: 13px; font-style: normal; font-weight: normal; text-decoration: none; text-align:center; color: #FFFFFF; background-color: #239180; display: inline; border: none; padding-bottom: 5px; padding-top:5px; padding-left: 20px; padding-right: 20px; float:right; margin-right: 3px
}
.navigation:hover {
 background-color: #74c699; color: #333333
}

سپس براي برچسب a از اين کلاس استفاده کنيد:

<a href="../index.html" class="navigation"> برگ نخست </a>

منبع : پارس مدیر

[designwebsite]

باتشکراز پیام مفیدتان در سایت.باتشکر فراوان

[Rezaei]

باتشکراز پیام مفیدتان در سایت.باتشکر فراوان

لطفا قوانین رو یکبار با دقت مطالعه نمایید

2.6

در تاپیک ها ، اگر سوال يا نظر خاصي نداريد لطفا فقط از دکمه "

پسند" استفاده کنيد. نظراتي مانند مرسی ، خوب بود ، ممنون و... شامل اسپم هستند و باعث کاهش کيفيت پست ها و دریافت اخطار از طرف مدیران و حذف پست شما ميشوند.

پست های اسپم پاک خواهند شد