網頁設計怎麼回事

將表單的控制元件 (如: input) 與相關說明文字產生連結，讓滑鼠點擊文字時，也可以觸發相關控制元件產生作用

2017-10-26T20:45:00.003-07:00

使用HTML <label> 標籤的 for 屬性，可以將表單的控制元件 (如: input) 與相關說明文字產生連結，讓滑鼠點擊文字時，也可以對相關控制元件產生作用。
有兩種用法：

第一種是 <label for="id"> 和 <input id="">

Example:

<form>

 <label for="male">Male</label>
 <input type="radio" name="sex" id="male" />
 <br />
 <label for="female">Female</label>
 <input type="radio" name="sex" id="female" />
</form>

第二種是直接用 <label> 包住 <input /> 和文字

Example:

Noto Sans TC - 免費中文網頁字型

2017-09-20T07:30:00.003-07:00

免費的網頁用中文字型 Noto Sans TC (思源黑體）

Link
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
Example
font-family: 'Noto Sans TC', sans-serif;

他有 Thin, Light, Regular, Medium, Bold and Black 六種樣式，如下：

@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}

@font-face {

  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}

@font-face {

   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');

@font-face {

   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}

@font-face {

   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
}

@font-face {

   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
}

※ 如果沒有用到所有字型，可以選用用到的部分放置 CSS 檔中。

cwTeX - 五款免費中文網頁字型

2017-09-20T07:01:00.001-07:00

五款免費的網頁用中文字型 (黑體, 仿宋體, 楷體, 明體, 圓體)

黑體 cwTeXHei
Link
@import url(//fonts.googleapis.com/earlyaccess/cwtexhei.css);
Example
font-family: 'cwTeXHei', sans-serif;
仿宋體 cwTeXFangSong
Link
@import url(//fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
Example
font-family: 'cwTeXFangSong', serif;
楷體 cwTeXKai
Link
@import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css);
Example
font-family: 'cwTeXKai', serif;
明體 cwTeXMing
Link
@import url(//fonts.googleapis.com/earlyaccess/cwtexming.css);
Example
font-family: 'cwTeXMing', serif;
圓體 cwTeXYen
Link
@import url(//fonts.googleapis.com/earlyaccess/cwtexyen.css);
Example
font-family: 'cwTeXYen', sans-serif;

CSS3 的 clip-path：裁剪不規則圖形

2017-09-19T05:44:00.001-07:00

CSS3 的 clip-path 可以將單一 div 做成多形狀的變化。他是利用遮罩 (剪裁) 的方法，連接座標繪製出不同形狀的遮罩區域，讓底色或底圖顯現在區域內。

W3C 規範 clip-path 的語法：
clip-path: <clip-source> | [ <basic-shape> | | <geometry-box> ] | none
預設值：none

線上繪製不規則形狀遮色片
網站名稱：CSS clip-path maker
網站連結：http://bennettfeely.com/clippy/

使用 CSS 設定水平置中的方法

2017-09-18T06:29:00.000-07:00

使用 CSS 設定水平置中，要先把握住兩個部分：
一個是要置中的元素 (content)，
另一個則是其父元素 (container)。

網頁元素預設的 display 屬性分為 inline element 和 block-level element 兩種。

inline element 會自動調整內容大小，不能設定 width、height、margin、background-image...。
如：a、span、img...
block-level element 預設佔滿父元素寬度。
如：div、p、ul、li、h1、h2...
inline-block 具有不換行、會自動調整內容大小，但又可以設定 width、height、margin、background-image...。

text-align: center;

(主要用在 inline element)

在父元素設定 text-align: center，裡面所有文字或是 inline element (不管幾層以下) 都會有水平置中的效果！但是 block-level element 並同時設定 width 的元素，則不置中 (但內部的文字或其餘 inline 性質的也會有置中效果）。

這時候加上 display: inline-block，讓該元素擁有 inline 特性就可以置中。
加上該元素的固定寬度 (如：px、%)，並搭配下一步的 margin: 0 auto 也可以達成置中效果。

margin: 0 auto;

(主要用在 block-level element)

要讓已設定好固定寬度 (如：px、%) 的區塊水平置中，可以在置中元素內設定 margin:0 auto。若是 inline element ，要加上 display: block 後再設定 margin 就能完成置中。

※ img 預設為 inline element，需要轉換成 block-level element 才能設定 margin 完成置中。雖然被歸類在 inline element，但卻是可以直接設定width、height、margin的，唯獨沒辦法配合margin: 0 auto 進行置中。

position: absolute;
left: 50%;
transform: translateX(-50%);

(上面一段加在置中元素內，記得在父元素裡加上 position: relative;。)

* 設定 position: absolute 的元素會自動忽略 static 的元素，並往更上層去找其他非 static 的父元素來定位。因此父元素的 position 必須要是非預設 (default) 的 static 值。(設定為 relative、absolute 或 fixed 都可以)
* translateX(-50%) 的 50% 是以置中元素為依據。
* 不論是 inline 還是 block-level，有設定寬度還是沒設定寬度，都可以使用！
* 同樣的模式也用在垂直置中。

以下有一個線上的代碼產生器，可以根據你所選擇的條件，整合出適合需要的 CSS 置中範例。
How to Center in CSS
http://howtocenterincss.com/

太上清靜經-太上老君注解

2017-09-14T13:06:00.003-07:00

老君曰，
大道無形，生育天地。大道無情，運行日月。
大道無名，長養萬物。吾不知其名，強名曰道。
夫道者，
有清有濁。有動有靜。天清地濁。天動地靜。
男清女濁。男動女靜。降本流末。而生萬物。
清者濁之源。動者靜之基。人能常清靜。天地悉皆歸。
夫人神好清，而心擾之。人心好靜。而慾牽之。
常能遣其慾，而心自靜。澄其心，而神自清。
自然六慾不生，三毒消滅。
所以不能者，為心未澄，慾未遣也。
能遣之者，
內觀其心。心無其心。外觀其形。形無其形。
遠觀其物。物無其物。三者既悟。惟見於空。
觀空亦空。空無所空。所空既無，無無亦無，
無無既無，湛然常寂。寂無所寂，慾豈能生，
慾既不生。即是真靜。真常應物，真常得性，
常應常靜，常清靜矣。如此清靜，漸入真道。
既入真道，名謂得道。雖名得道，實無所得。
為化眾生。名謂得道。能悟之者，可傳聖道。
太上老君曰，
上士無爭，下士好爭。上德不德，下德執德，執著之者，不明道德。
眾生所以不得真道者，為有妄心。
既有妄心，即驚其神。既驚其神，即著萬物。
既著萬物，即生貪求。既生貪求，即是煩惱。
煩惱妄想，憂苦身心，便遭濁辱。流浪生死。
常沉苦海，永失真道，真常之道，悟者自得，
得悟道者，常清靜矣。

★老君曰　大道無形　生育天地　
☆天與地之間　看起來　好像就是空的　本來就沒什麼形體可言　可是天與地之間　雖然是沒有形體　卻能生出天地之間的一切:有生命的動物及植物　與無生命的沙土石頭　及許許多多的物體　
★大道無情　運行日月　
☆天與地的運轉　本來就沒有什麼感情存在可言　雖然沒什麼感情的存在　但是天與地之間　卻好像是有感情的存在　才使它們不斷的運轉　
★大道無名　長養萬物　
☆天與地的空間　它都不知道自己的名字　所以　本來就沒什麼名字可以去稱呼它　可是雖然沒有名字　但是它卻能養育萬物　滋潤萬物　使它們的生命能夠繼續成長　
★吾不知其名　強名曰　道　
☆這的確是一個很玄妙的問題　連我(老子)也不知道它的原因　所以也不知道要怎樣去稱呼它　那麼干脆勉強給它取一個名字　叫做道吧　
★夫道者　
☆這個道的確太玄妙了　包涵也太廣闊了　為什麼呢　
★有清有濁　
☆因為這個道　有時候　有些地方是清清淨淨的　有時候　有些地方就顯得非常污濁　
★有動有靜　
☆有時候　有些地方就活動著　有時候　有些地方就靜悄悄的　
★天清地濁　
☆像天空是一片清淨的　大地就顯得一片混濁　
★天動地靜　
☆像天體的運轉是屬於流動之形　大地的本體是屬於靜止之物　
★男清女濁　
☆男人是屬於清陽之體　女人是屬於濁陰之身　
★男動女靜　
☆男人是表現外在的　活動的　女人就表現內在的　靜止的　
★降本流末　而生萬物　
☆因此　清陽之氣是上升的　濁陰之氣是下降的　如果萬物清陽之氣不能保守那麼萬物的本來靈性便容易下降　萬物本來的靈性如果下降　便失去了本性的主宰　萬物如果失去了本性的主宰　便容易起了情欲之念　思想與行為便自然而然流於下體之末端　萬物的思想與行為如果流於下體之末端　便有陰陽之交合　萬物如果有了陰陽之交合　便自然而生長出種種輪回之萬物來　
★清者濁之源　
☆清淨是污濁的源頭　如水源在上游是清淨的　在下游就顯得污濁　
★動者靜之基　
☆活動的事物只是清靜的基礎　如一切的建筑物　都是由活動而來的　這就表示出　活動的力量只是靜止的基礎　只有清靜才是萬物的根本之道　
★人能常清靜　天地悉皆歸　
☆所以　人如果能夠經常保持清清靜靜　一切天地萬物　就全部歸納在人的本性之中了　這就是學道的根本　可是學道的根本　每個人都忽視了　
★夫　人神好清　而心擾之　
☆比如說　人的元神本來是喜好清靜的　可是都被后天的識神給擾亂了　
★人心好靜　而欲牽之　
☆人的心性也是一樣　本來也喜歡清靜的　但是都被貪念的欲望牽引去了　
★常能遣其欲　而心自靜　
☆因此　一個人如果能夠遣除這些貪念的欲望　人的心性　自然就能夠清淨　
★澄其心　而神自清　
☆澄濾這個心性之后　我們的元神　自然能夠清醒　
★自然六欲不生　三毒消滅　
☆這樣的話　六種眼耳鼻舌身意　這些所接觸的欲望　自然不會帶來干擾　三種貪妄心　愚痴心　嗔怨心　之毒素也自然而清滅　
★所以不能者　為心未澄　欲未遣也　
☆但是有些人就是做不到　這就是這個人的心性　還沒有澄清的關系　所以尚有一些欲望還沒遣除　
★能遣之者　內觀其心　心無其心　
☆如果人能夠遣除這些欲望　達到清淨的話　你去觀察你自己的心　連你自己的心　都會感覺沒有了　
★外觀其形　形無其形　
☆你再往外看一切形體　這些形體也不是形體了　
★遠觀其物　物無其物　
☆就是了望遠處的物體　遠處的物體　也不是什麼物體了　
★三者既悟　唯見於空　
☆這三種　心　形　物　都能了悟一切都是虛幻的話　心地就唯有一片空曠　毫無一物了　
★觀空亦空　空無所空　
☆能夠這樣的話　看到虛無的天空也是虛幻的　連這個虛幻　都能看破以及看空的話　
★所空既無　無無亦無　
☆就是一切都沒有了　既然知道一切都沒有了　心性之中還有什麼可以存在呢
本來都是一切假相而已　
★無無既無　湛然常寂　
☆既然知道一切都是假相的　我們就要連這些假相　都不要執著　連假相都不執著了就是一片靜止的狀態　
★寂無所寂　欲豈能生　
☆心性的靜止達到想要靜止的心　都沒有的時候　欲望怎能夠生出來呢　
★欲既不生　即是真靜　
☆能夠達到貪念的欲望　完全不生出來的時候　就是達到真靜的工夫了　
★真常應物　
☆心性達到真靜的狀態　然后去應用實行一切事物　自然就是自在自如了　
★真常得性　
☆能夠自在自如的人　就是能夠守住真正　常清常靜的人　能夠守住真正　常清常靜的人　他就是已經得到　明自本心　識自本性的人　
★常應常靜　
☆能夠達到明自本心　識自本性的人　無論在紛擾的場所　或是在清靜的場所
他都能時時保持清靜的心　
★常清靜矣　
☆能夠經常保持清靜心的人　才是真正清靜之人　
★如此清靜　漸入真道　
☆達到真正清靜之人　就是已經漸漸邁入真正的大道了　
★既入真道　名為得道　
☆既然邁入真正的大道　就是修道人所稱的　得道　這個名詞　
★雖名得道　實無所得　
☆可是雖然稱為　得道　實在是沒有得到什麼　
★為化眾生　名為得道　
☆但是為了度化天下迷昧的蒼生　所以才舉個　得道　的名稱　作為他人修道已成的名詞　
★能悟之者　可傳聖道　
☆現在我(老子)講到這里　如果你們能夠領悟的人　就可以普傳這個至真至貴的聖賢大道了　
★老君曰　上士無爭　下士好爭　
☆所以吾(太上道祖)說　最上等有智慧的人　是沒有爭奪之心的　只有最下等沒有智慧的人　才一天到晚產生貪妄的爭奪心　
★上德不德　下德執德　
☆最上等有道德的人　是不說自己有德行的　只有最下等有道德的人　才說自己有德行　因為他是一位頑固執迷的人呀　
★執著之者　不明道德　
☆所以　一個頑固執迷的人　會常說自己有德行　但是依我看來　反而是一位不知道什麼叫道德的人　
★眾生所以不得真道者　為有妄心　
☆為什麼眾生不能邁入真正的大道呢　就是因為他常常有一顆虛幻的妄想心　
★既有妄心　即驚其神　
☆既然有一顆虛幻妄想心　就已經驚擾了他本身的元神了　
★既驚其神　即著萬物　
☆既然已經驚擾到他本身的元神　他的元神就貪著一切有形的萬物了　
★既著萬物　即生貪求　
☆既然貪著一切有形的萬物　就會產生一些不必要的貪求　
★既生貪求　即是煩惱　
☆既然心性產生不必要的貪求　心中就有了邪思妄想的煩惱　
★煩惱妄想　憂苦身心　
☆既然心靈中有了邪思妄想的煩惱　就會帶來憂愁的痛苦　既然帶來了憂愁的痛苦　就會擾亂到自己的身心　擾亂自己的身心　自然就會犯下錯誤的行為　
★便遭濁辱　
☆既然犯下錯語的行為　就會污辱自己的靈性　既然污辱了自己的靈性　
★流浪生死　常沉苦海　
☆就要流浪在生死的輪回中　既然流浪在生死的輪回中　便要沉淪於茫茫苦海　
★永失真道　
☆既然沉淪於茫茫苦海　就要永遠失去真正的大道了　
★真常之道　悟者自得　
☆而真正長久的大道　是領悟的人　才能得到的呀　不是別人能夠送給你的　
★得悟道者　常清靜矣　
☆所以　能夠真正領悟大道的人　簡單一句話來說　就是經常身心保持清靜的人了
　
文章出處 http://blog.udn.com/god72116/15982200

2017最熱的8個平面設計趨勢

2017-09-09T20:39:00.001-07:00

摘要：
2017年你應該知道的平面設計趨勢

更鮮艷明亮的顏色（Louder and Brighter Colors）
醒目的字體（Bold Typography）
Google字體（Google Fonts）
真實的照片（Authentic Photos）
手繪圖形和圖示（Hand-Drawn Graphics and Icons）
重新認識真正的極簡主義（Minimalism Will Get Back To Its Roots）
有用的動態圖（Useful GIFs）
雙色調（Duotones）

參考網站：https://kknews.cc/design/gvzq26l.html

CSS 的虛擬類別 (Pseudo Class) 和虛擬元素 (Pseudo Element)

2017-09-08T10:20:00.002-07:00

虛擬類別 (Pseudo Class) 的執行對象是文件樹中已有的元素，而虛擬元素 (Pseudo Element) 則新增了一個文件樹外的元素。兩者的差別在於：有沒有新增一個文件樹外的元素。

虛擬類別 (Pseudo Class)

用於向某些選擇器添加特殊的效果，使用一個冒號「:」開頭。

一、錨點虛擬類別

:link
:visited
:hover
:active

二、狀態虛擬類別

:checked、unchecked、:enabled、:disabled

三、-child

:first-child：第一個子元素
:last-child：最後一個子元素
:nth-child(數字)：第幾個子元素 (從 1 數起，不是從 0)
:nth-child(2n)：偶數的子元素 (2 的倍數)
:nth-child(2n+1)：奇數的子元素
:nth-last-child(數字)：從後面數來第幾個子元素
:only-child：父元素內只有一個子元素

四、-of-type

:first-of-type：同一種元素的第一個
:last-of-type：同一種元素的最後一個
:nth-of-type(數字)：同一種元素裏頭的第幾個
:nth-last-of-type(數字)：同一種元素從後面屬過來第幾個
:only-of-type：只有這種元素

虛擬元素 (Pseudo Element)

用於將特殊的效果添加到某些選擇，使用兩個冒號「::」開頭。虛擬元素和真實元素一樣，我們可以把它當做 HTML 中常用的元素來使用，但它只能利用 CSS 來產生，而且並不在文件樹中，所以無法對他們進行分類。

::before (:before)

在原本的元素「之前」加入內容，以 display:inline-block 的屬性存在。

::after(:after)

在原本的元素「之後」加入內容，以 display:inline-block 的屬性存在。

※ ::before (:before) 與 ::after (:after) 一定要具備 content 的屬性。

::first-line (:first-line)

::first-letter (:first-letter)

::cue (:cue)

::selection

::backdrop

::placeholder

::marker

::spelling-error

::grammar-error

虛擬元素一定要具備的 content 屬性

2017-09-08T10:08:00.003-07:00

一、虛擬元素 (Pseudo Element) 一定要具備 content 屬性

沒有 content 屬性是不會在畫面上顯示任何東西的，就算是只有 content:""; 都可以。

HTML:
<a href="https://dtgunexpectedly.blogspot.tw/" target="_blank">呆頭豬的雲</a>

CSS:
a::before{
content: attr(href); /* 將超連結的 href 內容顯示在前面 */
}
a::after{
content: attr(target); /* 將超連結的 target 內容顯示在後面 */
}

結果:
https://dtgunexpectedly.blogspot.tw/呆頭豬的雲_blank

二、content 內容用一個空白鍵就可以不斷「相連累加」

HTML:
<a href="https://dtgunexpectedly.blogspot.tw/" target="_blank">呆頭豬的雲</a>

CSS:
a::before{
content: "( " attr(href) " ) " " ( " attr(target) " ) ";
}

結果:
( https://dtgunexpectedly.blogspot.tw/ ) ( _blank ) 呆頭豬的雲

三、content 可以使用 url 放入圖片

CSS:
div::before{
content:url(圖片網址) url(圖片網址);
}

四、content 搭配 quotes 使用

quotes 為定義「括號格式」的屬性。

HTML:

最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>。

CSS:

quotes: ' < ' ' > ';

}

結果:

最外層<第一層<第二層><第二層<第三層>>>。

HTML:

最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>。

CSS:

quotes: ' < ' ' > ' ' [ ' ' ] ' ' ( ' ' ) ' ;

}

結果:

最外層<第一層[第二層][第二層(第三層)]>。

HTML:

最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>。

CSS:

span{

quotes: ' < ' ' > ' ' [ ' ' ] ' ' ( ' ' ) ' ;

}

span::before{

content:open-quote; /* 啟始括號 */

color:red;

}

span::after{

content:close-quote; /* 結束括號 */

color:#aaa;

}

結果:

最外層<第一層[第二層][第二層(第三層)]>。

線上 CSS 三角形產生器

2017-09-07T17:15:00.001-07:00

一個好用的三角形 CSS 產生器
http://apps.eky.hk/css-triangle-generator/zh-hant

margin 屬性

2017-09-06T17:50:00.002-07:00

margin 是設定物件上下左右留白的屬性，依順時鐘方向對上、右、下、左四個方向指定數值。

margin: 10px; (上下左右各留白 10px)
margin: 10px 20px; (上下留白 10px、左右留白 20px)
margin: 10px 20px 30px; (上留白 10px、左右留白 20px、下留白 30px)
margin: 10px 20px 30px 40px; (上留白 10px、右留白 20px、下留白 30px、左留白 40px)

也可以用 margin-top、margin-bottom、margin-left、margin-right 指定上、下、左、右的留白。指定的值可以為 auto、數值或單位，也可以用負數(負邊距 negative margin)。

要將區塊層級 (block level，如 div) 元件相對於父元件，設定左右置中，可以將元件的左右 margin 設為 auto。

※ 要注意，相鄰的留白會互相抵消。如兩個 margin 為 20px 的元件相鄰排列，元件間距會是 20px，而不是 40px。

多層級收合式選單 Multi-level Accordion

2017-09-06T09:12:00.000-07:00

CSS:
<link href='https://fonts.googleapis.com/css?family=News+Cycle:400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
* { margin:0; padding:0; }
body { font-size:100%; }
.accordion { width:380px; margin:20px auto; }
.accordion h1, h2, h3, h4 { cursor:pointer; }
.accordion h2, h3, h4 { font-family:"News Cycle"; }
.accordion h1 { padding:15px 20px; background-color:#333; font-family:Lobster; font-size:1.5rem; font-weight: normal; color:#1abc9c; }
.accordion h1:hover { color:#4afcdc; }
.accordion h1:first-child { border-radius:10px 10px 0 0; }
.accordion h1:last-of-type { border-radius:0 0 10px 10px; }
.accordion h1:not(:last-of-type) { border-bottom:1px dotted #1abc9c; }
.accordion div, .accordion p { display:none; }
.accordion h2 { padding:5px 25px; background-color:#1abc9c; font-size:1.1rem; color:#333; }
.accordion h2:hover { background-color:#09ab8b; }
.accordion h3 { padding:5px 30px; background-color:#b94152; font-size:.9rem; color:#ddd; }
.accordion h3:hover { background-color:#a93142; }
.accordion h4 { padding:5px 35px; background-color:#ffc25a; font-size:.9rem; color:#af720a; }
.accordion h4:hover { background-color:#e0b040; }
.accordion p { padding:15px 35px; background-color:#ddd; font-family:"Georgia"; font-size:.8rem; color:#333; line-height:1.3rem; }
.accordion .opened-for-codepen { display:block; }
</style>

HTML:
<aside class="accordion">
<h1>News</h1>
<div class="opened-for-codepen">
<h2>News Item #1</h2>
<div class="opened-for-codepen">
<h3>News Item #1a</h3>
<div>
<h4>News Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>News Subitem 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>News Subitem 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h3>News Item #1b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>News Item #1c</h3>
<div class="opened-for-codepen">
<h4>News Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>News Subitem 2</h4>
<p class="opened-for-codepen">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<h2>News Item #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>News Item #3</h2>
<div>
<h3>News Item #3a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>News Item #3b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<h1>Updates</h1>
<div>
<h2>Update #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Update #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Update #3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Update #4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h1>Miscellaneous</h1>
<div>
<h2>Misc. #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Misc. #2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Misc. #3</h2>
<div>
<h3>Misc. Item #1a</h3>
<div>
<h4>Misc. Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>Misc. Subitem 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>Misc. Subitem 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h3>Misc. Item #2a</h3>
<div>
<h4>Misc. Subitem 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>Misc. Subitem 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</aside>

JS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var headers = ["H1","H2","H3","H4","H5","H6"];

$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();

if($.inArray(name,headers) > -1) {
var subItem = $(target).next();

//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion p, .accordion div").filter(function() {
if($(this).parents().length >= depth && this !== subItem.get(0)) {
return true;
}
});
$(allAtDepth).slideUp("fast");
//slideToggle target content and adjust bottom border if necessary
subItem.slideToggle("fast",function() {
$(".accordion :visible:last").css("border-radius","0 0 10px 10px");
});
$(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
}
});
</script>

整理資料來自: https://codepen.io/rbobrowski/pen/likvA

線上漸層背景效果的 CSS 碼產生器

2017-09-05T07:47:00.000-07:00

線上非常好用的漸層效果 CSS 碼產生器，使用方式和 Photoshop 的漸層工具操作相似。
http://www.colorzilla.com/gradient-editor/

CSS 語法 margin 的互相抵消(Collapsing margins)

2017-09-04T15:08:00.004-07:00

CSS 語法的 margin 在區塊層級 (block level) 元件之間，他的上下 margin 會互相抵消，而在行內層級元件 (display: inline-block;) 或是與 float 相關的元件則不會發生這樣的情形，W3C 稱之為「Collapsing margins」。

相鄰的 margin 互相抵消：

HTML:
<div class="box"></div>
<div class="box"></div>

CSS:
.box {
margin:20px;
}
HTML:
<div class="box"></div>
<div class="box-large"></div>

CSS:
.box {
margin:20px;
}
.box-large {
margin:30px;
}

子元件的 margin 互相抵消

HTML:

</div>

CSS:

.parent {

width:200px;

height:100px;

}

.child {

width:66%;

height:50%;

margin-top:20px;

}

Collapsing margins 解決方案

要處理這種互相抵消的情況，可以使用 padding、border、inline-block 及 float 內容來做區分。

透過外元素的 padding
.parent {
padding-top: 1px;
}
外元素加入 border
.parent {
border: 1px solid #fff;
}
內元素更改屬性 (inline-block)
.child {
display: inline-block;
}
內元素更改屬性 (float)
.child{
float: left;
}

更加彈性的 CSS3 精靈盒子 - Flexbox

2017-09-01T19:37:00.000-07:00

Flexbox 的屬性:

1. display

display:flex (類似 display:block)
display:inline-flex (類似 display:inline-block)

2. flex-direction

Flexbox 內容元素的「排列方向」，有四種--

row(預設值)：由左到右，從上到下
row-reverse(與 row 相反)：由右到左，從上到下
column：從上到下，再由左到右
column-reverse(與 column 相反)：從下到上，再由左到右

3. justify-content

決定內容元素與整個 Flexbox 的「水平對齊」位置

flex-start(預設值)：對齊最左邊
flex-end：對齊最右邊
center：水平置中
space-between：平均分配內容元素，左右元素將會與最左邊和最右邊貼齊
space-around：平均分配內容元素，間距也是平均分配

4. align-items

決定內容元素與整個 Flexbox 的「垂直對齊」位置

flex-start(預設值)：對齊最上面
flex-end：對齊最下面
center：垂直置中
stretch：將內容元素全部撐開至 Flexbox 的高度
baseline：以所有內容元素的基線作為對齊標準

5. align-self

設定與 align-items 相同，但 align-self 的作用在於覆寫已經套用 align-items 的屬性

6. align-content

align-items 是針對內容為單行的元素進行處理
align-content 是針對內容為多行的元素

flex-start(預設值)：對齊最上面
flex-end：對齊最下面
center：垂直置中
space-between：將第一行與最後一行分別對齊最上方與最下方
space-around：每行平均分配間距
stretch：內容元素全部撐開

7. flex-wrap

display 設定為 flex 或 inline-flex 的時候，子元素就是以單行的方式，彈性撐滿父元素，所以就要利用 flex-wrap 來換行

nowrap(預設值)：單行
wrap：多行
wrap-reverse：多行，但內容元素反轉

8. order

直接指定一個數字，由小到大的排列順序

*9. flex

由三個屬性組合而成，依序是「flex-grow」、「flex-shrink」和「flex-basis」，如果 flex 只填了一個數值 ( 無單位 )，那麼預設就是以 flex-grow 的方式呈現

flex-grow：數字，無單位，當子元素的 flex-basis 長度「小」於它自己在父元素分配到的長度，按照數字做相對應的「伸展」比例分配，預設值為 1，設為 0 的話不會進行彈性變化，不可為負值。
flex-shrink：數字，無單位，當子元素的 flex-basis 長度「大」於它自己在父元素分配到的長度，按照數字做相對應的「壓縮」比例分配，預設值為 1，設為 0 的話不會進行彈性變化，不可為負值。
flex-basis：子元素的基本大小，作為父元素的大小比較基準，預設值為 0，也因為預設值為 0，所以沒有設定此屬性的時候，會以直接採用 flex-grow 屬性，flex-basis 也可以設為 auto，如果設為 auto，就表示子元素以自己的基本大小為單位。

筆記整理，更詳細解說請至：深入解析 CSS Flexbox

http://www.oxxostudio.tw/articles/201501/css-flexbox.html

W3C 的 CSS Flexible Box Layout Module Level 1
https://www.w3.org/TR/css-flexbox-1/#box-model

Flexbox 的屬性
https://www.w3.org/TR/css-flexbox-1/#property-index

使用 CSS3 製作逐個淡入的動畫效果

2017-09-01T09:40:00.003-07:00

HTML:
<div class="box fade-in one">
look at me fade in
</div>

<div class="box fade-in two">
Oh hi! i can fade too!
</div>

<div class="box fade-in three">
Oh hi! i can fade three!
</div>

CSS:
/* 使用 keyframes 來決定物件的開始和結束狀態 */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
opacity:0; /* 一開始讓東西消失 */
-webkit-animation:fadeIn ease-in 1; /* 呼叫命名為 fadeIn 的 keyframe, 使用 ease-in 動畫效果並且只重複執行一次 */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards; /* 確保在動畫完成後，我們會保持在最後的 keyframe 值 (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

/*---建立一個基本的 box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
}

jQuery外掛－「SuperResize打造全螢幕背景」適用各瀏覽器

2017-08-31T13:48:00.000-07:00

Supersized全螢背景外掛：

適用瀏覽器：IE7.0+、Chrome、Firefox、Safari、Opera
展示：http://ds.minwt.com.tw/file/sampleView/jQuery/superresizefullbackground/

Supersized 參數設定：

startwidth: 640 //照片起始長度
startheight: 480 //照片起始寬度
vertical_center: 1 //垂直居中 1居中,0關閉
slideshow: 1 //自動輪播 1開,0關
navigation: 1 //播放控制鈕 1開,0關
transition: 1 //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left //轉場效果
pause_hover: 1 //滑入時停止輪播 1開,0關
slide_counter: 1 //顯示圖片筆數 1開,0關
slide_captions: 1 //圖片名稱
slide_interval: 3000 //轉場時間

Supersized 增加圖片：

加在 <div id="supersize">~</div> 之間即可，增加圖片img標籤中，可用title來設定圖片名稱。
完成後就可在各平台上運作了。

網頁間切換的淡出、淡入效果

2017-08-31T13:17:00.000-07:00

如何在 Windows 10 開機時，自動連線？

2017-06-28T06:42:00.000-07:00

在 Windows 10 開機時，自動撥號寬頻連線的方式：

開啟【記事本】
輸入 rasdial （您的寬頻連線名稱）（用戶名）（密碼）
如: rasdial 寬頻連線 user 123
將檔案存檔, 存檔類型選【所有檔案】，然後將檔案副檔名取為 .cmd (如: internet.cmd)，完成後【存檔】。
將 internet.cmd 檔案，放置到啟動資料夾，之後開機就可以自動撥號了。

2016-05-25T20:20:00.000-07:00

KDiff3 提供文字比對功能，可以比對不同文字檔案或資料夾！比對後會逐行逐字列出檔案差異的地方，並有文字合併及整合的工具，讓你可依照比對後的結果作進一步的編輯。

官方網站：Joachim Eibl
檔案下載：Download

從基礎到進階的 SASS 線上教學

2016-05-25T00:52:00.004-07:00

http://sam0512.blogspot.tw/2013/10/sass.html

SASS是一個可以提升寫網頁CSS效率的程式語言。

這個網站是一位高雄的前端工程師作的教學內容，有文字(可以當筆記)，有影片(可以線上教學)，真的很棒的一個教學網站。

世界最大的WEB開發網站

2016-05-25T00:44:00.001-07:00

http://www.w3schools.com/

敢稱自己是世界最大的WEB開發網站，真的需要很強的實力。
裡面有很豐富和詳盡的內容，相信很多人都來過這裡找到想要的解答。

多國語言的網頁設計標準技術

2016-04-08T07:35:00.006-07:00

要設計多國語言的網站，你可以從下面網頁中開始了解使用國際化的網站標準技術。

Internationalization Techniques: Authoring HTML & CSS
https://www.w3.org/International/techniques/authoring-html-dynamic

取消 Chrome 瀏覽器中 input 和 textarea 的預設樣式

2013-08-21T05:53:00.003-07:00

Chrome 瀏覽器中的 input 和 textarea 在滑鼠移入時都有黃色邊框，而且 textarea 還可以任意拖移縮放，影響美觀不說，有時候還會使版頁面配置跑掉。

取消 Chrome 瀏覽器中 input 和 textarea 的聚焦邊框：
input,button,select,textarea{outline:none}

取消 Chrome 下 textarea 可拖移縮放：
textarea{resize:none}

去除連結虛線框

2013-08-21T05:26:00.001-07:00

使用CSS

a{
outline: none; /* for Firefox */
hlbr:expression(this.onFocus=this.blur()); /* for IE */
}

參考網頁: http://www.minwt.com/css/1144.html

網頁設計怎麼回事

將表單的控制元件 (如: input) 與相關說明文字產生連結，讓滑鼠點擊文字時，也可以觸發相關控制元件產生作用

第一種是 <label for="id"> 和 <input id="">

Example:

第二種是直接用 <label> 包住 <input /> 和文字

Example:

Noto Sans TC - 免費中文網頁字型

cwTeX - 五款免費中文網頁字型

CSS3 的 clip-path：裁剪不規則圖形

使用 CSS 設定水平置中的方法

text-align: center;

(主要用在 inline element)

margin: 0 auto;

(主要用在 block-level element)

position: absolute;left: 50%;transform: translateX(-50%);

太上清靜經-太上老君注解

2017最熱的8個平面設計趨勢

CSS 的虛擬類別 (Pseudo Class) 和虛擬元素 (Pseudo Element)

虛擬類別 (Pseudo Class)

一、錨點虛擬類別

二、狀態虛擬類別

三、-child

四、-of-type

虛擬元素 (Pseudo Element)

::before (:before)

::after(:after)

::first-line (:first-line)

::first-letter (:first-letter)

::cue (:cue)

::selection

::backdrop

::placeholder

::marker

::spelling-error

::grammar-error

虛擬元素一定要具備的 content 屬性

一、虛擬元素 (Pseudo Element) 一定要具備 content 屬性

二、content 內容用一個空白鍵就可以不斷「相連累加」

三、content 可以使用 url 放入圖片

四、content 搭配 quotes 使用

線上 CSS 三角形產生器

margin 屬性

多層級收合式選單 Multi-level Accordion

線上漸層背景效果的 CSS 碼產生器

CSS 語法 margin 的互相抵消(Collapsing margins)

相鄰的 margin 互相抵消：

子元件的 margin 互相抵消

Collapsing margins 解決方案

更加彈性的 CSS3 精靈盒子 - Flexbox

Flexbox 的屬性:

1. display

2. flex-direction

3. justify-content

4. align-items

5. align-self

6. align-content

7. flex-wrap

8. order

*9. flex

使用 CSS3 製作逐個淡入的動畫效果

jQuery外掛－「SuperResize打造全螢幕背景」適用各瀏覽器

Supersized全螢背景外掛：

Supersized 參數設定：

Supersized 增加圖片：

網頁間切換的淡出、淡入效果

如何在 Windows 10 開機時，自動連線？

從基礎到進階的 SASS 線上教學

世界最大的WEB開發網站

多國語言的網頁設計標準技術

取消 Chrome 瀏覽器中 input 和 textarea 的預設樣式

去除連結虛線框

position: absolute;
left: 50%;
transform: translateX(-50%);