本日小作品:
https://codepen.io/linchinhsuan/pen/dyMKPEV
練習重點摘要:
margin: 50px auto;
如果想讓區塊置中,可以寫下本行程式碼。這裡有兩個值,前者是上下的margin(這裡為了讓區塊不要直接貼齊上緣所以給它50px)。後者是左右,這裡便是透過讓其左右自動抓margin達到置中效果。
letter-spacing
白話文是字與字的距離,這裡使用在標題和作者上面強調用。可以輸入正負值(甚至可以讓字比預設更靠近甚至重疊)。
text-indent
這個是為何選擇詩的理由XD
這個效果是首行縮排,以中文的習慣來說會空兩個字。因此我們設定text-indent: 48px;
,因為字體是24px,空兩個字就是48px了。
align-self: flex-end
這裡運用flex來排版,首先將flex-direction改成column,讓主軸變成由上往下。此時次軸預設是靠左,但如果我們設定align-items: flex-end;
又會全部都一起靠右。所以這裡要在想要讓它單獨靠右的子物件上新增align-self屬性,就可以單獨讓它靠齊flex-end(這裡是靠右)。
target="_blank"
預設是直接跳轉到連結頁面,這裡是跳到詩詞的賞析註解網頁。但當我們不希望這樣的時候,就可以在裡面加上這一段,可以讓其是以開新分頁的方式打開連結。
---
備註:
本小作品使用了Pure.css的按鈕
---
本日結語:
今天是第一天,三十天聽起來真是個遙遠的目標,希望自己能夠順利完賽並能有所收穫!