چیدمان وب‌سایت (CSS Website Layout)
یک وب‌سایت معمولاً به اجزای زیر تقسیم می‌شود:
- Header (سربرگ)
- Navigation Menu (منوی ناوبری)
- Content (محتوا)
- Footer (پاورقی)
این ساختار یکی از رایج‌ترین ساختارهاست که در این آموزش به آن می‌پردازیم.
Header (سربرگ)
سربرگ معمولاً در بالای وب‌سایت قرار می‌گیرد و شامل لوگو یا نام وب‌سایت است.
مثال:
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}Navigation Bar (نوار ناوبری)
نوار ناوبری شامل لیستی از لینک‌ها است که به کاربران کمک می‌کند تا در سایت شما پیمایش کنند.
مثال:
/* کانتینر نوار ناوبری */
.topnav {
overflow: hidden;
background-color: #333;
}
/* لینک‌های نوار ناوبری */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* تغییر رنگ لینک‌ها هنگام هاور */
.topnav a:hover {
background-color: #ddd;
color: black;
}Layout Columns (ستون‌بندی محتوا)
چیدمان محتوا بسته به نوع کاربران هدف متغیر است. چیدمان‌های معمول شامل موارد زیر هستند:
- 1-ستونه: اغلب برای مرورگرهای موبایل
- 2-ستونه: اغلب برای تبلت‌ها و لپ‌تاپ‌ها
- 3-ستونه: برای دسکتاپ‌ها
مثال: ساختار 3-ستونه
/* سه ستون برابر که در کنار هم قرار می‌گیرند */
.column {
float: left;
width: 33.33%;
}
/* پاکسازی شناور‌ها بعد از ستون‌ها */
.row:after {
content: "";
display: table;
clear: both;
}
/* چیدمان واکنش‌گرا: ستون‌ها به جای کنار هم قرار گرفتن، روی هم می‌افتند در صفحه‌های کوچک‌تر از 600 پیکسل */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}ستون‌های نامساوی
اغلب محتوای اصلی بخش بزرگ‌تری از فضا را به خود اختصاص می‌دهد و ستون‌های کناری برای ناوبری یا اطلاعات جانبی استفاده می‌شوند.
مثال: ستون‌های نامساوی
.column {
float: left;
}
/* ستون‌های کناری */
.column.side {
width: 25%;
}
/* ستون وسط (محتوای اصلی) */
.column.middle {
width: 50%;
}
/* چیدمان واکنش‌گرا: ستون‌ها روی هم قرار می‌گیرند در صفحه‌های کوچک‌تر از 600 پیکسل */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}Footer (پاورقی)
پاورقی در انتهای صفحه قرار دارد و اغلب شامل اطلاعاتی مانند کپی‌رایت و اطلاعات تماس است.
مثال:
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}چیدمان واکنش‌گرا (Responsive Website Layout)
با استفاده از کدهای CSS بالا، یک چیدمان وب‌سایت واکنش‌گرا ساخته‌ایم که بسته به عرض صفحه بین دو ستون و ستون‌های تمام عرض تغییر می‌کند.
نکته:
- برای ایجاد یک چیدمان 2-ستونه، عرض ستون‌ها را به 50% تغییر دهید.
- برای چیدمان 4-ستونه، از عرض 25% استفاده کنید.
- برای آشنایی بیشتر با Flexbox و چیدمان‌های مدرن‌تر، به فصل CSS Flexbox مراجعه کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام