آموزش طراحی وب پاسخگو – نمای شبکه

15 جولای 2021

Grid-View چیست؟

بسیاری از صفحات وب مبتنی بر grid-view هستند ، به این معنی که صفحه به ستونهایی تقسیم شده است:یک نمای پاسخگو grid اغلب 12 ستون دارد و عرض آن 100٪ است و با تغییر اندازه پنجره مرورگر ، کوچک و گسترش می یابد.


ساخت یک شبکه پاسخگو

بیایید شروع به ساخت یک شبکه پاسخگو کنیم.

ابتدا اطمینان حاصل کنید که همه عناصر HTML box-sizingویژگی تنظیم شده را دارند border-box. این اطمینان می دهد که بالشتک و حاشیه در عرض و ارتفاع کل عناصر موجود باشد.

کد زیر را در CSS خود اضافه کنید:

{
box-sizing: border-box;
}

اطلاعات بیشتر در مورد این box-sizingویژگی را در فصل اندازه گیری جعبه CSS ما بخوانید .

مثال زیر یک صفحه وب پاسخگو با دو ستون را نشان می دهد:

مثال

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

مثال بالا در صورتی خوب است که صفحه وب فقط شامل دو ستون باشد.

با این حال ، ما می خواهیم از یک شبکه پاسخگو با 12 ستون استفاده کنیم تا کنترل بیشتری بر صفحه وب داشته باشیم.

ابتدا باید درصد را برای یک ستون محاسبه کنیم: 100٪ / 12 ستون = 8.33٪.

سپس برای هر 12 ستون یک کلاس درست می کنیم class="col-"و یک عدد تعریف می کند که تعداد ستون ها باید در کدام قسمت قرار گیرد:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

تمام این ستون ها باید به سمت چپ شناور باشند و دارای 15px باشند:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

هر ردیف باید در یک پیچیده شود <div>. تعداد ستون های داخل یک ردیف همیشه باید به 12 ستون اضافه شود:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

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

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

ما همچنین می خواهیم برخی از سبک ها و رنگ ها را برای بهتر جلوه دادن آن اضافه کنیم:

مثال

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

توجه داشته باشید که وقتی اندازه پنجره مرورگر را به عرض خیلی کوچک تغییر می دهید ، صفحه وب موجود در مثال خوب به نظر نمی رسد. در فصل بعدی شما می آموزید که چگونه آن را برطرف کنید.

منبع

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

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

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

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

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

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

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

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

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

0 دیدگاه

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

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