AG 柵格的 HTML 和 CSS

AG 柵格的 html 文件結(jié)構(gòu)和?Susy 1 創(chuàng)建該柵格?時(shí)保持一致：

<div class="container">
  <h1>The 10 column complex nested grid AG test</h1>
  <div class="ag ag1">
    <h2>AG 1</h2>
  </div>
  <!-- /ag1 -->
  <!-- ag4 to ag7 are nested within ag2.-->
  <div class="ag ag2">
    <h2>AG 2</h2>
    <div class="ag ag4">
      <h2>AG 4</h2>
    </div>
    <div class="ag ag5">
      <h2>AG 5</h2>
    </div>
    <div class="ag ag6">
      <h2>AG 6</h2>
    </div>
    <!-- ag8, ag9 and ag10 are nested within ag7 -->
    <div class="ag ag7">
      <h2>AG 7</h2>
      <div class="ag ag8">
        <h2>AG 8</h2>
      </div>
      <div class="ag ag9">
        <h2>AG 9</h2>
      </div>
      <div class="ag ag10">
        <h2>AG 10</h2>
      </div>
    </div>
    <!-- /ag7 -->
  </div>
  <!-- /ag2 -->
  <div class="ag ag3">
    <h2>AG 3</h2>
  </div>
  <!-- /ag3 -->
</div>
<!-- /container -->

簡單地說，如果有元素在另一個(gè)元素內(nèi)部，那么你就要將其嵌套到那個(gè)元素中。

在本例中，AG 4?到?AG 7?應(yīng)該嵌套到?AG 2?中，而?AG 8，AG 9?和?AG 10?應(yīng)該嵌套到?AG 7?中。

CSS 文件也和上個(gè)版本保持一致，如下所示：

/**
 * Styles for AG grids & Container
 */
.container {
  background-color: #fbeecb;
}
.ag1, .ag3 {
  background-color: #71dad2;
}
.ag2 {
  background-color: #fae7b3;
}
.ag4,.ag5,.ag8,.ag9 {
  background-color: #ee9e9c;
}
.ag6 {
  background-color: #f09671;
}
.ag7 {
  background-color: #f6d784;
}
.ag10 {
  background-color: #ea9fc3;
}
/**
* Text Styles
 */
h2 {
  text-align: center;
  font-size: 1rem;
  font-weight: normal;
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}

現(xiàn)在，萬事俱備，讓我們深入了解一些 Susy 的細(xì)節(jié)吧。