نمای شبکه‌ای چیست؟
بسیاری از صفحات وب بر اساس نمای شبکه‌ای طراحی می‌شوند که به این معنی است که صفحه به ستون‌هایی تقسیم می‌شود.
استفاده از نمای شبکه‌ای به طراحان وب کمک می‌کند تا به راحتی عناصر را در صفحه قرار دهند.
یک نمای شبکه‌ای واکنش‌گرا معمولاً دارای 12 ستون است و عرض کلی آن 100% است. این نمای شبکه‌ای با تغییر اندازه پنجره مرورگر به طور خودکار تغییر اندازه می‌دهد و سازگار می‌شود.
ساخت یک نمای شبکه‌ای واکنش‌گرا
برای شروع ساخت یک نمای شبکه‌ای واکنش‌گرا، ابتدا باید اطمینان حاصل کنید که همه عناصر HTML دارای ویژگی box-sizing برابر با border-box باشند. این کار باعث می‌شود که پدینگ و حاشیه در مجموع عرض و ارتفاع عناصر محاسبه شوند.
کد زیر را به فایل CSS خود اضافه کنید:
* {
box-sizing: border-box;
}در مثال زیر یک صفحه وب ساده با دو ستون نمایش داده شده است:
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}این مثال برای زمانی مناسب است که صفحه وب فقط شامل دو ستون باشد. اما برای کنترل بیشتر روی صفحه، ما یک نمای شبکه‌ای واکنش‌گرا با 12 ستون استفاده می‌کنیم.
محاسبه درصد برای یک ستون
ابتدا باید درصد یک ستون را محاسبه کنیم:
100% / 12 ستون = 8.33%سپس برای هر یک از ستون‌های 12گانه یک کلاس ایجاد می‌کنیم، به صورت col- و یک عدد که نشان می‌دهد آن بخش چند ستون را اشغال می‌کند:
.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%;}تمامی این ستون‌ها باید به سمت چپ شناور باشند و پدینگ 15 پیکسل داشته باشند:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}ساختار ردیف‌ها
هر ردیف باید در یک <div> پیچیده شود. تعداد ستون‌های موجود در هر ردیف باید همیشه مجموعاً 12 ستون باشد:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>برای جلوگیری از خارج شدن عناصر از جریان صفحه، باید از یک استایل برای پاک‌سازی جریان استفاده کنیم:
.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;
}توجه داشته باشید که صفحه وب در این مثال زمانی که عرض پنجره مرورگر بسیار کوچک می‌شود، ظاهر مناسبی نخواهد داشت. در فصل بعد یاد خواهید گرفت که چگونه این مشکل را برطرف کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام