Ocean 學習筆記

2012年9月6日星期四

HTML、CSS、JavaScript、Flash技法討論網站收集

日本 HTML4 & 5、CSS & CSS3、JavaScript 範例展示。

Jsdo.It

日本 Flash 範例展示。

wonderfl

2012年8月30日星期四

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Class Selectors</title>
<style type="text/css">
html{
background-color: #000000; /*背景色為黑色*/
}

/*elements selector,選取所有的DIV元素*/
div{
width: 50px; /*寬度*/
height: 50px; /*高度*/
line-height: 50px; /*讓文字垂直置中*/
text-align: center; /*讓DIV內部的文字水平置中*/
border: #808080; /*邊的顏色*/
border-style: solid;/*border為實線*/
border-width: 1px; /*border寬度*/
margin-bottom: 2px; /*margin下方寬度*/
color:white; /*文字的顏色*/
}

/**選取document裡所有有宣告class為top的元素*/
.top{
background-color:#1E646F;
}

.center{
background-color:#26681B;
}

.bottom{
background-color:#6F691E;
}

</style>
</head>
<body>
<div class="top">上</div>
<div class="center">中</div>
<div class="bottom">下</div>
</body>
</html>

結果：

DOM 上宣告多個Class ，並用CSS選取套用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Class Selectors</title>
<style type="text/css">
html{
background-color: #000000; /*背景色為黑色*/
}

/*elements selector,選取所有的DIV元素*/
div{
width: 100px; /*寬度*/
height: 100px; /*高度*/
line-height: 100px; /*可讓文字垂直置中*/
text-align: center; /*讓DIV內部的文字水平置中*/
border: #808080; /*邊的顏色*/
border-style: solid;/*border為實線*/
border-width: 1px; /*border寬度*/
margin-bottom: 2px; /*margin下方寬度*/
color:white;
}

.sky{
background-color:#25B3F7;
font-weight: bold;
}

.flowers{
background-color:#F72598;
font-style: italic;
}

/**選擇有宣告兩個class的DOM元素，套入以下屬性*/
.sky.flowers{
background-color:#AB25F7;
}

</style>
</head>
<body>
<div class="sky">空</div>
<div class="flowers">花海</div>

<div class="flowers sky ">Mix</div>
</body>
</html>

結果：

Note:在早於IE7的版本中，多類別選取會有問題，因此不建議使用多類別選取。

選擇具有class=article 屬性的span element。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Class Selectors</title>
<style type="text/css">
html{
background-color: #000000; /*背景色為黑色*/
color: OliveDrab; /**預設所有字體是橄欖綠*/
}

/**選擇有class為article的span元素，套用CSS屬性*/
span.article{
border: #808080;
border-style: dotted;
border-width: 1px;
color:DarkMagenta;
}
</style>
</head>
<body>
<p><span class="article">八陣圖杜甫</span></p>

<p class="article">功蓋三分國，名成八陣圖。</p>
<p class="article">江流石不轉，遺恨失吞吳。</p>
<div><p><span class="article">諸葛孔明石兵八陣</span></p></div>
</body>
</html>

結果：

CSS Grouping Selectors

CSS 群組選擇

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Grouping Selectors</title>
<style type="text/css">
h1{
background-color:black; /**背景色*/
}

/**Group selector*/
h1 , p{
color:gray; /**文字內容顏色*/
}
</style>
</head>
<body>
<h1>CSS</h1>
<p>層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），又稱串樣式列表，由W3C定義和維護的標準，
一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言。
目前最新版本是CSS2.1，為W3C的候選推薦標準。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發過程中。</p>
<span>上段文字引用自維基百科</span>
</body>
</html>

運作結果：

CSS 學習資源收集

Box Model文章：

em單位文章：

em計算機
飛肯設計學院 CSS 文字大小 em 和 px 的單位換算比較表

CSS2 & CSS3 X11Colors：

2012年8月29日星期三

JavaScript特性測試(二) switch

JavaScript特性測試(二)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function(){

var values = [ , undefined, 'undefined', 0, '0', false, 'false', '', new String(), null];
var texts = ['', 'undefined', "'undefined'" , '0' , "'0'" , 'false' , "'false'" , "''" , 'new String()' , 'null']

for(var i=0 , length=values.length; i < length ; i++){
switch( values[i] ){
case undefined:
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case undefined:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case 'undefined':
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case 'undefined':」 , 結果是:「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case 0:
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case 0:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case '0':
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case '0':」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case false:
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case false:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case 'false':
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case 'false':」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case '':
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case '':」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case new String():
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case new String():」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case values[8]:
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case values[8]:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case null:
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case null:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};
}
//由輸出結果可以知道switch使用了===來做比對
//在實務上要注意，input 取得的value 會是字串型式，若你在前端有宣告狀態數值(0 ,1 ,2 , 3),若你在switch上使用就要注意 '0'與0是不同的東西。
}
</script>
</head>
<body>
values = [ , undefined , 'undefined' , 0 , '0' , false , 'false' , '' , new String() , null];
<br>
</body>
</html>

結果:

values = [ , undefined , 'undefined' , 0 , '0' , false , 'false' , '' , new String() , null];
數值是:「」 , 比對是:「case undefined:」 , 結果是 :「is Run」
數值是:「undefined」 , 比對是:「case undefined:」 , 結果是 :「is Run」
數值是:「'undefined'」 , 比對是:「case 'undefined':」 , 結果是:「is Run」
數值是:「0」 , 比對是:「case 0:」 , 結果是 :「is Run」
數值是:「'0'」 , 比對是:「case '0':」 , 結果是 :「is Run」
數值是:「false」 , 比對是:「case false:」 , 結果是 :「is Run」
數值是:「'false'」 , 比對是:「case 'false':」 , 結果是 :「is Run」
數值是:「''」 , 比對是:「case '':」 , 結果是 :「is Run」
數值是:「new String()」 , 比對是:「case values[8]:」 , 結果是 :「is Run」
數值是:「null」 , 比對是:「case null:」 , 結果是 :「is Run」

訂閱：文章 (Atom)

Ocean 學習筆記

2012年9月6日星期四

HTML、CSS、JavaScript、Flash技法討論網站收集

互動設計與視覺設計網站收集

2012年8月30日星期四

CSS Class Selectors

CSS Grouping Selectors

CSS 學習資源收集

2012年8月29日星期三

JavaScript特性測試(二) switch

常拜讀的Blog

關於我自己

2012年9月6日 星期四

HTML、CSS、JavaScript、Flash技法討論網站收集

互動設計與視覺設計網站收集

2012年8月30日 星期四

CSS Class Selectors

CSS Grouping Selectors

CSS 學習資源收集

2012年8月29日 星期三

JavaScript特性測試(二) switch

2012年9月6日星期四

2012年8月30日星期四

2012年8月29日星期三