莎茈 Salvia

🌸 牛奶依存症患者、愛吃雞蛋,喜歡角落生物的貓。 🎨 更新週期 ➡️ 每週:366日誕生花×5 + 鋼筆手抄 + 隨便亂畫(不定期) 🦣 日常嘟文 ➡️ https://liker.social/@sachanshih 🐈 有很大的概率被小動物和食物拐走(?)

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

發布於
某莎自製的 JSFiddle 便利貼版型公開啦!儘管拿去不用錢,如果喜歡,打賞支持一下就更好啦✦(被K)文章內附簡單的標籤屬性辨識教學,歡迎留言~

❀ 前情提要 ❀

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

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

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

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

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


❀ 成品展示 ❀


❀ 本篇大綱 ❀

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

❀ 本篇正文 ❀

免版權圖庫:Pixabay @ krzysztof-m
📦 事前準備

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

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

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

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


⚙️ 好用工具

📐 版型解析

廢話不多說,直接進入正題吧! (其實是某莎不擅長開場白)

先來當前版本的公開便利貼版型的 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調色:rgba(255,255,255,0.5)、rgba(0%,0%,0%,1)

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

一般情況下,某莎比較喜歡使用RGBA調色,因為可以順便調整 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 或小說創作」的文友前來「推薦或自薦作品」
    某莎會很樂意追蹤拍手食糧噢✦(特別是耽美或奇幻的)

喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明

〈莎莎的生活札記〉鼠尾草播種紀念日&某莎加入讚賞公民啦✦

〈莎莎的生活札記〉第一次烤蛋糕的搞笑歷程

〈莎莎的生活札記〉第一次畫曼陀羅的心得感想

9

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區