تصميم صفحة ويب ديناميكي - عرض الشبكة

ما هو عرض الشبكة؟

العديد من صفحات الويب تعتمد على رؤى الشبكة (grid-view)، مما يعني أن الصفحة مقسمة إلى عدة أعمدة:

استخدام رؤى الشبكة عند تصميم صفحة الويب مفيد جدًا. يمكن بسهولة وضع العناصر على الصفحة.

عادة ما تحتوي رؤى الشبكة الديناميكية على 12 عمودًا، وعرضها 100٪، وتنكمش وتوسع عند تغيير حجم نافذة المتصفح.

بناء عرض الشبكة الديناميكية

دعنا نبدأ في بناء عرض الشبكة الديناميكية.

أولاً، تأكد من أن جميع عناصر HTML box-sizing تم تعيين الخاصية border-boxبهذا يمكن ضمان أن يتضمن حجم العنصر الكامل (العرض والارتفاع) الهوامش (الملء) والهوامش.

يرجى إضافة الكود التالي في CSS:

* {
  box-sizing: border-box;
}

يرجى زيارة Box Sizing في CSS للقراءة المزيد عن خاصية box-sizing.

نماذج التشبيه الديناميكي توضح صفحة ويب بسيطة تحتوي على عمودين:

25%
75%

实例

.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;
}

جرب بنفسك

يرجى ملاحظة أن موقع الويب في مثال لا يبدو جيدًا عندما يتم ضبط عرض نافذة المتصفح إلى عرض ضيق جدًا. ستعلم كيفية حل هذه المشكلة في الفصل التالي.