網頁設計怎麼回事

免費的網頁用中文字型 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...

五款免費的網頁用中文字型 (黑體, 仿宋體, 楷體, 明體, 圓體) 黑體 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 可以 將單一 div 做成多形狀的變化。他是 利用遮罩 (剪裁) 的方法，連接座標繪製出 不同形狀 的 遮罩區域，讓底色或底圖顯現在區域內。 W3C 規範 clip-path 的語法： clip-path: <clip-source> | [ <basic-shape> | | <geometry-box> ] | none 預設值：none 線上繪製不規則形狀遮色片 網站名稱：CSS clip-path maker 網站連結： http://bennettfeely.com/clippy/

使用 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 進行置中。 ...

老君曰， 大道無形，生育天地。大道無情，運行日月。 大道無名，長養萬物。吾不知其名，強名曰道。 夫道者， 有清有濁。有動有靜。天清地濁。天動地靜。 男清女濁。男動女靜。降本流末。而生萬物。 清者濁之源。動者靜之基。人能常清靜。天地悉皆歸。 夫人神好清，而心擾之。人心好靜。而慾牽之。 常能遣其慾，而心自靜。澄其心，而神自清。 自然六慾不生，三毒消滅。 所以不能者，為心未澄，慾未遣也。 能遣之者， 內觀其心。心無其心。外觀其形。形無其形。 遠觀其物。物無其物。三者既悟。惟見於空。 觀空亦空。空無所空。所空既無，無無亦無， 無無既無，湛然常寂。寂無所寂，慾豈能生， 慾既不生。即是真靜。真常應物，真常得性， 常應常靜，常清靜矣。如此清靜，漸入真道。 既入真道，名謂得道。雖名得道，實無所得。 為化眾生。名謂得道。能悟之者，可傳聖道。 太上老君曰， 上士無爭，下士好爭。上德不德，下德執德，執著之者，不明道德。 眾生所以不得真道者，為有妄心。 既有妄心，即驚其神。既驚其神，即著萬物。 既著萬物，即生貪求。既生貪求，即是煩惱。 煩惱妄想，憂苦身心，便遭濁辱。流浪生死。 常沉苦海，永失真道，真常之道，悟者自得， 得悟道者，常清靜矣。 ★老君曰　大道無形　生育天地　 ☆天與地之間　看起來　好像就是空的　本來就沒什麼形體可言　可是天與地之間　雖然是沒有形體　卻能生出天地之間的一切:有生命的動物及植物　與無生命的沙土石頭　及許許多多的物體　 ★大道無情　運行日月　 ☆天與地的運轉　本來就沒有什麼感情存在可言　雖然沒什麼感情的存在　但是天與地之間　卻好像是有感情的存在　才使它們不斷的運轉　 ★大道無名　長養萬物　 ☆天與地的空間　它都不知道自己的名字　所以　本來就沒什麼名字可以去稱呼它　可是雖然沒有名字　但是它卻能養育萬物　滋潤萬物　使它們的生命能夠繼續成長　 ★吾不知其名　強名曰　道　 ☆這的確是一個很玄妙的問題　連我(老子)也不知道它的原因　所以也不知道要怎樣去稱呼它　那麼干脆勉強給它取一個名字　叫做道吧　 ★夫道者　 ☆這個道的確太玄妙了　包涵也太廣闊了　為什麼呢　 ★有清有濁　 ☆因為這個道　有時候　有些地方是清清淨淨的　有時候　有些地方就顯得非常污濁　 ★有動有靜　 ☆有時候　有些地方就活動著　...

摘要： 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

虛擬類別 (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) :...

一、虛擬元素 (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: ...

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

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。

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; ...

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

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 class="parent">   <div class="child"></div> </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-b...

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...

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-durati...