Tad 教材網 - 線上書籍

:::

\[1092\] 前端技術入門
===============

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

1. 區塊標題其實有許多進階變化，例如用進階區塊即可替區塊標題加上圖片或隱藏區塊等效果。
2. 若要自己去轉換那些功能其實挺複雜，所以，可以用已經寫好的區塊標題樣板檔來取代之。
 
 
 ```markup
 <div class="blockHead">
 <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
 </div>
 ```
3. 該自動樣板檔只有處理一些特殊技法，並不會對標題外觀有任何處理。
4. 該樣板會也產生`<h3 class="blockTitle">`的內容。
 
### 二、新增網頁字體

1. 可在css檔中加入一些不同的網頁字型
 
 
 ```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檔加入：
 
 
 ```css
 @font-face {
 font-family: naikaifont;
 src: url(https://cdn.jsdelivr.net/gh/max32002/naikaifont@1.0/webfont/NaikaiFont-Regular-Lite.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/naikaifont@1.0/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. 先讓每個區塊間隔開來，並指定好區塊標題的大小，剩下的細部樣式可後續再來慢慢調整：
 
 
 ```css
 .block { margin-top: 1rem; margin-bottom: 3rem; }
 .blockTitle { height: 2.5rem; font-size: 1.5rem; }
 ```
 
 <dl> </dl>### 五、用圖片或漸層當作文字顏色

1. 這是利用背景裁剪（`background-clip`）來做成的效果
 
 
 ```css
 .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. 若想讓文字可以更清楚，加外框是蠻常見作法：
 
 
 ```css
 .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. 先[準備幾張底圖](https://www.tad0616.net/uploads/tad_book3/file/46/images.zip)，打算讓文字置中，並[套用不同底圖](https://www.tad0616.net/uploads/tad_book3/file/46/images.zip)，先將共同的部份設好：
 
 
 ```css
 .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`）：
 
 
 ```css
 .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`語法來依序套入不同樣式：
 
 
 ```markup
 <div class="blockHead <{cycle values='bbg1,bbg2,bbg3,bbg4'}>">
 <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/blockTitle.tpl"}>
 </div>
 ```
 
 <dl> </dl>### 八、讓中間區域的標題靠左

1. 由於底圖並不大，但中間區域頗大，因此標題若置中，文字會跑出底圖之外，因此修正之：
 
 
 ```css
 #page_center .blockHead { text-align: left; padding-left: 1rem; }
 ```
 
 <dl> </dl>### 九、針對手機畫面自動調整標題對齊方式

1. 在電腦上看目前應該沒什麼問題，但手機模式看會發現標題置中並不美觀，因此，最好是電腦模式下標題置中，但在手機模式下標題可以靠左（類似中間區塊那樣）。
 
 
 ```css
 @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`，在引入標題樣板的下方加入按鈕設定：
 
 
 ```markup
 <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. 區塊設定的連結位置為
 
 
 ```markup
 <{$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`，在挑選器後面新增該圖檔即可。
 
 
 ```css
 .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前加一個 \\ 即可。
 
 
 ```css
 .blocktool::after{
 font-family: "FontAwesome";
 content: "\f013";
 color: white;
 font-size: 1.5rem;
 margin-left: 1rem;
 }
 ```
4. 由於他是文字，所以，一樣設定大小及顏色，並可套用任何的文字樣式效果。
5. 若想滑過標題才出現設定按鈕，只要利用`:hover`即可做到此效果：
 
 
 ```css
 .block:hover .blocktool::after { 略 }
 ```
 
 <dl> </dl>### 十五、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```
 
 
 ```css
 .blockHead {
 position: relative;
 text-align: center;
 }
 ```
2. 然後在`.blocktool::after`中加入`position: absolute`即可
 
 
 ```css
 .block:hover .blocktool::after {
 略
 position: absolute;
 }
 ```
3. 利用這種方法，可以替區塊加入許多工具喔！例如關閉區塊、或直接連到進階區塊等。

:::