میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

Layout در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش Layout در CSS با من همراه باشید.

یک وب سایت اغلب به قسمت های سربرگ (headers) ، منوها (menus) ، محتوا (content) و پاورقی (footer) تقسیم می شود:
Layout در CSS
Layout در CSS

 

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

 


سربرگ Header

یک سربرگ معمولاً در بالای وب سایت (یا درست بالای یک منوی بالای ناوبری) قرار دارد. این اغلب حاوی یک آرم یا نام وب سایت است:

 


منو Navigation menu

یک نوار پیمایش حاوی لیستی از پیوندها برای کمک به بازدیدکنندگان است که از طریق وب سایت شما حرکت می کنند:

 


محتوا Content

طرح این بخش ، اغلب به کاربران هدف بستگی دارد. معمول ترین طرح یکی از موارد زیر است (یا ترکیب آنها):

۱-column  : اغلب برای مرورگرهای تلفن همراه استفاده می شود

۲-column : اغلب برای تبلت و لپ تاپ استفاده می شود

۳-column layout : فقط برای سیستم دسگتاب استفاده می شود

Layout در CSS

 

نکته۱ : برای ایجاد یک چیدمان ۲ستونی، عرض را به ۵۰% و برای ایجاد چیدمان ۴ستونی، انرا به ۲۵% تغییر دهید.

نکته ۲ : برای ایجاد یک چیدمان مدرن تر برای ستون ها ، می توانید از css flexbox استفاده کنید. اما باید توجه داشته باشید که این ویژگی در IE10 و نسخه های قدیمی تر آن پشتیبانی نمی شود. اگر به پشتیبانی IE6-10 نیاز دارید (مطابق مثال بالا) از FLOATS استفاده کنید.

 


ستون های نامساوی

محتوای اصلی ، بزرگترین و مهم ترین بخش از سایت شماست.

این روش برای ستون هایی که اندازه عرض آنها با هم برابر نیست معمول است. از محتوای کناری(در صورت وجود) معمولا به عنوان یک نوارناوبری جایگزین و یا برای مشخص کردن اطلاعاتی که به محتوای اصلی مربوط هستند، استفاده می شود.

عرض را هر طور که مایل هستید تغییر دهید. فقط به یاد داشته باشید . که مجموع عرض تمام ستون های شما باید به ۱۰۰% برسد.

به مثال زیر دقت کنید:

 

.column {
  float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

نتیجه مانند زیر خواهد بود.

Layout در CSS

 

 


پاورقی Footer

پاصفحه footer همانطور که از نام آن پیداست در پایین صفحه سایت قرار می گیرد.

این بخش معمولا شامل اطلاعاتی از قبیل اطلاعات تماس، قوانین کپی راست و … می باشد.

 

 


امیدواریم آموزش Layout در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssLayout در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش layout در cssاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟