✍ 📁 🙈 🙉 🙊

2018年8月6日星期一

HTML ul li 項目標籤

HTML <ul> <ol> <li> <dl> <dt> <dd> 項目標籤

HTML <ul> <li> 標籤用來定義一個無排序的項目清單列表。

<table border="1" style="font-size:22px;width:100%"><tbody><tr><td > <ul class="square">    <li><r2>ul { list-style-type: square }</r2></li>    <li>免費 網頁設計方案 </li>    <li>Blogger HTML 技巧 </li></ul></td><td><ul class="circle">       <li><r2>ul { list-style-type: circle }</r2></li>    <li>馬上創建你的網站</li>    <li>網頁設計方案 </li></ul></td></tr><tr><td><ul class="disc">    <li><r2>ul { list-style-type: disc }</r2></li>    <li>網頁設計增值服務</li>    <li>提供網頁設計服務</li></ul>   </td><td> <ul class="upper-roman">    <li><r2>ul { list-style-type: upper-roman }</r2></li>    <li>免費 網頁設計方案 </li>    <li>Blogger HTML 技巧 </li></ul>      </td></tr><tr><td> <ul class="lower-roman" >    <li><r2>ul { list-style-type: lower-roman }</r2></li>    <li>馬上創建你的網站</li>    <li>網頁設計方案 </li></ul></td><td> <ul class="upper-alpha">    <li><r2>ul { list-style-type: upper-alpha }</r2></li>    <li>網頁設計增值服務</li>    <li>提供網頁設計服務</li></ul>  </td></tr><tr><td><ul class="lower-alpha">    <li><r2>ul { list-style-type: lower-alpha }</r2></li>    <li>Google</li>    <li>Blogger</li></ul>  </td><td><ul class="cjk-ideographic">    <li><r2>ul { list-style-type: cjk-ideographic }</r2></li>    <li>Google</li>    <li>Blogger</li></ul>  </td></tr><tr><td><ul class="decimal">    <li><r2>ul { list-style-type: decimal }</r2></li>    <li>Google</li>    <li>Blogger</li></ul>  </td><td><ul class="decimal-leading-zero">    <li><r2>ul { list-style-type: decimal-leading-zero }</r2></li>    <li>Google</li>    <li>Blogger</li></ul>  </td></tr><tr><td><ul class="none">    <li><r2>ul { list-style-type: none }</r2></li>    <li>Google</li>    <li>Blogger</li></ul>   </td></tr></tbody></table> <style>.square {list-style-type: square} .circle {list-style-type: circle } .disc   {list-style-type: disc} .lower-roman {list-style-type: lower-roman;} .upper-roman {list-style-type: upper-roman;} .upper-alpha {list-style-type: upper-alpha;} .lower-alpha {list-style-type: lower-alpha;} .cjk-ideographic {list-style-type:cjk-ideographic;} .decimal {list-style-type:decimal;} .decimal-leading-zero{list-style-type:decimal-leading-zero;} .none{list-style-type:none;} r2 {color:red;font-weight:bold} <style>

<div id="menu8"> <div id="menu8"> <div id="menu8"><ul><li><a>AAA</a></li><li><a>BBB</a><ul><li><a>BBB1A</a><ul><li><a>BBB1A</a><li><a>BBB1A</a><li><a>BBB1A</a></ul></li><li><a>BBB2A</a><ul><li><a>BBB2A</a><li><a>BBB2A</a><li><a>BBB2A</a><li><a>BBB2A</a><li><a>BBB2A</a></ul></li><li><a>BBB3A</a><ul><li><a>BBB3A</a><li><a>BBB3A</a><li><a>BBB3A</a><li><a>BBB3A</a><li><a>BBB2A</a></ul></li></ul></li><li><a>CCC</a><ul><li><a>CCC</a></li><li><a>CCC</a></li><li><a>CCC</a></li><li><a>CCC</a></li></ul></li><li><a>DDD</a><ul><li><a>DDD</a></li><li><a>DDD</a></li></ul></li></ul></ul></div>  <br>123456789123456789<br>123456789123456789123456789123456789123456789123456789<br><br>123456789123456789<br>123456789123456789123456789123456789123456789123456789<br>  <style type="text/css">#menu8    { width:600px;            /* 選單大小 */                        height:30px;  } #menu8 ul { list-style-type:none;   /* 取消ul樣式符號 */              margin:0;              /* 重設ul邊界與留白為零 */              padding:0;              overflow: hidden; }    /* overflow才會自動調整大小 */    * html #menu8 ul { height:30px; }  /* 解決IE6不理overflow問題 */    #menu8 ul li { float:left; }       /* 利用float讓第一層li水平排列 */  * html #menu8 ul li {                 display:inline; }   /* 解決IE6條列式餘白問題*/  #menu8 ul li a { display:block;    /* 將a改為區塊元件以便指定寬高 */                                    float:left;       /* 要設float，否則IE6會以100%寬度顯示 */                                    height:30px;                  width:100px;                  text-align: center; }  #menu8 ul li ul { position:absolute;  /* 第二層ul定位 */                   width:200px;        /* 固定寬度 */                   overflow:visible;   /* 避免出現捲軸 */                   clear:left;         /* 讓ul與母階層li相同位置 */                   margin-top: 30px;                   margin-right: 0;                   margin-bottom: 0;                   margin-left: 0; }  *:first-child+html #menu8 ul li ul {  margin-top:0; } /* 修正IE7絕對定位差異 */   * html #menu8 ul li ul {  margin-top:0;            }  /* 修正IE6絕對定位差異 */ #menu8 ul li ul li { float:none;                     /* 覆寫繼承自第一層的浮動設定 */                                             text-align: center; }  #menu8 ul li ul li a { float:none;  /* 覆寫繼承自第一層的浮動設定 */                                                 width: 100%; }  #menu8 ul li ul li ul {  margin-top: -30px;                          margin-right: 0;                          margin-bottom: 0;                          margin-left: 200px;                           width: 100%; } *:first-child+html #menu8 ul li ul li ul {  margin-top:-30px; } /* 修正IE7絕對定位差異 */  #menu8 ul li ul li ul li { /* width、float繼承第二層，免設定 */ }  #menu8 ul li ul li ul li a { /* width、float繼承第二層，免設定 */ } /* ---------- 隱藏與顯示階層 ---------- */  #menu8 ul li ul {  /* 預先隱藏第二層 */  visibility:hidden; } #menu8 ul li:hover ul {  /* 觸動第一層時，顯示第二層 */  visibility:visible; } #menu8 ul li:hover ul li ul {  /* 顯示第二層時，隱藏第三層，避免同時彈出 */  visibility:hidden; }  #menu8 ul li ul li:hover ul {  /* 觸動第二層時，顯示第三層 */  visibility:visible; }  #menu8 ul li ul li:hover ul li ul {  /* 顯示第三層時，隱藏第四層，避免同時彈出 */  visibility:hidden; }  #menu8 ul li ul li ul li:hover ul {  /* 觸動第三層時，顯示第四層 */  visibility:visible; } /* ---------- 以下為美化用，非必需 ---------- */   /* 預設字體 */  #menu8 {  font-size:16px;  font-family:Arial, Helvetica, sans-serif; } /* 第一層ul背景色彩與邊框 */ #menu8 ul {  background:#0099CC;  border-style: inset; } /* 第一層a字型 */ #menu8 ul li a {  color:#FFF;  text-decoration:none;  line-height: 30px; } /*第二層ul背景色彩與邊框  */  #menu8 ul li ul {  background:#0099CC;  border-style: inset; } /* 第二層a字型 */  #menu8 ul li ul li a {  font-size:16px;  color:#333333;  text-decoration:none; } /* 觸動第一層li時，改變背景色 */  #menu8 ul li:hover, #menu8 ul li a:hover {  background:#00FFFF; }  #menu8 ul li:hover a {  color:#333333; } /* 觸動第二層以上li時改變背景色 */  #menu8 ul li ul li:hover, #menu8 ul li ul li a:hover {  background:#00FFFF; }    </style>

#HTML ul li 項目標籤

HTML ul li 項目標籤

HTML <ul> <ol> <li> <dl> <dt> <dd> 項目標籤

</ul>

</ul>
</div>
</td></tr>
</tbody></table>
<br>123456789123456789<br>
123456789123456789123456789123456789123456789123456789<br>
<br>123456789123456789<br>
123456789123456789123456789123456789123456789123456789<br>

* html #menu8 ul { height:30px; }  /* 解決IE6不理overflow問題 */

#menu8 ul li { float:left; }       /* 利用float讓第一層li水平排列 */

* html #menu8 ul li { display:inline; } /* 解決IE6條列式餘白問題*/
#menu8 ul li a { display:block;    /* 將a改為區塊元件以便指定寬高 */
                 float:left;  /* 要設float，否則IE6會以100%寬度顯示 */
                 height:30px;
                 width:100px;
                 text-align: center; }
#menu8 ul li ul { position:absolute; /* 第二層ul定位 */
                  width:200px;       /* 固定寬度 */
                  overflow:visible; /* 避免出現捲軸 */
                  clear:left;       /* 讓ul與母階層li相同位置 */
                  margin-top: 30px;
                  margin-right: 0;
                  margin-bottom: 0;
                  margin-left: 0; }
*:first-child+html #menu8 ul li ul { 
margin-top:0; } /* 修正IE7絕對定位差異 */

* html #menu8 ul li ul {
 margin-top:0; }  /* 修正IE6絕對定位差異 */

#menu8 ul li ul li {  float:none;  /* 覆寫繼承自第一層的浮動設定 */
                      text-align: center; }
#menu8 ul li ul li a { float:none;  /* 覆寫繼承自第一層的浮動設定 */
                        width: 100%; }
#menu8 ul li ul li ul {
 margin-top: -30px;
 margin-right: 0;
 margin-bottom: 0;
 margin-left: 200px;
 width: 100%;
}
*:first-child+html #menu8 ul li ul li ul {
 margin-top:-30px; } /* 修正IE7絕對定位差異 */

#menu8 ul li ul li ul li {
/* width、float繼承第二層，免設定 */
}
#menu8 ul li ul li ul li a {
/* width、float繼承第二層，免設定 */
}
/* ---------- 隱藏與顯示階層 ---------- */
#menu8 ul li ul {
 /* 預先隱藏第二層 */
 visibility:hidden;
}
#menu8 ul li:hover ul {
 /* 觸動第一層時，顯示第二層 */
 visibility:visible;
}
#menu8 ul li:hover ul li ul {
 /* 顯示第二層時，隱藏第三層，避免同時彈出 */
 visibility:hidden;
}
#menu8 ul li ul li:hover ul {
 /* 觸動第二層時，顯示第三層 */
 visibility:visible;
}
#menu8 ul li ul li:hover ul li ul {
 /* 顯示第三層時，隱藏第四層，避免同時彈出 */
 visibility:hidden;
}
#menu8 ul li ul li ul li:hover ul {
 /* 觸動第三層時，顯示第四層 */
 visibility:visible;
}
/* ---------- 以下為美化用，非必需 ---------- */

/* 預設字體 */
#menu8 {
 font-size:16px;
 font-family:Arial, Helvetica, sans-serif;
}
/* 第一層ul背景色彩與邊框 */
#menu8 ul {
 background:#0099CC;
 border-style: inset;
}
/* 第一層a字型 */
#menu8 ul li a {
 color:#FFF;
 text-decoration:none;
 line-height: 30px;
}
/*第二層ul背景色彩與邊框  */
 #menu8 ul li ul {
 background:#0099CC;
 border-style: inset;
}
/* 第二層a字型 */
#menu8 ul li ul li a {
 font-size:16px;
 color:#333333;
 text-decoration:none;
}
/* 觸動第一層li時，改變背景色 */
#menu8 ul li:hover, #menu8 ul li a:hover {
 background:#00FFFF;
}
#menu8 ul li:hover a {
 color:#333333;
}
/* 觸動第二層以上li時改變背景色 */
#menu8 ul li ul li:hover, #menu8 ul li ul li a:hover {
 background:#00FFFF;
}

</style>

2018年8月2日星期四

CSS before after

CSS content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。before after

123456

ABC

ug5g.com

123456

.A3::before {
content: url(xxx.jpg);}
.A3::after { content: url(xxx.jpg);}
</style>
<p class="A3"> 12345 </p>

12345

#CSS before after #CSS content #css content:counter

CSS before after

document.getElementsByTagName

document.getElementsByTagName()

document.getElementsByTagName

document.getElementsByTagName()

2018年8月1日星期三

querySelectorAll

document.querySelectorAll("*") / document.all

<pre><b>document.all </b>
<span id="dp1"></span>
<span id="dp"></span>
</pre>

txt="" ;
txt += '<<c>div id="Mid" > \n' ;
txt += '    <<c>div class="item" >111<<c>/div> \n' ;
txt += '    <<c>div class="item" >222<<c>/div> \n' ;
txt += '    <<c>div class="item" >222<<c>/div> \n' ;
txt += '    <<c>span>333<<c>/span> \n' ;
txt += '<<c>/div> \n\n' ;
txt += '<<c>span id="dp"><<c>/span>\n\n' ;

txt += '<<c>script>\n' ;
txt += '    var x = document.all ; \n' ;
txt += '    var i ,txt="" ;\n' ;
txt += '    for( i=0 ; i< x.length ;i++){\n' ;
txt += '         txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName };\n';
txt += 'dp.innerHTML= txt ;\n' ;
txt += '<<c>/script>\n' ;

dp1.innerHTML= txt ;

</script>

#www{font-size: 30px ;word-wrap:break-word;}
pre { font-size: 20px ;
      white-space: pre-wrap;        /* css-3 */
      white-space: -moz-pre-wrap;   /* Mozilla, since 1999 */
      white-space: -pre-wrap;       /* Opera 4-6 */
      white-space: -o-pre-wrap;     /* Opera 7 */
      word-wrap: break-word;      } /* Internet Explorer 5.5+ */
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;}
</style>

<pre><b>document.querySelectorAll(CSS selectors) </b>

dp.innerHTML= txt ;
txt="" ;
txt += '<<c>div id="Mid" > \n' ;
txt += '    <<c>div class="item" >111<<c>/div> \n' ;
txt += '    <<c>div class="item" >222<<c>/div> \n' ;
txt += '    <<c>div class="item" >222<<c>/div> \n' ;
txt += '    <<c>span>333<<c>/span> \n' ;
txt += '<<c>/div> \n\n' ;
txt += '<<c>span id="dp"><<c>/span>\n\n' ;
txt += '<<c>script>\n' ;
txt +='    var x = document.querySelectorAll(<r>"*"</r>) ;\n'
txt +='    var i ,txt="" ;\n' ;
txt +='for( i=0 ; i< x.length ;i++){ \n' ;
txt +='      txt += "\\n x[" +i+"].tagName = " + x[i].tagName }; ' ;
txt +='\n' ;
txt +='dp.innerHTML= txt ;\n' ;
txt += '<<c>/script>\n\n' ;
txt +='<<c>div id="dp"><<c>/div>' ;
 
dp1.innerHTML= txt ;

</script>

<pre><b>Mid.querySelectorAll(CSS selectors) </b>
<<c>div id="Mid" style="display:none">
     <<c>div class="item" >111<<c>/div>
     <<c>div class="item" >222 <<c>/div>
     <<c>div class="item" >333 <<c>/div>
     <<c>span>333<<c>/span>
<<c>/div>

<<c>script>
    var x = <r>Mid</r>.querySelectorAll("*");
    var i ,txt="" ;
    for( i=0 ; i< x.length ;i++){
         txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName } ;
dp.innerHTML= txt ;
<<c>/script>

dp.innerHTML= txt ;
</script>

<<c>script>
    var x = <r>Mid</r>.querySelectorAll(<r>".item"</r>) ;
    var i ,txt="" ;
    for( i=0 ; i< x.length ;i++){
         txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName } ;
dp.innerHTML= txt ;
<<c>/script>

dp.innerHTML= txt ;
</script>

<<c>script>
    var x = <r>Mid</r>.querySelectorAll(<r>"div"</r>) ;
    var i ,txt="" ;
    for( i=0 ; i< x.length ;i++){
         txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName } ;
dp.innerHTML= txt ;
<<c>/script>

dp.innerHTML= txt ;
</script>

<<c>script>
    var x = <r>Mid</r>.querySelectorAll(<r>"span"</r>) ;
    var i ,txt="" ;
    for( i=0 ; i< x.length ;i++){
         txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName } ;
dp.innerHTML= txt ;
<<c>/script>

dp.innerHTML= txt ;
</script>

Edit

#html #網頁格式 #style #div #script querySelectorAll() #script document.all #script CSS selectors #get Selector

2018年7月31日星期二

color code

#color code #color

color code

2018年7月28日星期六

auto-resize a img fit into div

2018年7月27日星期五

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/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/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>

範例的效果 :

2018年7月25日星期三

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/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/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>

toggle() 切換顯示或是隱藏

$("#buttom_id").toggle(effectType, 500);

window.setTimeout( function() {
$("#buttom_id").toggle(effectType, 500);  }, 1000 );

});  
</script>

訂閱：文章 (Atom)

2018年8月6日 星期一

HTML <ul> <ol> <li> <dl> <dt> <dd> 項目標籤

HTML <ul> <ol> <li> <dl> <dt> <dd> 項目標籤

2018年8月2日 星期四

CSS content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。before after

CSS before after

document.getElementsByTagName()

document.getElementsByTagName()

2018年8月1日 星期三

document.querySelectorAll("*") / document.all

2018年7月31日 星期二

color code

color code

2018年7月28日 星期六

auto-resize a img fit into div

2018年7月27日 星期五

DIV 內置入 jpg 圖片

2018年7月25日 星期三

toggle() 切換顯示或是隱藏

toggle() 切換顯示或是隱藏

2018年8月6日星期一

2018年8月2日星期四

2018年8月1日星期三

2018年7月31日星期二

2018年7月28日星期六

2018年7月27日星期五

2018年7月25日星期三