تصميم الويب سريع الاستجابة - عرض الشبكة
ما هو عرض الشبكة؟
تعتمد العديد من صفحات الويب على طريقة عرض الشبكة ، مما يعني أن الصفحة مقسمة إلى أعمدة:
يعد استخدام طريقة عرض الشبكة مفيدًا جدًا عند تصميم صفحات الويب. يسهل وضع العناصر على الصفحة.
غالبًا ما تحتوي طريقة عرض الشبكة سريعة الاستجابة على 12 عمودًا ، ويبلغ عرضها الإجمالي 100٪ ، وسوف تتقلص وتتوسع كلما قمت بتغيير حجم نافذة المتصفح.
بناء عرض شبكة متجاوب
لنبدأ في بناء عرض شبكي سريع الاستجابة.
تأكد أولاً من box-sizing
تعيين الخاصية لجميع عناصر HTML على
border-box
. يؤدي ذلك إلى التأكد من تضمين المساحة المتروكة والحد في إجمالي عرض وارتفاع العناصر.
أضف الكود التالي في CSS الخاص بك:
* {
box-sizing: border-box;
}
اقرأ المزيد عن box-sizing
الخاصية في فصل CSS Box Sizing .
يوضح المثال التالي صفحة ويب سريعة الاستجابة ، تتكون من عمودين:
مثال
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
يعتبر المثال أعلاه جيدًا إذا كانت صفحة الويب تحتوي على عمودين فقط.
ومع ذلك ، نريد استخدام عرض شبكي سريع الاستجابة مع 12 عمودًا ، لمزيد من التحكم في صفحة الويب.
أولاً ، يجب أن نحسب النسبة المئوية لعمود واحد: 100٪ / 12 عمودًا = 8.33٪.
ثم نصنع فئة واحدة لكل عمود من الأعمدة الاثني عشر ، 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%;}
يجب أن تكون كل هذه الأعمدة عائمة جهة اليسار ، وبمساحة مقدارها 15 بكسل:
CSS:
[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>
جميع الأعمدة الموجودة داخل صف تطفو إلى اليسار ، وبالتالي يتم إخراجها من تدفق الصفحة ، وسيتم وضع العناصر الأخرى كما لو كانت الأعمدة غير موجودة. لمنع هذا ، سنضيف نمطًا يزيل التدفق:
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;
}
لاحظ أن صفحة الويب في المثال لا تبدو جيدة عند تغيير حجم نافذة المتصفح إلى عرض صغير جدًا. في الفصل التالي سوف تتعلم كيفية إصلاح ذلك.