CSS_文字排版2
文字排版2
HTML
Code123456789101112131415161718192021222324252627282930<div class="wrap"> <div class="container"> ...
CSS_文字排版
文字排版
前面介紹一些常用的版型後，現在換成文字排版。HTML 的結構基本上都相同，透過 CSS 來做變化。
HTML
Code123456789101112131415161718192021222324252627<div class="wrap"> ...
Google_font 使用
Google_font 使用先到 Google_font 網站。
選擇喜歡的字型後，再選擇大小(點 select this style)。
將 Selected family 選成 Embed
分別引用 link 跟 CSS rules 即可。
HTML
Code12345<head> ...
CSS_不規則邊緣
不規則邊緣
HTML
Code123456789101112131415<div class="banner""> </div> <div class="section"> ...
CSS_旋轉拼接方塊
旋轉拼接方塊
HTML
使用 ul 來做，再改變排列方式。
Code12345678910111213<div class="wrap"> <ul class="splice"> <li class=" ...
CSS_時間軸
時間軸
此樣式適合資料左右兩邊差不多的情況，若不是此情形。要視情況調整樣式。
HTML
li、a 來處理結構。
Code123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495 ...