活頁夾 標簽
00
3/26/2018
CSS opacity 透明效果
CSS opacity 透明效果
CSS3 opacity 屬性的功能是用來控制元素的透明效果，如 img 、div 、span 、table ... 等元素，使用 CSS3 opacity 屬性來輕鬆的達到網頁元素不透明度的調整，屬性的語法非常簡單，只需要透過數字的調整。opacity: x : x 從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0。
00
3/19/2018
JavaScript array.sort() 陣列 元素 排序
JavaScript array.sort() 陣列 元素 排序
JavaScript array.sort() 可以用來重新排序 JavaScript Array 中的陣列元素 如 英文 字母、單字、數字 重新排列，並回傳一個排序完成的新陣列 。基本語法 : array.sort( function or method ) 將想要處理的 Array 後面加上 sort 即可，至於小括號內的＂function or method＂則是選擇性項目，用來規定要以什麼方式做排序，如果沒有要使用，可以空著，但通常在數字排序上，會加入條件，讓數字比大小，否則 JavaScript sort 函式會以頭字母的編碼排序。
| JavaScript array.sort() | 排序出結果 | 解釋 |
| var Arr1= [40, 100, 1, 5, 25, 10]; Arr1.sort( ); | JavaScript sort() 函式預設只會將開頭字母或字元拿出來做編碼排序，所以排序出來的結果與數字的大小並沒有關係， 如要能夠創造出數字比大小的效果，可以參考下範例二。 | |
| var Arr2= [40, 100, 1, 5, 25, 10]; Arr2.sort(function(a, b){return a-b} ); | JavaScript sort(function(a, b){return a-b} )，在 sort 括號內加入 function(a, b){return a-b}， 得出根據數字從小至大排序。 | |
| var Arr3= [40, 100, 1, 5, 25, 10]; Arr3.sort(function(a, b){return b-a} ); | JavaScript sort(function(a, b){return b-a} )，在 sort 括號內加入 function(a, b){return b-a}， 今次把 a-b 改為 b-a ，得出根據數字從大至小排序。 | |
| var Arr4= ["Big", "Orange", "Apple", "Banana"]; Arr4.sort( ); | JavaScript sort()，函式預設只會將開頭字母或字元拿出來做編碼排序，得出根據數文字從小至大排序。 | |
| var Arr5= ["Big", "Orange", "Apple", "Banana"]; Arr5.sort(); Arr5.reverse(); | JavaScript sort()，函式預設只會將開頭字母或字元拿出來做編碼排序，得出根據數文字從小至大排序， 相反。加入 Arr5.reverse() 得出根據數文字從大至小排序。 | |
| var Arr6= ["Big", "Orange", "Apple", "Banana"]; Arr6.indexOf("Apple"); | JavaScript indexOf() 可以用來檢索 Apple 在這陣列中的位置 2 ，（從 0 開始算）。 |
3/13/2018
hover another css
hover another css
當滑鼠移過去元素的時候，改變元素的 CSS 而已。可以換個 底圖 圖片改變字的顏色大小等等 ，我們來瞧瞧 CSS 怎麼辦到的吧：| <div id="div1">A</div> <div id="div2">B</div> | #div1:hover + #div2{ .css } 兩個獨立 div , hover 後面要加 + |
| <div id="div1">A <div id="div2">B </div> </div> | #div1:hover #div2{ .css } div1 內 div2 hover 後面無需加 + |
00
00
00
hover another css
css hover after
<div id="Adiv">
<img id="Aimg" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpmn2hGr71Zs3GGh-ApMIb-oTXBwOosq2vMzqssmnO564xnvikzQ" />
<div id="text"></div>
</div>
</center>
<style>#Aimg ,#Adiv {height:100px ;width:150px;}
#text:after {content: "滑鼠請移到上圖"}
#Adiv:hover #text:after{content: "滑鼠可以離開"} </style>
hi
hi
<center>
<div id="Bdiv">
<img id="Bimg" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpmn2hGr71Zs3GGh-ApMIb-oTXBwOosq2vMzqssmnO564xnvikzQ" />
<div id="Atext">hi</div>
<div id="Btext">hi</div>
<div id="Ctext"></div>
</div>
</center>
<style>#Bimg , #Bdiv {height:100px ;width:150px;}
#Ctext:after {content: "滑鼠請移到上圖"}
#Bdiv:hover #Ctext:after{content: "滑鼠可以離開"} </style>
<div class="ot" id="WhoverA" style="background-color: azure; border: 8px outset gainsboro; float: left; height:600px; width: 48%;" >
<center>
<img id="img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTpmn2hGr71Zs3GGh-ApMIb-oTXBwOosq2vMzqssmnO564xnvikzQ" />
<div id="txt"></div>
</center>
<style>#img {height:100px ;width:150px;}
#txt:after {content: "滑鼠請移到上圖"}
#img:hover
兩個獨立 div , hover 後面要加
| <div id="div1">A</div> <div id="div2">B</div> | #div1:hover + #div2{ .css } 兩個獨立 div , hover 後面要加 + |
| <div id="div1">A <div id="div2">B </div> </div> | #div1:hover #div2{ .css } div1 內 div2 hover 後面無需加 + |
3/12/2018
CSS padding 內距屬性與用法範例 留白
CSS padding 內距屬性與用法範例 留白
我們從盒子模式那一頁看到，留白 (padding) 是在內容外，邊框內的部分。一個盒子有四個邊，所以我們可以對這四個邊的留白逐一設定：padding-top (上) padding-right (右) padding-bottom (下) padding-left (左)，
padding：[上面] [右邊] [下面] [左邊]，
padding：[上方與下方距離] [左方與右方距離]，
padding：[上方距離] [左方與右方距離] [下方距離]，
padding：[四個方位的距離]，
<div style="background-color: dodgerblue; padding: 10px; width: 50%;">
<div style="background-color: #ffd78c; height: auto; ">
<div style="background-color: #ffd78c; height: auto; ">
<p>本文</p>
</div>
</div>
<div style="background-color: dodgerblue; padding: 10px 20px 50px 100px; width: 50%;">
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: dodgerblue; padding: 10px 50px; width: 50%;">
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: dodgerblue; padding-top: 30px; width: 50%;">
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
<div style="background-color: #ffd78c; height: auto;">
<p>本文</p>
</div>
</div>
CSS padding 內距屬性與用法範例 留白
CSS padding 內距屬性與用法範例 留白
CSS padding: 留白 邊框內的部分。一個盒子有四個邊，
所以我們可以對這四個邊的留白逐一設定。
CSS : padding: [上] [右] [下] [左] padding: [上下] [左右]
padding: [上] [左右] [下] padding: [四個邊同樣値]
CSS padding 的四個邊獨立寫法 : padding-top ：與上個邊的距離
padding-right ：與右方個邊距離
padding-bottom：與下方個邊距離
padding-left ：與左個邊的距離
padding 可以的值有 auto、%、em、px、pt
| <style> </style> |
00
focus() 取得焦點 / blus() 焦點消失
focus() 取得焦點 / blus() 焦點消失 / onmouseover / onmouseout
CSS :focus /
blur focus 焦点選擇。
當一個元素失去焦點的時候 blur， 一個元素焦點所在為 focus。
blur() 函數， 方法用於把鍵盤焦點從該元素上移開。
focus () 函數， 方法用於把該元素就會獲得焦點。
onmouseover 事件是 JavaScript event 的一種，事件用來判斷滑鼠移至特定對象或網頁元素上，假設發生滑鼠移至安插 onmouseover 事件的元素上，將會觸發特定的 JavaScript 函式開始執行特定的工作，例如當滑鼠移至一張圖片img、文字、 DIV 區塊上，自動顯示對話視窗介紹圖片，或者是滑鼠移到某張網頁縮圖上，就自動顯示原始大圖，都是常見到的 onmouseover 事件應用方式，所有主流的瀏覽器都支援 onmouseover 事件。
onmouseout 事件是 JavaScript event 的一種，用來判斷當滑鼠游標移出某個對象或網頁元素，例如移開連結、移開 圖片 img、文字、 DIV 區塊 等，當有這樣的使用情況發生，onmouseout event 將會觸發特定的 JavaScript function 去執行特定的工作，與 onmouseout 相對應的 event 是 onmouseover event，當滑鼠移經某個網頁元素可以被 onmouseover 監聽到，移出元素則可被 onmouseout 監聽到。
onmousedown 事件是 JavaScript event 的一種，事件會發生在當按下滑鼠按鍵的時候，這裡指的按鍵不一定是滑鼠左鍵，而是滑鼠上的任何一個按鍵，通常可以安插在網頁的各種元素中，例如圖片 img、文字、 DIV 區塊、span 區域、段落、甚至是直接寫在 標籤內，用來判斷網友是否有用滑鼠點選某些特定的元素，進而觸發特定的 JavaScript function 去執行工作，所有主流的瀏覽器都支援 onmousedown 事件。
<style>
.Tinput:focus {background-color: yellow}
.Tinput {background-color: lime }
</style>
| <input class="Tinput" onmouseout="this.blur();this.value='⇦ blur'" onmouseover="this.focus();this.value='⇦ focus'" type="type" value="⇦ blur" /> | 滑鼠游標請移入輸入欄看看。 |
| <input class="Tinput" onmouseout="this.blur();this.value='⇦ blur'" onmouseover="this.focus();this.value='⇦ focus'" type="type" value="⇦ blur" /> | 滑鼠游標請移入輸入欄 onclick 。 |
| <input class="Tinput" id="FBinput" type="type" value="⇦ blur" /> <input type="button" value="focus" onclick="document.getElementById('FBinput').focus();document.getElementById('FBinput').value='focus'"> <input type="button" value="blur" onclick="document.getElementById('FBinput').blur();document.getElementById('FBinput').value='blur'"> |
focus() 取得焦點 / blus() 焦點消失
focus() 取得焦點 / blus() 焦點消失 / onmouseover / onmouseout
CSS :focus /
blur focus 焦点選擇。
當一個元素失去焦點的時候 blur， 一個元素焦點所在為 focus。
blur() 函數， 方法用於把鍵盤焦點從該元素上移開。
focus () 函數， 方法用於把該元素就會獲得焦點。
<input class="cla"
<input class="cla" id="FBinput" type="type" value="⇦ blur" />
<input type="button" onclick="FBin.focus() ;FBinput.value='focus'">
<input type="button" onclick="FBin.blur() ;FBinput.value='blur'">
123
<style>
.cla:focus {background-color: yellow}
.cla {background-color: lime }
</style>
onmouseover 事件是 JavaScript event 的一種，事件用來判斷滑鼠移至特定對象或網頁元素上，假設發生滑鼠移至安插 onmouseover 事件的元素上，將會觸發特定的 JavaScript 函式開始執行特定的工作，例如當滑鼠移至一張圖片img、文字、 DIV 區塊上，自動顯示對話視窗介紹圖片，或者是滑鼠移到某張網頁縮圖上，就自動顯示原始大圖，都是常見到的 onmouseover 事件應用方式，所有主流的瀏覽器都支援 onmouseover 事件。<input type="button" onclick="
<input type="button" onclick="
123
<style>
.cla:focus {background-color: yellow}
.cla {background-color: lime }
</style>
onmouseout 事件是 JavaScript event 的一種，用來判斷當滑鼠游標移出某個對象或網頁元素，例如移開連結、移開 圖片 img、文字、 DIV 區塊 等，當有這樣的使用情況發生，onmouseout event 將會觸發特定的 JavaScript function 去執行特定的工作，與 onmouseout 相對應的 event 是 onmouseover event，當滑鼠移經某個網頁元素可以被 onmouseover 監聽到，移出元素則可被 onmouseout 監聽到。
onmousedown 事件是 JavaScript event 的一種，事件會發生在當按下滑鼠按鍵的時候，這裡指的按鍵不一定是滑鼠左鍵，而是滑鼠上的任何一個按鍵，通常可以安插在網頁的各種元素中，例如圖片 img、文字、 DIV 區塊、span 區域、段落、甚至是直接寫在 標籤內，用來判斷網友是否有用滑鼠點選某些特定的元素，進而觸發特定的 JavaScript function 去執行工作，所有主流的瀏覽器都支援 onmousedown 事件。
3/09/2018
訂閱：
留言 (Atom)