網頁設計怎麼回事

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