提姆寫程式

0%

CSS 筆記 - 金魚系列 04 - 交錯漂浮版

發表於 更新於 分類於 Disqus：
產品介紹或是公司介紹常會出現的交錯漂浮切版

switch

學習重點

非常有趣的主題，立馬來切一下文字與圖片交錯的版型！

HTML 架構

共有四個，會分成文字在左，圖片在右各兩組，其他兩組反之。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div class="wrap">
  <!-- item01 -->
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350?random=10" alt="" />
    </div>
    <div class="text">
      <h2>金魚切版系列 IV - 交錯漂浮版</h2>
      <p>
        「產品介紹」或是「關於我」常用的交錯漂浮版，一定要學起來!
        好像會使用到絕對定位還是相對定位，一定要使用 Flex，新學了 flex-shrink。
      </p>
    </div>
  </div>

  <!-- item02 -->
  <div class="item">
    <div class="text">
      <h2>新手一定要寫註解</h2>
      <p>
        不然一堆一樣的東西，回過頭來維護或寫到一半都會忘記為什麼會這樣...所以加註解非常重要，不要覺得自己記憶力很強啊!其實都很不管用的！
      </p>
    </div>
    <div class="pic">
      <img src="https://picsum.photos/600/350?random=20" alt="" />
    </div>
  </div>

  <!-- item03 -->
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350?random=30" alt="" />
    </div>
    <div class="text">
      <h2>有點難又不會太難</h2>
      <p>
        區塊尺寸怎麼算、 Box-sizing 是甚麼、 CSS relative 相對定位、
        網頁的色彩原理、 flex-direction 的原理、 「>」子代選取器、:nth-child
        選取器教學
      </p>
    </div>
  </div>

  <!-- item04 -->
  <div class="item">
    <div class="text">
      <h2>:nth-child 選取器</h2>
      <p>
        CSS3 新增的選取器，一定要學會，好厲害啊!! 只要架構清楚都不用再寫 class
        來綁定跟套用效果啦! HTML 標籤變得好乾淨!
      </p>
    </div>
    <div class="pic">
      <img src="https://picsum.photos/600/350?random=40" alt="" />
    </div>
  </div>
</div>

CSS 樣式

  • 確認好架構後，在 .item 使用 flex 使之橫向排列，flex 真好用!!讓文字與圖片垂直對齊，讓每* 個區塊下方有 70px 的空間。為了要實現交錯的效果，把圖片與文字的寬度都設定為 55%，這樣相加為 110%，可是 flex 會自動運算空間，所以加上一個這次新學到的屬性 flex-shrink ，使其值為 0，就不會自動收縮。
  • 圖片下方都會出現一個莫名空白，使用 vertical-align: middle;，這個技巧出現很多次，學起來很受用，這樣圖片就不會有莫名空白囉!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.item {
  display: flex;
  align-items: center;
  margin-bottom: 70px;
  //flex 收縮值為 0
  .pic,
  .text {
    flex-shrink: 0;
    width: 55%;
  }
  img {
    width: 100%;
    vertical-align: middle;
  }
}

switch

然後就可以看到畫面壞掉了，文字超過設定範圍。

子代選取器 :first-child、:nth-child(n) 選取器

  • 為了讓文字可以壓在圖片上，這邊使用子代選取器，選擇第一層第一個物件(看是圖片或是文字)，讓期 margin 為負值，就有交錯的效果。
  • 再來使用 CSS3 新增的 :nth-child(n) 選取器去選擇 DOM 子層元素，不用先命名 class 就可以選到要設定的元素，小括號內的參數可以放順序，也可以放基(odd)、偶數(even)。

    可參考連結有更多說明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.item {
  ... > :first-child {
    margin-right: -50px;
  }

  //重要的部分
  &:nth-child(1) .text {
    background-color: rgba($color: #e0e0e0, $alpha: 0.8);
  }
  &:nth-child(2) .text {
    background-color: rgba($color: #e0e0e0, $alpha: 0.8);
  }
  &:nth-child(3) .text {
    background-color: rgba($color: #e0e0e0, $alpha: 0.8);
  }
  &:nth-child(4) .text {
    background-color: rgba($color: #e0e0e0, $alpha: 0.8);
  }
}

最後在依照想要優化的內容進行優化，交錯飄浮的頁面就完成了!!

CodePen https://codepen.io/hnzxewqw/full/rNxZWLr

參考資料