秦小

CSSMM4E 笔记 - 3.16 - 使用CSS栅格系统

发表于 | 分类于

网格怎样工作

Grids 用一致的列宽将内容组织成row和column. Page width 分成units.
通用的units总数是12, 因为12 整除 2, 3, 4.

用网格构造HTML页面

  • 容器 容器 (container) 盛装一行或多行. 用于设置Grid stystem的宽度, 通常居中.
  • 行 行（row) [div] 包含一列或多列
  • 列 列(column) [div] 包含内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="container">
  <!-- row #1 -->
  <div class="row">
    <!-- 3 unit width column -->
    <div class="three columns">
      <!-- logo here -->
    </div>
    <!-- 9 unit width column -->
    <div class="nine columns">
      <!-- navigation here -->
    </div>
  </div>
  <!-- row #2 -->
  <div class="row">
    <!-- 12 unit width column -->
    <div class="twelve columns">
      <!-- article text here -->
    </div>
  </div>
</div>

通用 CSS 网格系统

使用 Skeleton 网格系统

  1. Attach the CSS files
  2. Add container divs
  3. Add divs for rows
  4. Add columns divs
  5. Add content inside the columns
  6. Create your own styles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link ref="stylesheet" href="css/normalize.css"> /* step 1 */
<link ref="stylesheet" href="css/skeleton.css">  /* step 1 */
<link ref="stylesheet" href="css/custom.css">    /* step 6 */
...
<div class="container">                          /* step 2 */
  <div class="row">                              /* step 3 */
    <div class="five columns">                   /* step 4 */
      <p>Lorem ipsum ...</p>                     /* step 5 */
    </div>
    <div class="seven columns">
    </div>
  </div>
  <div class="row">
    <div class="six columns">
    </div>
    <div class="six columns">
    </div>
  </div>
</div>

设置全宽的节(section)

将 container 设置 wrapper, 为 wrapper 设置全宽背景.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="section header">
  <div class="container">
    <div class="row">
      <div class="three columns">
        <p class="logo">My Company</p>
      </div>
      <div class="nav nine columns">
        <a .. .. ></a>
        <a .. .. ></a>
        <a .. .. ></a>
      </div>
    </div>
    <div class="row action">
      <h1>We do great things</h1>
      <h2>Donec pulviner ullamcorper metus</h2>
      ....
    </div>
  </div>
</div>

1
2
3
4
.header {
  background-image: url(../imgs/header.jpg);
  background-size: cover;
}

使用 Skeleton 的移动端优先示例

1
2
3
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Moblie first queries */
/* applies to ALL widths */
/* Larger than __mobile__ */
@media (min-width: 400px) {
}
/* Larger than __phalet__ (also point when grid becomes active) */
@media (min-width: 550px) {
}
/* Larger than __tablet__ */
@media (min-width: 750px) {
}
/* Larger than __desktop__ */
@media (min-width: 1000px) {
}
/* Larger than __desktop HD__ */
@media (min-width: 1200px) {
}