Day10 金魚 文字排版

簡單小語

這次練習的文字排版，一開起來才發現，之前切的都亂掉了且有點難看，開始有點刻意練習的效果出來，就是一看到這東西就會想說怎麼寫成這樣，這次文字排版也讓我複習到很多CSS的應用及比較少用到的效果，例如column-count, column-gap，這些如果沒有刻意練習就真的一知半解，現在對於header的掌握度持續提升中，也發現到用偽元素時不一定都要用定位(position)來顯示樣式，也可以使用display: block來顯示樣式(如果需擺放的位置固定的話)，自我挑戰就是一次比一次進步，刻意練習累積成就感，做中學，學中做。

筆記分享

1. header漢堡選單使用transform: rotate觸發點擊後的旋轉，記得要在原本.btn中加入transform: rotate(0deg)才能讓二次點擊旋轉回來。
2. header在不同尺寸下呈現的效果不同，搜尋bar可先在小尺寸調整完後用display: none讓使用者無法看見。
3. 文字排版使用column-count可以設定文字排列的欄位，讓排版看起來不會這麼詭異。
4. 文字段落間可以使用column-gap調整段落間欄位的間隔，區分段落。
5. 文繞圖必須使用float，需注意文字所佔空間比例。
6. 標題兩側的橫線，使用偽元素後在加入display: block並在父層使用display:flex就會擺在標題兩側，再使用align-items: center即可垂直置中。
7. 標題變為底層浮水印需注意text所佔空間以及父層需使用justify-content: flex-end才能讓文字向右對齊。
8. 要讓標題垂直置中使用column-gap的空隙並讓標題用絕對定位後放置正中央。
9. 若要讓文字段落第一個字突出，使用:first-letter即可選取到並使用float: left，垂直置中，再用margin及padding稍微推一下產生空間感。
10. footer的複合式層次選單，需要在JQ中加入if判斷式才能決定有效果的尺寸。

if ($(window).width() < 768) {
$(this).siblings().slideToggle();
$(this).parent().siblings().find('.menu').hide();
}

刻意練習

Practice(200730 Day 10)

首次練習

Practice(200605_文字排版)

2020 iT邦幫忙鐵人賽 Day10 網頁前端-刻意練習(文字排版)