آموزش طرح وب سایت با 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 در بالا ، ما یک طرح وب سایت پاسخگو ایجاد کرده ایم که بسته به عرض صفحه بین دو ستون و ستون های عرض کامل متفاوت است:

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.