٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش طرح وب سایت با CSS

چیدمان وب سایت یک وب سایت اغلب به عناوین ، منوها ، محتوا و پاورقی تقسیم می شود: تعداد زیادی طرح مختلف برای انتخاب وجود دارد. با این حال ، ساختار فوق یکی از متداول ترین هاست و ما در این…

محمد یوسفی

12 جولای 2021

چیدمان وب سایت

یک وب سایت اغلب به عناوین ، منوها ، محتوا و پاورقی تقسیم می شود:

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


سرتیتر

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

مثال

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

نتیجه


نوار پیمایش

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

مثال

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

نتیجه


محتوا

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

  • 1 ستون (اغلب برای مرورگرهای تلفن همراه استفاده می شود)
  • 2 ستون (اغلب برای رایانه های لوحی و لپ تاپ استفاده می شود)
  • طرح 3 ستونی (فقط برای دسک تاپ استفاده می شود)

ما یک طرح 3 ستونی ایجاد خواهیم کرد و آن را به صفحه ای 1 ستونی در صفحه های کوچکتر تغییر خواهیم داد:

مثال

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

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

نکته: برای ایجاد یک طرح 2 ستونی ، عرض را به 50٪ تغییر دهید. برای ایجاد یک طرح 4 ستونی ، از 25٪ و غیره استفاده کنید.

نکته: یک روش مدرن تر برای ایجاد طرح بندی ستون ، استفاده از CSS Flexbox است. با این حال ، در Internet Explorer 10 و نسخه های قبلی پشتیبانی نمی شود. اگر به پشتیبانی از IE6-10 نیاز دارید ، از شناور استفاده کنید (همانطور که در بالا نشان داده شده است).


ستونهای نابرابر

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

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

مثال

.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%;
  }
}

پاورقی

پاورقی در پایین صفحه شما قرار داده شده است. این اغلب شامل اطلاعاتی مانند حق چاپ و اطلاعات تماس است:

مثال

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

طرح بندی وب سایت پاسخگو

با استفاده از برخی از کد های CSS در بالا ، ما یک طرح وب سایت پاسخگو ایجاد کرده ایم که بسته به عرض صفحه بین دو ستون و ستون های عرض کامل متفاوت است:

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها