ما هو صر الشخصي
وتقوم العديد من صفحات الويب على-عرض الشبكة، وهو ما يعني أن الصفحة مقسمة إلى أعمدة:
باستخدام الرؤية شبكة مفيد جدا عند تصميم صفحات الويب. فإنه يجعل من الأسهل لوضع العناصر على الصفحة.
وشبكة الرؤية تستجيب في كثير من الأحيان 12 عمودا، ويحتوي على العرض الكلي من 100٪، وسوف تتقلص وتتمدد كما يمكنك تغيير حجم نافذة المتصفح.
بناء الاستجابة الشبكة-مشاهدة
لنبدأ بناء استجابة الشبكة عرض.
أولا التأكد من أن جميع عناصر HTML على box-sizing الملكية لتعيين border-box . هذا يجعل من الحشو والحدود مدرجة في إجمالي العرض والارتفاع من العناصر.
قم بإضافة التعليمات البرمجية التالية في CSS الخاص بك:
* {
box-sizing: border-box;
}
قراءة المزيد عن box-sizing الملكية في منطقتنا CSS3 مربع تحجيم الفصل.
يوضح المثال التالي بسيطة صفحة ويب الاستجابة، مع عمودين:
في المثال أعلاه على ما يرام إذا كانت صفحة الويب يحتوي فقط على عمودين.
ومع ذلك، ونحن نريد لاستخدام استجابة شبكة الرؤية مع 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>
<div class="col-9">...</div>
</div>الأعمدة داخل الصف كلها يتحرك إلى اليسار، وبالتالي تؤخذ من تدفق الصفحة، وسيتم وضع العناصر الأخرى كما لو الأعمدة غير موجود. لمنع هذا، سوف نقوم بإضافة النمط الذي مسح تدفق:
CSS:
.row::after {
content: "";
clear: both;
display: block;
}نحن نريد أيضا أن إضافة بعض الأساليب والألوان لجعلها تبدو أفضل:
مثال
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;
} انها محاولة لنفسك » لاحظ أن صفحة ويب في المثال لا تبدو جيدة عند تغيير حجم نافذة المتصفح لعرض صغير جدا. في الفصل التالي سوف تتعلم كيفية إصلاح ذلك.