發表文章

目前顯示的是 2017的文章

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

使用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: <label><input type="checkbox" name="swim" id="interest" /> Swim</label>

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

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

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

五款免費的網頁用中文字型 (黑體, 仿宋體, 楷體, 明體, 圓體) 黑體 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:裁剪不規則圖形

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 設定水平置中的方法

使用 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最熱的8個平面設計趨勢

摘要: 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)

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

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

一、虛擬元素 (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 三角形產生器

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

margin 屬性

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

圖片
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 碼產生器

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

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

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

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

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

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

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

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

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來設定圖片名稱。 完成後就可在各平台上運作了。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { $('body').css('display', 'none'); $('body').fadeIn(1000); //一開始淡入 $('a.link').click(function(event) { //點選 class 為 link 的 a 元件時觸發 event.preventDefault(); //取消事件預設動作 newLocation = this.href; $('body').fadeOut(1000, newpage); //點選後淡出 }); function newpage() { window.location = newLocation; } }); </script>

如何在 Windows 10 開機時,自動連線?

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