color code

color code

color code

color code

#color code#color

iframe youtube

iframe youtube

playlist=XXXXXXX; loop=1 重複播放。
autoplay=1 自動播放。
rel=0 不顯影片完結推廣。
controls=0 不顯示播放器控制選項。
showinfo=0 不顯示影片標題及播放器操作選項。
mute=1  影片當背景，並靜音。

<iframe id="ifsrc"  width="800" height="500" src="
https://www.youtube.com/embed/mtmctzyCdNk?autoplay=1;playlist=mtmctzyCdNk;loop=1;rel=1;controls=0;showinfo=0;" ></iframe >

<table border="1"> <table border="1"><tbody><tr><td style="padding:20px"><label id="autoplay" class="container">自動播放 <input type="checkbox" onclick="ifautoplay(this)" > <span class="checkmark"></span></label><label class="container">重複播放 <input type="checkbox" onclick="ifloop(this)"> <span class="checkmark"></span></label><label class="container">完結推廣 <input type="checkbox" onclick="ifrel(this)"> <span class="checkmark"></span></label><label class="container">播放器控制選項 <input type="checkbox" onclick="ifcontrols(this)"> <span class="checkmark"></span></label><label class="container">顯示標題操作選項。 <input type="checkbox" onclick="ifshowinfo(this)"> <span class="checkmark"></span></label> </td><td><iframe id="ifsrc" width="800" height="500" src=" "></iframe></td></tr><tr><td colspan="2"><div id="srcDP" style="font-size: 22px;"></div></td></tr></tbody></table><style>.container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; } .container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: gray ; } .container:hover input ~ .checkmark { background-color: magenta;} .container:hover { color: magenta;} .container input:checked ~ .checkmark { background-color: #2196F3;} .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} </style> <script type="text/javascript"> var ifData1 = "https://www.youtube.com/embed/A0_6GYztIM0?" var ifData2 = "autoplay=0;" var ifData3 = "" var ifData4 = "rel=0;" var ifData5 = "controls=0;" var ifData6 = "showinfo=0;" function idsrc(){ var fsrc = ifData1 + ifData2 + ifData3 + ifData4 + ifData5 + ifData6 ; document.getElementById('ifsrc').src= fsrc ; document.getElementById('srcDP').innerHTML = fsrc ; } idsrc(); function ifautoplay(x){ if(x.checked){ifData2 = "autoplay=1;"} else{ifData2 = "autoplay=0;"} idsrc(); } function ifloop(x){ if(x.checked){ifData3 = "playlist=mtmctzyCdNk;loop=1;"; } else{ifData3 = ""; } idsrc(); } function ifrel(x){ if(x.checked){ifData4 = "rel=1;" } else{ifData4 = "rel=0;"; } idsrc(); } function ifcontrols(x){ if(x.checked){ifData5 = "controls=1;" } else{ifData5 = "controls=0;"; } idsrc(); } function ifshowinfo(x){ if(x.checked){ifData6 = "showinfo=1;" } else{ifData6 = "showinfo=0;"; } idsrc(); } idsrc(); </script>

00

CSS float 浮動

CSS float 浮動

<div id="Mnul123456" style="height:500px;width:90%;"><img style="display: none;" src="i" onerror="MmDd(this,1)" ><div class="Mn" onclick="MmDd(this,1)">float left</div><div class="Mn" onclick="MmDd(this,2)">float right</div><div class="Mn" onclick="MmDd(this,3)">float left</div><div class="Mn" onclick="MmDd(this,4)">float right</div> <div class="Dd"><div style="background-color: #ffd382; float: left; height: 60px; text-align: center; width: 200px;">1 div 顯示</div><div style="background-color: #82ff82; float: left; height: 60px; text-align: center; width: 200px;">2 div 顯示</div> <br><br><br>1 div {background-color: #ffd382; <span style="color: red;">float: left</span>; height: 60px; text-align: center; width: 200px;} <br />2 div {background-color: #82ff82; <span style="color: red;">float: left</span>; height: 60px; text-align: center; width: 200px;} </div> <div class="Dd"><div style="background-color: #ffd382; float: right; height: 60px; text-align: center; width: 200px;">1 div 顯示</div><div style="background-color: #82ff82; float: right; height: 60px; text-align: center; width: 200px;">2 div 顯示</div> <br><br><br>1 div {background-color: #ffd382; <span style="color: red;">float: height</span>; height: 60px; text-align: center; width: 200px;} <br />2 div {background-color: #82ff82; <span style="color: red;">float: height</span>; height: 60px; text-align: center; width: 200px;} </div><!-------------------------------------------------------------------------------------------><div class="Dd">起初，神創造天地。 地是空虛混沌，淵面黑暗；神的靈運行在水面上。 神說：要有光，就有了光。 神看光是好的，就把光暗分開了。 神稱光為晝，稱暗為夜。有晚上，有早晨，這是頭一日。 神說：諸水之間要有空氣，將水分為上下。 神就造出空氣，將空氣以下的水、空氣以上的水分開了。事就這樣成了。 神稱空氣為天。有晚上，有早晨，是第二日。 神說：天下的水要聚在一處，使旱地露出來。事就這樣成了。 神稱旱地為地，稱水的聚處為海。神看著是好的。 神說：地要發生青草和結種子的菜蔬，並結果子的樹木，各從其類，果子都包著核。事就這樣成了。 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1B1-8DyeNgS2Le0DMpcqtEXO7ZI0dszFhkdbK1_w_SUFYB1N212MQXegwilNKhnkxbQOCjU9jSnyMJhKlKeBFm-BWOXfrI99Z87O5IZD_OBnP5VqN7cK5IQAGQ_5wFDtCA8kH4D3f6Pu/s1024/ck20180728.jpg" style="float: left; margin: 10px;" width="200"> 於是地發生了青草和結種子的菜蔬，各從其類；並結果子的樹木，各從其類；果子都包著核。神看著是好的。 有晚上，有早晨，是第三日。 神說：天上要有光體，可以分晝夜，作記號，定節令、日子、年歲， 並要發光在天空，普照在地上。事就這樣成了。 於是神造了兩個大光，大的管晝，小的管夜，又造眾星， 就把這些光擺列在天空，普照在地上， 管理晝夜，分別明暗。神看著是好的。 有晚上，有早晨，是第四日。 神說：水要多多滋生有生命的物；要有雀鳥飛在地面以上，天空之中。 神就造出大魚和水中所滋生各樣有生命的動物，各從其類；又造出各樣飛鳥，各從其類。神看著是好的。 神就賜福給這一切，說：滋生繁多，充滿海中的水；雀鳥也要多生在地上。 有晚上，有早晨，是第五日。 神說：地要生出活物來，各從其類；牲畜、昆蟲、野獸，各從其類。事就這樣成了。 於是神造出野獸，各從其類；牲畜，各從其類；地上一切昆蟲，各從其類。神看著是好的。 神說：我們要照著我們的形像、按著我們的樣式造人，使他們管理海裡的魚、空中的鳥、地上的牲畜，和全地，並地上所爬的一切昆蟲。 神就照著自己的形像造人，乃是照著他的形像造男造女。 神就賜福給他們，又對他們說：要生養眾多，遍滿地面，治理這地，也要管理海裡的魚、空中的鳥，和地上各樣行動的活物。 <p>....... img style="float: left; margin: 10px; width:200" ......</p></div><!-------------------------------------------------------------------------------------------><div class="Dd">起初，神創造天地。 地是空虛混沌，淵面黑暗；神的靈運行在水面上。 神說：要有光，就有了光。 神看光是好的，就把光暗分開了。 神稱光為晝，稱暗為夜。有晚上，有早晨，這是頭一日。 神說：諸水之間要有空氣，將水分為上下。 神就造出空氣，將空氣以下的水、空氣以上的水分開了。事就這樣成了。 神稱空氣為天。有晚上，有早晨，是第二日。 神說：天下的水要聚在一處，使旱地露出來。事就這樣成了。 神稱旱地為地，稱水的聚處為海。神看著是好的。 神說：地要發生青草和結種子的菜蔬，並結果子的樹木，各從其類，果子都包著核。事就這樣成了。 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1B1-8DyeNgS2Le0DMpcqtEXO7ZI0dszFhkdbK1_w_SUFYB1N212MQXegwilNKhnkxbQOCjU9jSnyMJhKlKeBFm-BWOXfrI99Z87O5IZD_OBnP5VqN7cK5IQAGQ_5wFDtCA8kH4D3f6Pu/s1024/ck20180728.jpg" style="float: right; margin: 10px;" width="200"> 於是地發生了青草和結種子的菜蔬，各從其類；並結果子的樹木，各從其類；果子都包著核。神看著是好的。 有晚上，有早晨，是第三日。 神說：天上要有光體，可以分晝夜，作記號，定節令、日子、年歲， 並要發光在天空，普照在地上。事就這樣成了。 於是神造了兩個大光，大的管晝，小的管夜，又造眾星， 就把這些光擺列在天空，普照在地上， 管理晝夜，分別明暗。神看著是好的。 有晚上，有早晨，是第四日。 神說：水要多多滋生有生命的物；要有雀鳥飛在地面以上，天空之中。 神就造出大魚和水中所滋生各樣有生命的動物，各從其類；又造出各樣飛鳥，各從其類。神看著是好的。 神就賜福給這一切，說：滋生繁多，充滿海中的水；雀鳥也要多生在地上。 有晚上，有早晨，是第五日。 神說：地要生出活物來，各從其類；牲畜、昆蟲、野獸，各從其類。事就這樣成了。 於是神造出野獸，各從其類；牲畜，各從其類；地上一切昆蟲，各從其類。神看著是好的。 神說：我們要照著我們的形像、按著我們的樣式造人，使他們管理海裡的魚、空中的鳥、地上的牲畜，和全地，並地上所爬的一切昆蟲。 神就照著自己的形像造人，乃是照著他的形像造男造女。 神就賜福給他們，又對他們說：要生養眾多，遍滿地面，治理這地，也要管理海裡的魚、空中的鳥，和地上各樣行動的活物。 <p>....... img style="float: right; margin: 10px; width:200" ......</p></div></div> <style>.Mn { display:inline-block; height:30px; padding: 0px 8px; border: 1px solid black;background-color: silver ;border-style: solid solid hidden solid; cursor:pointer;border-radius:10px 5px 0px 0px;font-size: 22px;} .Dd {height: inherit; width: inherit;border: 1px solid black;margin-top:-0px;background-color:linen ;display:none;padding:3px;font-size: 22px; } </style> <script type="text/javascript"> function MmDd(x,i){ var xx = document.getElementById(x.parentElement.id); var length =xx.children.length-1; var ii = 1; for (ii ; ii< length/2+1 ; ii++){ xx.children[ii].style.backgroundColor = "silver"; xx.children[ii+length /2].style.display = "none"; } xx.children[i].style.backgroundColor = "linen "; xx.children[i+length /2].style.display = "block"; //alert(length ) } </script>

00

CSS float 浮動

CSS float 浮動

將文字繞著一個圖案顯現。這是用 float (浮動) 這個屬性來達成的。
float:left  /  float:right  /  clear:left  /  clear:right; 

float:left

float:right

xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx xxxxx xxxxx xxxx xxxxx

auto-resize a img fit into div

auto-resize a img fit into div

<div id="id15424" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rdVOlBt_DUe5LHJNACgcYDXSJ6sri5zj9yk8CzvL2YuXes7uRKe-vu-xIsKLLiyqD4vvJbQKAv5m4tcWhiJRWtOQD6b6KpVG7c5w5tu_s2DHMs_0XQ04E4jQ5fInFp0ENG1w3gJmNLaw/s320/20190213_Jenny_60age_015.jpg" width="auto" height="aoto" /></div> <style type="text/css">#id15424{ position: relative; width:100%; height:100%; background-color: #888;} #id15424 img{border: 10px solid white; max-height: 80%; max-width: 80%; position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; } </style>

00

div background

DIV 內置入 jpg 圖片

底圖就會依照 DIV 區塊的大小，等比縮放到區塊中。
用 CCS background-image: center，background-repeat: no-repeat 完成。

<style type="text/css">
.a17524{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1B1-8DyeNgS2Le0DMpcqtEXO7ZI0dszFhkdbK1_w_SUFYB1N212MQXegwilNKhnkxbQOCjU9jSnyMJhKlKeBFm-BWOXfrI99Z87O5IZD_OBnP5VqN7cK5IQAGQ_5wFDtCA8kH4D3f6Pu/s1024/ck20180728.jpg");
-moz-background-size: contain;     /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain;         /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center;         /*置中*/
background-repeat: no-repeat;     /*背景圖案不重複*/
border:2px solid #000000;            /*邊框樣式與顏色*/
background-color:#CCCCCC;      /*背景的顏色*/
color: fuchsia ;
font-size: 20px ;
}
</style>


範例的效果 :

<div class="a17524" style="height: 150px; width: 400px;">

<div class="a17524" style="height: 320px; width: 600px;">

<textarea class="a17524" style="height: 320px; width: 600px;"></textarea>

toggle() 切換顯示或是隱藏

toggle() 切換顯示或是隱藏

toggle() 是jQuery中基本的動畫函數，使用自定義效果來顯示或隱藏匹配的元素。
$("#id").toggle( effect , options , duration , complete )，
如下 : $("#myimg").toggle(effectType, 1000,function() { } ); ;
effect String 一个字符串，指示要使用哪一种特效 。
options Object 特效具体的设置和 easing 。
duration Number 或 String 一个字符串或一个数字，指定动画将运行多久。
complete Function() 一旦动画完成时要调用的函数。

<center><div id="buttom_id"><input type="button" class="Bittom"value="blind" /><input type="button" class="Bittom" value="bounce" /><input type="button" class="Bittom" value="clip" /><input type="button" class="Bittom" value="drop" /><input type="button" class="Bittom" value="explode" /><input type="button" class="Bittom" value="fold" /><br /><input type="button" class="Bittom" value="highlight" /><input type="button" class="Bittom" value="puff" /><input type="button" class="Bittom" value="pulsate" /><input type="button" class="Bittom" value="scale" /><input type="button" class="Bittom" value="shake" /><input type="button" class="Bittom" value="size"><input type="button" class="Bittom" value="slide" /><br /><img id="myimg" width="40%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1B1-8DyeNgS2Le0DMpcqtEXO7ZI0dszFhkdbK1_w_SUFYB1N212MQXegwilNKhnkxbQOCjU9jSnyMJhKlKeBFm-BWOXfrI99Z87O5IZD_OBnP5VqN7cK5IQAGQ_5wFDtCA8kH4D3f6Pu/s1024/ck20180728.jpg" /></center></div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript"> $("#buttom_id input").click (function () { var effectType = $(this).val(); $("#buttom_id").toggle(effectType, 500); window.setTimeout( function() { $("#buttom_id").toggle(effectType, 500); }, 1000 ); }); </script>

00

<style>#Mm {font-size: 20px ;width:100%;color: black ;background-color:linen ;text-align: center;vertical-align: middle;border: 1px solid black;cursor:pointer; } #Dd{font-size: 20px ;width:98%;color: black ;background-color:linen ;border: 1px solid black;display: none;padding:5px; } </style> <div id="Mm">閱讀更多....</div><div id="Dd">羅6:4-6 所以我們藉著洗禮歸入死、和他一同埋葬．原是叫我們一舉一動有新生的樣式、像基督藉著父的榮耀、從死裏復活一樣。6:5 我們若在他死的形狀上與他聯合、也要在他復活的形狀上與他聯合．6:6 因為知道我們的舊人、和他同釘十字架、使罪身滅絕、叫我們不再作罪的奴僕。</div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script type="text/javascript"> $("#Mm").click(function(){ $("#Dd").toggle(500); }); </script>

00

toggle() 切換顯示或是隱藏

toggle() 切換顯示或是隱藏

toggle() 是jQuery中基本的動畫函數，使用自定義效果來顯示或隱藏匹配的元素。
$("#id").toggle( effect , options , duration , complete )，
如下 : $("#myimg").toggle(effectType, 1000,function() { } ); ;
effect String 一个字符串，指示要使用哪一种特效 。
options Object 特效具体的设置和 easing 。
duration Number 或 String 一个字符串或一个数字，指定动画将运行多久。
complete Function() 一旦动画完成时要调用的函数。

<center><div id="buttom_id"><input type="button" class="Bittom"value="blind" /><input type="button" class="Bittom" value="bounce" /><input type="button" class="Bittom" value="clip" /><input type="button" class="Bittom" value="drop" /><input type="button" class="Bittom" value="explode" /><input type="button" class="Bittom" value="fold" /><br /><input type="button" class="Bittom" value="highlight" /><input type="button" class="Bittom" value="puff" /><input type="button" class="Bittom" value="pulsate" /><input type="button" class="Bittom" value="scale" /><input type="button" class="Bittom" value="shake" /><input type="button" class="Bittom" value="size"><input type="button" class="Bittom" value="slide" /><br /><img id="myimg" width="40%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1B1-8DyeNgS2Le0DMpcqtEXO7ZI0dszFhkdbK1_w_SUFYB1N212MQXegwilNKhnkxbQOCjU9jSnyMJhKlKeBFm-BWOXfrI99Z87O5IZD_OBnP5VqN7cK5IQAGQ_5wFDtCA8kH4D3f6Pu/s1024/ck20180728.jpg" /></center></div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript"> $("#buttom_id input").click (function () { var effectType = $(this).val(); $("#buttom_id").toggle(effectType, 500); window.setTimeout( function() { $("#buttom_id").toggle(effectType, 500); }, 1000 ); }); </script>

00

<style>#Mm {font-size: 20px ;width:100%;color: black ;background-color:linen ;text-align: center;vertical-align: middle;border: 1px solid black;cursor:pointer; } #Dd{font-size: 20px ;width:98%;color: black ;background-color:linen ;border: 1px solid black;display: none;padding:5px; } </style> <div id="Mm">閱讀更多....</div><div id="Dd">羅6:4-6 所以我們藉著洗禮歸入死、和他一同埋葬．原是叫我們一舉一動有新生的樣式、像基督藉著父的榮耀、從死裏復活一樣。6:5 我們若在他死的形狀上與他聯合、也要在他復活的形狀上與他聯合．6:6 因為知道我們的舊人、和他同釘十字架、使罪身滅絕、叫我們不再作罪的奴僕。</div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script type="text/javascript"> $("#Mm").click(function(){ $("#Dd").toggle(500); }); </script>

00

CSS font-size

CSS font text 字形 字串 字樣 文字

<style>.fontM {background-color:steelblue;width:100%;text-align: center;color:white} #Sizebutton td {vertical-align:top;font-size:22px;font-style:none;font-weight:none;padding: 5px 5px;} .radioLABEL { display: block; position: relative; padding-left: 22px; margin-bottom: 5px; cursor: pointer; font-size: 18px; } .radioLABEL input { position: absolute; opacity: 0; cursor: pointer; } .radioSPAN { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: silver ; border-radius: 50%; } .radioLABEL:hover input ~ .radioSPAN { background-color: gray; } .radioLABEL input:checked ~ .radioSPAN { background-color: #2196F3; } .radioSPAN:after { content: ""; position: absolute; display: none; } .radioLABEL input:checked ~ .radioSPAN:after { display: block; } .radioLABEL .radioSPAN:after { top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: white; } .boxlabel{ display: block; position: relative; padding-left: 22px; margin-bottom: 12px; cursor: pointer; font-size: 18px; } .boxlabel input { position: absolute; opacity: 0; cursor: pointer; } .boxapan { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: silver; } .boxlabel:hover input ~ .boxapan { background-color: gray;} .boxlabel input:checked ~ .boxapan { background-color: #2196F3;} .boxapan:after { content: ""; position: absolute; display: none; } .boxlabel input:checked ~ .boxapan:after { display: block; } .boxlabel .boxapan:after { left: 6px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} </style> <div id="Sizebutton"><table border="1" rules="all" width="100%"><tr height="30%"><td width="200px" rowspan="3" ><!-------------------------111------------------------------------><div class="fontM">font-size</div> <label class="radioLABEL">20px <input type="radio" name="radio" value="20px" checked="checked" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" >30px <input type="radio" name="radio" value="30px" onclick="fontSize(this)" > <span class="radioSPAN"></span> </label> <label class="radioLABEL">xx-small <input type="radio" name="radio" value="xx-small" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">x-small <input type="radio" name="radio" value="x-small" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">small <input type="radio" name="radio" value="small" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">medium <input type="radio" name="radio" value="medium" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">large <input type="radio" name="radio" value="large" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">x-large <input type="radio" name="radio" value="x-large" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">xx-large <input type="radio" name="radio" value="xx-large" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">smaller <input type="radio" name="radio" value="smaller" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">larger <input type="radio" name="radio" value="larger" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">50% <input type="radio" name="radio" value="50%" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">200% <input type="radio" name="radio" value="200%" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label><label class="radioLABEL">1em <input type="radio" name="radio" value="1em" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label><label class="radioLABEL">0.5em <input type="radio" name="radio" value="0.5em" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">inherit <input type="radio" name="radio" value="inherit" onclick="fontSize(this)"> <span class="radioSPAN"></span> </label><!------------------------------222-------------------------------------------><div class="fontM">textDecoration</div> <label class="radioLABEL">none <input type="radio" name="radioline" value="none" checked="checked" onclick="fontLine(this) checked="checked" /> <span class="radioSPAN"></span> </label> <label class="radioLABEL">overline <input type="radio" name="radioline" value="overline" onclick="textDecoration(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">underline <input type="radio" name="radioline" value="underline" onclick="textDecoration(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">line-through <input type="radio" name="radioline" value="line-through" onclick="textDecoration(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">inherit <input type="radio" name="radioline" value="inherit" onclick="textDecoration(this)"> <span class="radioSPAN"></span> </label><!--------------------------------333-----------------------------------------><div class="fontM">Line Height</div> <label class="radioLABEL">inherit <input type="radio" name="lineHeight" value="inherit" checked="checked" onclick="lineHeight(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">20px <input type="radio" name="lineHeight" value="20px" onclick="lineHeight(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">40px <input type="radio" name="lineHeight" value="40px" onclick="lineHeight(this)"> <span class="radioSPAN"></span> </label><!-------------------------444-------555--------------------------------------> <div class="fontM">italic / bold</div> <label class="boxlabel">italic <input type="checkbox" value="italic" onclick="fontItalic(this)"> <span class="boxapan"></span> </label> <label class="boxlabel">bold <input type="checkbox" value="bold" onclick="fontBold(this)"> <span class="boxapan"></span> </label></td><!-----------------------------------------------><!-------------------6666----------------------------><td width="200px" rowspan="3"><div class="fontM">text-transform</div> <label class="radioLABEL">inherit <input type="radio" name="radioCASE" value="inherit" checked="checked" onclick="textTransform(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">capitalize <input type="radio" name="radioCASE" value="capitalize" onclick="textTransform(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">lowercase <input type="radio" name="radioCASE" value="lowercase" onclick="textTransform(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">capitalize <input type="radio" name="radioCASE" value="capitalize" onclick="textTransform(this)"> <span class="radioSPAN"></span> </label><!-----------------------777--------------------------------------><div class="fontM">wordSpacing</div> <label class="radioLABEL">normal <input type="radio" name="fontword" value="normal" checked="checked" onclick="wordSpacing(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">20px <input type="radio" name="fontword" value="20px" onclick="wordSpacing(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL">30px <input type="radio" name="fontword" value="30px" onclick="wordSpacing(this)"> <span class="radioSPAN"></span> </label><!----------------------------------------------------------------><div class="fontM">Color</div> <label class="radioLABEL" style="background-color:black;color:white" >black <input type="radio" name="fontCOLOR" value="black" checked="checked" onclick="fontCOLOR(this)" > <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:blue;color:white" >blue <input type="radio" name="fontCOLOR" value="blue" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:purple;color:white" >purple <input type="radio" name="fontCOLOR" value="purple" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:red;color:white" >red <input type="radio" name="fontCOLOR" value="red" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:fuchsia;color:white" >fuchsia <input type="radio" name="fontCOLOR" value="fuchsia" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:maroon;color:white" >maroon <input type="radio" name="fontCOLOR" value="maroon" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:steelblue;color:white" >steelblue <input type="radio" name="fontCOLOR" value="steelblue" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="background-color:orange;color:white" >orange <input type="radio" name="fontCOLOR" value="orange" onclick="fontCOLOR(this)"> <span class="radioSPAN"></span> </label><!--------------------------------------------------------------------------------><div class="fontM">fontFamily</div> <label class="radioLABEL" style="font-family:serif" >serif <input type="radio" name="fontFamily " value="serif" checked="checked" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Calibri" >Calibri <input type="radio" name="fontFamily " value="Calibri" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Courier" >Courier <input type="radio" name="fontFamily " value="Courier" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Fantasy" >Fantasy <input type="radio" name="fontFamily " value="Fantasy" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Comic Sans" >Comic Sans <input type="radio" name="fontFamily " value="'Comic Sans MS', 'comic sans'" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Cursive" >Cursive <input type="radio" name="fontFamily " value="Cursive" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:標楷體,DFKai-sb,BiauKai,'AR PL UKai TW'" >標楷體字型 <input type="radio" name="fontFamily " value="標楷體,DFKai-sb,BiauKai,'AR PL UKai TW'" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:新細明體,'AR PL UMing TW'" >新細明體字型 <input type="radio" name="fontFamily " value="新細明體,'AR PL UMing TW'" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label> <label class="radioLABEL" style="font-family:Microsoft JhengHei" >微軟正黑體 <input type="radio" name="fontFamily " value="Microsoft JhengHei" onclick="fontFamily (this)"> <span class="radioSPAN"></span> </label></td><td colspan="2" style="text-align: center;vertical-align:miDdomle;height:300px;text-align: center; vertical-align:middle"><div id="demoDIV" style="font-size:20px;text-decoration:inherit;color:black;font-weight:inherit; font-style:inherit;line-height:inherit;text-transform: none;word-spacing: normal;font-family:serif">123 456 790<br>ABCD EFGH IJKL MNOP QRST UVWXYZ<br>abcd efgh ijkl mnop qrst uvwxyz<br>中國 香港 CSS font 字形 字串 字樣 文字 </div></tr><tr><td><div id="Dcss1">1</div><div id="Dcss2">2</div><div id="Dcss3">3</div><div id="Dcss4">4</div><div id="Dcss5">5</div><div id="Dcss6">6</div><div id="Dcss7">7</div><div id="Dcss8">8</div><div id="Dcss9">9</div></td></tr></tr><tr><td>var x = document.getElementById(id); <div id="Ddom1">1</div><div id="Ddom2">2</div><div id="Ddom3">3</div><div id="Ddom4">4</div><div id="Ddom5">5</div><div id="Ddom6">6</div><div id="Ddom7">7</div><div id="Ddom8">8</div><div id="Ddom9">9</div> </td></tr></tbody></table></div> <script>var fontX = document.getElementById("demoDIV"); function fontSize(x){ fontX.style.fontSize = x.value; changeCSS() ; Dcss1.style.fontWeight="bold" Dcss1.style.color="blue"; Ddom1.style.fontWeight="bold" Ddom1.style.color="blue";} function textDecoration(x){ fontX.style.textDecoration = x.value; changeCSS() ; Dcss2.style.fontWeight="bold" Dcss2.style.color="blue"; Ddom2.style.fontWeight="bold" Ddom2.style.color="blue";} function lineHeight(x){ fontX.style.lineHeight = x.value; changeCSS() ; Dcss3.style.fontWeight="bold" Dcss3.style.color="blue"; Ddom3.style.fontWeight="bold" Ddom3.style.color="blue";} fontItalic function fontItalic(x){ if(x.checked ){fontX.style.fontStyle = x.value; } else {fontX.style.fontStyle = "inherit";} changeCSS(); Dcss4.style.fontWeight="bold" Dcss4.style.color="blue"; Ddom4.style.fontWeight="bold" Ddom4.style.color="blue"; } function fontBold(x){ if(x.checked ){fontX.style.fontWeight = x.value;} else {fontX.style.fontWeight = "inherit";} changeCSS(); Dcss5.style.fontWeight="bold" Dcss5.style.color="blue"; Ddom5.style.fontWeight="bold" Ddom5.style.color="blue"; } function textTransform(x){ fontX.style.textTransform = x.value; changeCSS() ; Dcss6.style.fontWeight="bold" Dcss6.style.color="blue"; Ddom6.style.fontWeight="bold" Ddom6.style.color="blue";} function wordSpacing(x){ fontX.style.wordSpacing = x.value; changeCSS() ; Dcss7.style.fontWeight="bold" Dcss7.style.color="blue"; Ddom7.style.fontWeight="bold" Ddom7.style.color="blue";} function fontCOLOR(x){ fontX.style.color = x.value; changeCSS() ; Dcss8.style.fontWeight="bold" Dcss8.style.color="blue"; Ddom8.style.fontWeight="bold" Ddom8.style.color="blue";} function fontFamily(x){ fontX.style.fontFamily = x.value; changeCSS() ; Dcss9.style.fontWeight="bold" Dcss9.style.color="blue"; Ddom9.style.fontWeight="bold" Ddom9.style.color="blue";} /* ------------------------------------------- */ function changeCSS(){ var x = document.getElementById("demoDIV") ; Dcss1.style.fontWeight="inherit" Dcss2.style.fontWeight="inherit" Dcss3.style.fontWeight="inherit" Dcss4.style.fontWeight="inherit" Dcss5.style.fontWeight="inherit" Dcss6.style.fontWeight="inherit" Dcss7.style.fontWeight="inherit" Dcss8.style.fontWeight="inherit" Dcss9.style.fontWeight="inherit" Dcss1.style.color="black"; Dcss2.style.color="black"; Dcss3.style.color="black"; Dcss4.style.color="black"; Dcss5.style.color="black"; Dcss6.style.color="black"; Dcss7.style.color="black"; Dcss8.style.color="black"; Dcss9.style.color="black"; Ddom1.style.fontWeight="inherit" Ddom2.style.fontWeight="inherit" Ddom3.style.fontWeight="inherit" Ddom4.style.fontWeight="inherit" Ddom5.style.fontWeight="inherit" Ddom6.style.fontWeight="inherit" Ddom7.style.fontWeight="inherit" Ddom8.style.fontWeight="inherit" Ddom9.style.fontWeight="inherit" Ddom1.style.color="black"; Ddom2.style.color="black"; Ddom3.style.color="black"; Ddom4.style.color="black"; Ddom5.style.color="black"; Ddom6.style.color="black"; Ddom7.style.color="black"; Ddom8.style.color="black"; Ddom9.style.color="black"; Dcss1.innerHTML="div { font-size: " + x.style.fontSize + " ;" ; Dcss2.innerHTML=" text-decoration : " + x.style.textDecoration+ " ;" ; Dcss3.innerHTML=" line-height : " + x.style.lineHeight + " ;"; Dcss4.innerHTML=" font-style : " + x.style.fontStyle + " ;" ; Dcss5.innerHTML=" font-weight : " + x.style.fontWeight + " ;" ; Dcss6.innerHTML=" text-transform : " + x.style.textTransform + " ; " ; Dcss7.innerHTML=" wordSpacing : " + x.style.wordSpacing + " ; " ; Dcss8.innerHTML=" color : " + x.style.color+ " ;" ; Dcss9.innerHTML=" font-family: " + x.style.fontFamily + " ; }" ; Ddom1.innerHTML='x.style.fontSize = "' + x.style.fontSize + '"' ; Ddom2.innerHTML='x.style.textDecoration = "' + x.style.textDecoration + '"'; Ddom3.innerHTML='x.style.fontStyle = "' + x.style.lineHeight + '"'; Ddom4.innerHTML='x.style.fontStyle = "' + x.style.fontStyle + '"'; Ddom5.innerHTML='x.style.fontWeight = "' + x.style.fontWeight + '"'; Ddom6.innerHTML='x.style.textTransform = "' + x.style.textTransform + '"'; Ddom7.innerHTML='x.style.word-spacing= "' + x.style.wordSpacing + '"'; Ddom8.innerHTML='x.style.color= "' + x.style.color + '"'; Ddom9.innerHTML='x.style.fontFamily = "' + x.style.fontFamily + '"'; } changeCSS(); </script><!------------------------------------OUT---------------------------->

00