線上書籍

Home

[1092] 前端技術入門

一、將區塊標題部份改為自動樣板

  1. 區塊標題其實有許多進階變化，例如用進階區塊即可替區塊標題加上圖片或隱藏區塊等效果。

  2. 若要自己去轉換那些功能其實挺複雜，所以，可以用已經寫好的區塊標題樣板檔來取代之。

    <div class="blockHead"> <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}> </div>

     

  3. 該自動樣板檔只有處理一些特殊技法，並不會對標題外觀有任何處理。

  4. 該樣板會也產生<h3 class="blockTitle">的內容。

二、新增網頁字體

  1. 可在css檔中加入一些不同的網頁字型

    @import url("https://schoolweb.tn.edu.tw/uploads/fonts/woff2.css");

     

  2. 若不夠用，可以至 https://github.com/max32002?tab=repositories 來取得更多字型

  3. 以內海字體為例https://github.com/max32002/naikaifont，只要在css檔加入：

    @font-face { font-family: naikaifont; src: url(https://cdn.jsdelivr.net/gh/max32002/[email protected]/webfont/NaikaiFont-Regular-Lite.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/[email protected]/webfont/NaikaiFont-Regular-Lite.woff) format("woff"); }

     

  4. 如此，便可在font-family 中使用名稱為 naikaifont的字體

  5. 範例：https://50plus.cwgv.com.tw/articles/19681

三、關於CSS前綴（或辨識碼）

  1. 在CSS標準還未確定前，部分瀏覽器已根據草案先實現了部分功能，此時會先加上前綴讓使用者可以先使用該功能，等CSS定案，即可將前綴拿掉。

  2. -ms為IE；-moz為Firefox；-webkit為chrome、Edge、Safari；-o為Opera

  3. 若想知道某些宣告樣式在各個瀏覽器的支援程度如何，可以參考：https://caniuse.com

四、先大致修改區塊樣板樣式

  1. 先讓每個區塊間隔開來，並指定好區塊標題的大小，剩下的細部樣式可後續再來慢慢調整：

    .block { margin-top: 1rem; margin-bottom: 3rem; } .blockTitle { height: 2.5rem; font-size: 1.5rem; }

     

五、用圖片或漸層當作文字顏色

  1. 這是利用背景裁剪（background-clip）來做成的效果

    .blockTitle { font-family: HanWangMingBlack; background-image: linear-gradient(to right, #49533f, #A5BB8F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

    1. 首先，字型先挑選粗一點的字型，例如： HanWangMingBlack

    2. linear-gradient()則是CSS function之一，用來製作漸層效果，第一個參數是設定角度或方向，預設是to bottom（上到下），詳細請參考：http://www.w3big.com/zh-TW/css3/css3-gradients.html

    3. webkit-background-clip並不是一個所有瀏覽器的支持的樣式，所以，請加上前綴，設定text是設定依照文字的形狀來裁剪背景之意。

    4. -webkit-text-fill-color則是用來填入文字顏色，其作用和color一樣，但優先權比color高，我們用之來將文字設為透明，如此，才能看到被剪下的背景。

六、替文字加框

  1. 若想讓文字可以更清楚，加外框是蠻常見作法：

    .blockTitle { font-family: naikaifont; color: #F5F4E9; text-shadow: 0px 2px #36626b, 2px 0px #36626b, -2px 0px #36626b, 0px -2px #36626b, -2px -2px #36626b, 2px 2px #36626b, 2px -2px #36626b, -2px 2px #36626b; }

    1. 主要是利用八次各個方向的 text-shadow文字陰影來兜成外框。

  2. 用-webkit-text-stroke也可以做外框字，不過，該樣式會把框加在文字內緣，並不美觀。

七、讓同一區域的區塊可以輪流套用不同效果

  1. 先準備幾張底圖，打算讓文字置中，並套用不同底圖，先將共同的部份設好：

    .blockHead { text-align: center; } .blockTitle { height: 2.5rem; font-size: 1.5rem; margin-bottom: 1rem; font-family: naikaifont; color: #F5F4E9; }

     

  2. 當有標題時，height就會生效，height可以設為底圖的高度。若沒有文字，height為0，如此可避免標題被隱藏的區塊跑出一個空底圖。

  3. 接著將套用的底圖設定及外框顏色分別做成四個樣式（.bbg1~.bbg4）：

    .bbg1 { text-shadow: 0px 2px #804454, 2px 0px #804454, -2px 0px #804454, 0px -2px #804454, -2px -2px #804454, 2px 2px #804454, 2px -2px #804454, -2px 2px #804454; background: url('../images/bbg1.png') no-repeat ; }

     

  4. 配合底色，外框顏色分別設為：#804454、#36626b、#6b6b1e、#3c583d

  5. 底圖設為不重複，並設為從左邊、下方為主來顯示完整底圖圖檔

  6. 在樣板部份，修改xotpl\block.tpl，並利用Smarty的cycle語法來依序套入不同樣式：

    <div class="blockHead <{cycle values='bbg1,bbg2,bbg3,bbg4'}>"> <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}> </div>

     

八、讓中間區域的標題靠左

  1. 由於底圖並不大，但中間區域頗大，因此標題若置中，文字會跑出底圖之外，因此修正之：

    #page_center .blockHead { text-align: left; padding-left: 1rem; }

     

九、針對手機畫面自動調整標題對齊方式

  1. 在電腦上看目前應該沒什麼問題，但手機模式看會發現標題置中並不美觀，因此，最好是電腦模式下標題置中，但在手機模式下標題可以靠左（類似中間區塊那樣）。

    @media only screen and (max-width: 768px) { .blockHead { text-align: left; padding-left: 1rem; } }

    1. 利用@media可以定義在某裝置於指定條件下自動套用定義好的樣式

    2. only screen設定僅作用在螢幕上當寬度小於768px時就將標題向左對齊，並空1字。

    3. http://www.w3big.com/zh-TW/cssref/css3-pr-mediaquery.html

十、CSS的擬類別（需注意順序，不然不會有效果）

  1. :link 尚未瀏覽過的超鏈結

  2. :visited 已經瀏覽過其內容的超鏈

  3. :hover 滑鼠移到該元件上

  4. :active 滑鼠點下該元件的瞬間

十一、CSS的偽元素 （用::和擬類別做出區隔，但其實一個:也是可以用的。 ）

  1. ::first-line 元素中的第一行（僅用於區塊級元素）

  2. ::first-letter 元素中的第一個字（僅用於區塊級元素）

  3. ::before 在元素前（需和content一起使用）

  4. ::after 在元素後插入內容（需和content一起使用）

  5. ::placeholder 元素的佔位符號

  6. ::selection 當元素被標記的狀態

十二、替區塊加上設定按鈕

  1. 我們希望若目前的登入身份是有管理權限的，那麼，當滑鼠移過標題時，就顯示設定工具。

  2. 修改xotpl\block.tpl，在引入標題樣板的下方加入按鈕設定：

    <div class="blockHead <{cycle values='bbg1,bbg2,bbg3,bbg4'}>"> <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}> <{if $xoops_isadmin}> <a href="<{$xoops_url}>/modules/system/admin.php?fct=blocksadmin&op=edit&bid=<{$block.id}>" class="blocktool"></a> <{/if}> </div>

     

  3. 記得判斷$xoops_isadmin的值，以確保只有管理員能看到

  4. 區塊設定的連結位置為

    <{$xoops_url}>/modules/system/admin.php?fct=blocksadmin&op=edit&bid=<{$block.id}>

     

  5. 記得加上class樣式，如： blocktool，以便作為CSS挑選器

  6. 暫時不在連結中填入內容，因為我們希望它在特定情況下才出現

十三、利用::before 或::after讓網頁元素無中生有

  1. 比較簡單的作法：先至https://www.flaticon.com下載個24x24的圖檔，如：gear.png

  2. 利用::after，搭配 content，在挑選器後面新增該圖檔即可。

    .blockTitle { 略; display: inline-block; } .blocktool::after { content: url(../images/gear.png); }

     

  3. 為了讓圖片可以排在標題右邊，標題的顯示模式必須改為 inline或 inline-block才行

十四、在CSS中使用FontAwesome圖示

  1. https://fontawesome.com/v4.7.0/icon/cog

  2. 若想在CSS中使用FontAwesome，可以用FontAwesome UniCode來達成。

  3. 每個 FontAwesome的圖示都有對應一個UniCode，一樣利用 content，並於UniCode前加一個 \ 即可。

    .blocktool::after{ font-family: "FontAwesome"; content: "\f013"; color: white; font-size: 1.5rem; margin-left: 1rem; }

     

  4. 由於他是文字，所以，一樣設定大小及顏色，並可套用任何的文字樣式效果。

  5. 若想滑過標題才出現設定按鈕，只要利用:hover即可做到此效果：

    .block:hover .blocktool::after { 略 }

     

十五、CSS的position位置概念

  1. position:static「靜態」這是網頁的預設值。

  2. position:relative 「相對」指的是相對該元素原來所在的位置（下一個元素並不會隨之起舞），可用 top、bottom、left、right來調整該元素位置。

  3. position:absolute「絕對」指的是相對於整個網頁最左上角的位置（此元素會飄起來，下一個元素會當作它不存在一樣遞補其位置），一樣可用 top、bottom、left、right來調整該元素位置。position:absolute搭配z-index，可以將元素進行上下排列。一般而言，z-index預設值為0。

  4. position:fixed「固定」指的是相對於整個視窗最左上角的位置（此元素也會飄起來，下一個元素一樣當作它不存在而遞補其位置），可用 top、bottom、left、right來調整該元素位置，不管視窗如何捲動，永遠保持在固定位置（可用來做浮動視窗）。

  5. 當position:relative包著position:absolute的時候，後者就會以前者的位置為基準，而非整個視窗。

十六、讓滑鼠滑過標題時不再跳動

  1. 先在.blockTitle的上一層.blockHead中加上position:relative

    .blockHead { position: relative; text-align: center; }

     

  2. 然後在.blocktool::after中加入position: absolute即可

    .block:hover .blocktool::after { 略 position: absolute; }

     

  3. 利用這種方法，可以替區塊加入許多工具喔！例如關閉區塊、或直接連到進階區塊等。