提姆寫程式

0%

CSS 筆記 - 金魚系列 21 - 九種文字排列切版

發表於 更新於 分類於 Disqus：
CSS 的變化多到爆炸!!

newspaper

學習重點

  • box-sizing:border-box
  • CSS absolute 絕對定位
  • CSS relative 相對定位
  • flex-direction
  • column-count
  • column-gap
  • 偽元素
  • :fitst-letter 選到字首的選取器

HTML 架構

本次架構為下方所示，只有透過 CSS 的樣式設定來做九種變化。

1
2
3
4
5
6
7
8
9
10
<div class="wrap">
  <div class="container">
    <h1>金魚系列 XXI - 文字排版</h1>

    <div class="content">
      <p>文字段落</p>
      <p>文字段落</p>
    </div>
  </div>
</div>

樣式一

text01

  • 學習到使用 column-count 設定欄寬與 column-gap 欄寬間距的使用。
1
2
3
4
5
.content {
  width: 66.66666%;
  column-count: 2; //分成兩欄
  column-gap: 5%; //欄寬距離
}

CodePen https://codepen.io/hnzxewqw/pen/KKzPvZd

樣式二

text02

  • float 有時候還是很好用的!

CodePen https://codepen.io/hnzxewqw/pen/YzqKxYj

樣式三

text03

  • 偽元素 ::before ， ::after 寫錯效果差很多！

CodePen https://codepen.io/hnzxewqw/pen/NWNKvyK

樣式四

text04

  • 絕對定位置中對齊的使用。

CodePen https://codepen.io/hnzxewqw/pen/ExKYvQX

樣式五

text05

  • 使用 float。
  • 偽元素
  • 絕對定位
  • column-count
  • column-gap
  • 國家地理系列

CodePen https://codepen.io/hnzxewqw/pen/MWygvVe

樣式六

text06

  • tranform:rotate()
  • 絕對定位

CodePen https://codepen.io/hnzxewqw/pen/gOrYxeE

樣式七

text07

CodePen https://codepen.io/hnzxewqw/pen/MWygvGj

樣式八

text08

  • transform-origin
  • transform:translateY()

CodePen https://codepen.io/hnzxewqw/pen/JjXPyvM

樣式九

text09

  • 絕對定位與相對定位的應用
  • flex
  • overflow:hidden
  • text-shadow

CodePen https://codepen.io/hnzxewqw/pen/VwaZzxB

結語

看似簡單的問字排版，但卻暗藏了一些學問與小技巧，學起來真是賺到!

參考資料