〈莎莎的生活札記〉JSFiddle 導覽索引自製版型分享！便利貼風格✦（含簡易教學）

❀ 前情提要 ❀

繼〈莎莎的生活札記〉的「鼠尾草播種紀念日＆某莎加入讚賞公民啦✦」一篇中，開始啟用 JSFiddle 來製作導覽索引區之前，必須先感謝 @Jhane 的手把手啟蒙「教學文章」。

不過某莎在分享這篇簡易教程之前，必須先聲明：

• 某莎還不會寫 JavaScript，也還不會用 JQuery！😭
• 因此，如果往後有新的版型分享，可能也是土法煉鋼的 CSS 和 HTML 搭配。

沒有 JS 的加入，雖然少了許多有趣的效果。
但反過來想，也不用擔心被訪客關掉瀏覽器的 JS 功能時，無法正常顯示（？）😂

那麼，某莎的不專業版型分享教學開始啦✦
（如果喜歡這篇教學的話歡迎支持一下 XD）

❀ 成品展示 ❀

❀ 本篇大綱 ❀

1. 📦 事前準備｜　在使用分享版型之前所需的準備。
2. ⚙️ 好用工具｜　分享一些很實用的免費工具網站。
3. 📐 版型解析｜　手把手帶你拆解某莎的便利貼版型。

❀ 本篇正文 ❀

📦 事前準備

在馬特市的文章中使用 JSFiddle 內嵌框架之前～
當然是要先準備自己的「Matters 帳號」和「JSFiddle 帳號」啦✦　（這不是廢話嗎）

操作過程建議使用電腦，並使用 Windows 的 Chrome 瀏覽器。

其他方式或許可行，但某莎沒有嘗試過，這方面可能需要勇者協助 XD

其他相關教學在 @Jhane 的「教學文章」中已有十分詳盡的資料。
因此，某莎就不在這裡贅述囉✦

⚙️ 好用工具

• CSS Grandient｜　好用的漸層製作工具，讓你不用調色寫到瘋掉！
  https://cssgradient.io/
• W3schools｜　英文版，相當齊全的前端網頁教程，很棒的字典網站。
  【HTML】https://www.w3schools.com/html/default.asp
  【CSS】https://www.w3schools.com/css/default.asp
• W3school｜　簡體中文版，與前者性質相同，如果抗拒英文的話，可以改閱此站。
  https://www.w3school.com.cn/h.asp
• 菜鳥救星｜　純 CSS 手風琴效果的教學，本篇分享版型的標籤收合參考原型。
  https://rookiesavior.net/2020/12/08/css-accordion-effect/
  

📐 版型解析

廢話不多說，直接進入正題吧！　（其實是某莎不擅長開場白）

先來當前版本的公開便利貼版型的 HTML 和 CSS 範本。
當然，後面會各別說明可供變更的標籤。

如果只是想套用版型，不打算自行微調的話～
其實可以直接複製以下 HTML 和 CSS 的代碼到 JSFiddle 上，
再按照實際需要，把 HTML 代碼內的文字指示改成自己的內容就完工了✦

HTML

• 請複製此區的代碼，貼到 JSFiddle 上的 HTML 區塊。

CSS

• 請複製此區的代碼，貼到 JSFiddle 上的 CSS 區塊。

基本上，某莎已經把 CSS 的部分，每一條都註明它的用途了～
現在就讓我們解析一下 HTML 和 CSS 中常用的標籤，各別代表什麼意思吧！

以下分為五個小節來敘述。

第一節：標籤中的 ID 和 CLASS 的差別是什麼？

• 它們的權重是有差的，權重越高，優先度越高：

inline style > ID > Class > Element > *

如果權重相同，那麼比較後面寫的 CSS 則優先度較高。

• HTML 標籤中的 ID 對應到 CSS 的開頭是「#」，例如：

id="tab_Name1"
#tab_Name1

• HTML 標籤中的 CLASS 對應到 CSS 的開頭是「.」，例如：

class="Name1_list"
.Name1_list

• 其中，Element 代表 HTML 和 CSS 中用到的 div、p、ul、ol、li、a、span 等元素。

通常我們會把特別重要的元素給它一個識別 ID，經常用到的則加上一個類別 CLASS。如此一來，我們就能透過編寫 CSS 來設定它們的外觀啦✦

• 至於 inline style 是什麼呢？那就是直接寫在 HTML 裡的樣式，例如：

<div style="color:#000;"></div>

• 而 CSS 中，一開始用的「*」代表設定好的預設值。

換句話說，只要另有設定，都可以覆蓋過它了。

因此，根據相同原理，在套用版型時，可隨著個人想法替換版型中的 ID 或 CLASS 名稱。
但值得注意的是，要幫它們改名得 HTML 和 CSS 一起改！
而且結構是有順序規則的，比如：

• 在 HTML 中結構長這樣：<li><span>我是範例</span></li>
• 然後在 CSS 內寫成這樣：span li { ... }

那麼，這條 CSS 大概「不會奏效」。
因為在 HTML 中，<li></li> 是包在 <span></span> 外面的，順序在前。

第二節：label 和 input 的關係？

• 版型範本中的 label 和 input 是互相對應的，可以當成它們有匹配關係。

例如，在 HTML 中設定的：

<label for ="tab_Name1">左邊的黑底收合標籤標題</label>

代表把這個 label 指定成 tab_Name1。

而在後面的：

<input type="checkbox" name="tab" id="tab_Name1"></input>

則代表把這個 input 識別 ID 指定為 tab_Name1。

• 至於 input 中的 name 是什麼呢？

它相當於 input 的另一種識別名稱，是可以被程式抓取的資料。

但是某莎的版型沒有用到 JS 或 JQuery。
因此本身也不清楚它的實際運作情形，只是覺得留給它一個完整的交代比較好。（掩面）

最後，眼尖的市友可能注意到 type 內的屬性，還有某莎在 CSS 內多寫的資料了吧？

• 沒錯，這裡的 input 類型可以選擇 radio 或 checkbox，任君挑選喔！

如果選擇：

• checkbox（多選）

收合標籤的盒子彼此「不會」影響，可以同時打開好幾個盒子✦

• radio（單選）

收合標籤的盒子一次只能打開一個，能模仿出手風琴的效果～

第三節：我只想改配色風格，版型中常用的 CSS 屬性有哪些？

• CSS 的格式是：

指定元素 { 屬性: 數值; }

記得每條屬性的尾巴有分號「;」區隔哦！

• background（背景）

例如：

body {
  background: #000 fixed no-repeat;
  }

在這條 CSS 的意思中，代表要把 body 這個元素的背景，改成：

黑色：#000
固定的：fixed
不要重複：no-repeat

顏色有很多種寫法，比如：

直接輸入英文：black、red、yellow
十六進制色碼：#000000、#fff、#f1e2c3
ＲＧＢＡ調色：rgba(255,255,255,0.5)、rgba(0%,0%,0%,1)

當十六進制色碼的每二位相同時，可以縮寫。
例如：#000000 = #000，#ffeedd = #fed

一般情況下，某莎比較喜歡使用ＲＧＢＡ調色，因為可以順便調整 Alpha 透明度✦
至於要怎麼選色呢？這時候只要參拜 Google 大神就行了，就不贅述啦～

• color（文字顏色）

使用顏色的方法和 background 相同。

• font-size（文字尺寸）

單位可以使用「絕對」或「相對」長度單位。

絕對：cm、mm、px、pt
相對：em、rem、vw、vh、%

可以用的單位挺多的，不過某莎特別喜歡用 pt、pc 和 % 就是了。
至於為什麼？

pt：代表 point，是一個標準長度單位，常用於印刷業。
pc：代表 1 個全形字的尺寸，可以隨著網頁文字尺寸變動。
%：100% = 1em，個人偏好用比較直觀的符號，這個單位能隨著網頁大小作變化。

• 以下屬性使用單位的方法和 font-size 相同：

line-height（單行文字段落的高度）
height（高度）
width（寬度）
margin（邊界外面的留白）
padding（邊界內部的留白）
border-radius（邊界的圓滑度）

其中，margin、padding、border-radius 可以各別設定四個位置的粗細尺寸。

• 規則一：四邊都寫（順序：上→右→下→左）

margin: 0 5px 5px 0;

代表邊界外部要在右邊和下面留白 5px 的空間，上面和左邊則不留白。

• 規則二：水平垂直（順序：上下→左右）

padding: 1pc 0;

代表內部距離邊界要上下留白 1 個字元的空間，左右則不留白。

• 邊角用：順序（左上→右上→右下→左下）

border-radius: 50% 3px 50% 0;

代表左上角和右下角要整個圓的，右上角圓滑 3px，左下角保持銳利不圓滑。

• border（邊界）

例如：

div {
  border: 1px #ccc solid;
  }

在這條 CSS 的意思中，代表要把 div 這個元素的背景，改成：

粗細：1px
灰色：#ccc
樣式：solid（實線）

其中，樣式有很多種，比如：

double（雙線）
dashed（虛線）
dotted（點點）

• text-align（文字的水平對齊方式）

常用的選項，可以選擇 left（靠左）、center（置中）、right（靠右）。

如果想微調其餘更多屬性，請自行查閱網路上的「字典」哦✦

第四節：我懶得調整風格配色，我只需要更多的便利貼！

很簡單，只要在「上述的 HTML 版型範本」中～
複製整個 <div class="Index"> ... </div> 的內容即可。

看是要依樣畫葫蘆地選擇左邊的標籤樣式，還是右邊的清單風格。
至於「標籤範圍」，只需要確認有複製到整個區塊：

• 左側標籤樣式：

<div class="Index"><!-- 左邊的 Index 區域開始 -->
</div><!-- 左邊的 Index 區域結束 -->

• 右側清單風格：

<div class="Index"><!-- 右邊的 Index 區域開始 -->
</div><!-- 右邊的 Index 區域結束 -->

然後按照自己想要的順序貼到 HTML 的下方，再自行更改內容就行了。

第五節：我還是看不懂，怎麼辦？

呃，會玩 HTML 和 CSS 只是興趣使然，這個某莎不是專業的。（汗）

有空的話，可以自行查查上面的「好用工具」字典網址，那兒有非常詳盡的教學和範例！
如果只是遇到小問題，那麼或許大家可以在下面留言集思廣益？

🎈 文末推廣 (๑•̀ㅂ•́)و✧

• 如果喜歡這系列的作品，請多多「支持」某莎，或是「拍手留言」交流吧！
• 另也歡迎「喜歡 ACGN 或小說創作」的文友前來「推薦或自薦作品」❤
  某莎會很樂意追蹤拍手食糧噢✦（特別是耽美或奇幻的）