iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 10

Day10 網頁前端-刻意練習(文字排版)

  • 分享至 

  • xImage
  •  

Day10 金魚 文字排版

https://ithelp.ithome.com.tw/upload/images/20200910/20129161058LdJmk4k.jpg
https://ithelp.ithome.com.tw/upload/images/20200910/20129161ZEMobJcX7J.png

簡單小語

這次練習的文字排版,一開起來才發現,之前切的都亂掉了且有點難看,開始有點刻意練習的效果出來,就是一看到這東西就會想說怎麼寫成這樣,這次文字排版也讓我複習到很多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,垂直置中,再用marginpadding稍微推一下產生空間感。
  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 網頁前端-刻意練習(文字排版)


上一篇
Day9 網頁前端-刻意練習(JQ選單)
下一篇
Day11 網頁前端-刻意練習(多層次收合選單)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言