چیدمان وب سایت در CSS (Website Layout)
در این راهنما «چیدمان وب سایت» را با CSS می سازیم؛ بنابراین ساختارهای رایج مانند هدر، ناوبری، ناحیه محتوا و فوتر را می بینید و سپس با رسانه پرس وجوها، طرح را واکنش گرا می کنیم.
ساختار پایه چیدمان وب سایت
اغلب صفحات از بخش های هدر، منوی ناوبری، محتوای اصلی و فوتر تشکیل می شوند. ابتدا هر بخش را ساده استایل دهی می کنیم و بعد سراغ نسخه واکنش گرا می رویم.
هدر (Header)
هدر در بالا قرار می گیرد و معمولاً لوگو یا نام وب سایت را نمایش می دهد.
header { background-color: #f1f1f1; text-align: center; padding: 10px; }نوار ناوبری (Navigation Bar)
نوار ناوبری فهرستی از لینک هاست تا کاربر سریع جابه جا شود. از Flex برای چینش افقی استفاده کنید.
/* استایل نوار بالا */
ul.topnav { display: flex; list-style-type: none; margin: 0; padding: 0; background-color: #333333; }
/* لینک ها در نوار */
ul.topnav li a { display: block; color: #f1f1f1; padding: 14px 16px; text-decoration: none; }
/* حالت هاور */
ul.topnav li a:hover { background-color: #dddddd; color: black; }چیدمان وب سایت واکنش گرا
طرح های رایج شامل یک ستونی، دو ستونی و سه ستونی هستند. با Flexbox سه ستون می سازیم و با media query زیر 600px آن را یک ستونی می کنیم.
div.flex-container { display: flex; /* چینش افقی آیتم ها */ flex-direction: row; }
div.flex-container > div { margin: 10px; }
/* اگر عرض نمایشگر کمتر از 600px بود، ستون ها عمودی شوند */
@media screen and (max-width:600px) { div.flex-container { flex-direction: column; } }نکته: درباره رسانه پرس وجوها در بخش مرتبط بیشتر می آموزید و با Flexbox نیز ستون ها را تمیز مدیریت می کنید.
فوتر پایه و فوتر ثابت
فوتر پایین صفحه می آید و اطلاعاتی مانند کپی رایت را نمایش می دهد.
footer { background-color: #f1f1f1; text-align: center; padding: 8px; }اگر همیشه می خواهید فوتر دیده شود، آن را ثابت کنید؛ بااین حال فضای محتوا را برای جلوگیری از هم پوشانی در نظر بگیرید.
footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #f1f1f1; padding: 8px; text-align: center; z-index: 1000; }هشدار: در فوتر ثابت، حتماً حاشیه پایینی مناسب برای بدنه یا کانتینر اصلی اضافه کنید تا متن زیر فوتر پنهان نشود.
یادگیری بیشتر و لینک های مفید
برای بهبود کارایی طرح، صفحه بهینه سازی CSS را بخوانید؛ همچنین قواعد دسترس پذیری را در چیدمان وب سایت قابل دسترس مرور کنید. افزون براین، درباره @media در MDN و Flexbox در MDN مطالعه کنید.