css

VISUAL STUDIO CODE 初心者設定指南

一般來說,剛安裝好的 Visual Studio Code 就已經相當完整,內建 emmet、各種常見語言的色彩標示、程式碼折疊、所在行標示、HTML & CSS 語法及屬性的下拉選項、支援 Markdown 等等…對一個網頁設計師來說,如果沒有特別的需求,幾乎可以馬上用來開發。話說如此,但總還是有一些小細節不是那麼完美,就像買了最潮的球鞋,裡頭卻有顆小石頭,穿起來總是刺腳。所幸 Visual Studio Code 提供極為豐富的設定,幫助你打造屬於自己的編輯器。下面有一些我們推薦的設定,讓你的 Visual Studio Code 不只是潮,用起來更是舒適。

網頁設計師必學的五個 CSS 動畫庫

俗話說,工欲善其事必先利其器,對現在的網頁設計師來說,為畫面增加一些微互動的動態效果已經是時勢所趨,但 CSS 不比 Flash,需要透過 Code 的方式才寫出動態的效果,對很多視覺設計師來說是一道門檻,所幸網路上已經有很多資源將類似的動畫需求整合起來,只需要用點心去尋找,就可以找到許多功能強大的 CSS 動畫庫,下面我們挑五個比較有名且實用的來介紹。

如何同時 Hightline 表格中的行及列

要將表格中的某一行 Highlight 起來很容易,你只要 tr:hover{background:yellow;} 就可以完成。但,如果你想同時 Highlight 行及列的時候,麻煩就會出現,因為在現有的 HTML & CSS 中,沒有針對「列」的設定。關於這個問題 MATT WALTON 提出一個解決的方式。

CSS 屬性選擇器-新手入門篇

大多數的 HTML 標籤都包含相對多組的屬性,例如常見的連結 a 標籤可以加 href、style、target、title 等屬性,而 CSS 屬性選擇器可以讓 CSS 依屬性的差異給予該標籤不同的設定,這樣做一來可以減少 class 或 id 的使用,讓 HTML 更加精簡好閱讀,二來可以增加維護的便利性,三來可以更便利的控制網頁上的每個元素,好處不少。