iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
0
自我挑戰組

每天一份前端小作品系列 第 1

【Day1】用詩詞練習HTML&CSS

  • 分享至 

  • xImage
  •  

本日小作品:
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的按鈕

---

本日結語:
今天是第一天,三十天聽起來真是個遙遠的目標,希望自己能夠順利完賽並能有所收穫!


下一篇
【Day2】用HTML&CSS讓青蛙排隊
系列文
每天一份前端小作品30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言