PIXNET Logo登入

421244103

跳到主文

歡迎光臨c8cc168在痞客邦的小天地 Blogger HTML 技巧 **智障肥強**

部落格全站分類：不設分類

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 5月 17 週六 201422:06

  • CSS DIV Span

class 範例 。
分為不同的區域,及換行
不分為區域,及不換行。
<div class="div_class_A ">111</div>
<div class="div_class_A ">222</div>
111
222

(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：DIV
▲top
  • 5月 17 週六 201421:54

  • id class

ID 選擇器在一個 HTML 文件中只能被使用一次，選擇器可以被 Javascript 中的 GetElementByID 函數所運用。
Class 選擇器在一個 HTML 文件中可以被使用多次。
id 例子#123{
          color:#FF00FF;
          font-size:20px; }<div id="123">....</div>
<p id="123">....</p>
<span id="123">....</span>Class 例子.123{
         color:#FF00FF;
         font-size:20px; }<div Class ="123">....</Class >
<p Class ="123">....</Class >
<span Class ="123">....</Class >
| id | class | Javascript | css | html |
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：class
▲top
  • 5月 17 週六 201417:34

  • CSS font 大細設定

font-family font-size font-weight font-style font-variant background-color color text-transform word-spacing

(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(1)

  • 個人分類：small
▲top
  • 5月 16 週五 201422:20

  • 網頁螢幕 寬高

網頁螢幕 寬高





















(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：document-網頁螢幕 寬高
▲top
  • 5月 09 週五 201409:28

  • 管理員

Your browser does not support HTML5 video.
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：管理員-講道
▲top
  • 4月 25 週五 201422:10

  • ok select document.activeElement.id

謮取ID document.activeElement.id | select | 手指指標 | this select id ="st8523"
this id ="BT_1"
this id ="BT_2"
this id ="BT_3"
this id ="BT_4"
button style="cursor:pointer" 變更為手指指標
document.getElementById('st8523').selectedIndex=0 to 3 可改變select選擇 }
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：documen-焦点選擇
▲top
  • 4月 24 週四 201417:16

  • blogger 樹狀標籤

blogger 樹狀標籤
1) 後台 → 打開範本文件 → 修改 HTML
2) 搜尋 <b:widget id='Label1' locked='false' title='標籤' type='Label'>
3) 標籤 要設定好才有顯示.
   首部 - 次部 - 三部   例如 HTML-div-H1

4) 下三行 張 <h2><data:title/></h2> 改為
<h2><div id="treeLabel_toggle"><a href="http://wayne- fu.blogspot.com/2013/01/multi-tree-label-update.html" rel="nofollow" target="_blank"><img class="post-img" src="http://2.bp.blogspot.com/-nn8uU4LhVtM/T8cdzYQnUZI/AAAAAAAACos/JcGy8V05y84/s1600/info.png"/></a></div><data:title/></h2>
5) 向下搜尋程式
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
改為
  1. <div id="treeLabel_main" style="font-family: Arial;"><span id="treeLabel_host" class="item-control blog-admin"></span></div>
  2.  
  3. <style>
  4. #treeLabel_toggle {
  5.   float: right;
  6.   font-family: Arial;
  7. }
  8. #treeLabel_toggle a, #treeLabel_main a {
  9.   font-size: 10pt;
  10.   text-decoration: none;
  11. }
  12.  
  13. .treeLabel_catText a:link {
  14.   color: #0b5394; /* 請填入大分類的顏色, 如果要使用系統預設的超連結顏色, 可刪除此行 */
  15.   font-weight: bold;
  16. }
  17. .treeLabel_catText a:hover {
  18.   color: #b8b832;  /* 請填入滑鼠移過大分類要顯示的顏色, 如果要使用系統預設的超連結顏色, a:link 與 a:hover 的顏色都不要設定 */
  19. }
  20.  
  21. .treeLabel_category {  /* 這裡可設定大分類名稱區塊的 CSS */
  22.   font-size: 10pt;
  23.   margin-top: 4px;
  24. }
  25. .treeLabel_label {  /* 這裡可設定標籤名稱區塊的 CSS */
  26.   font-size: 10pt;
  27.   margin-top: 2px;  
  28. }
  29. </style>
  30.  
  31. <script>
  32. //<![CDATA[
  33. var treeLabel = {
  34.   category: ["電腦", "休閒", "閱讀"], // 雙引號內填入大分類名稱, 每個大分類用小寫逗號隔開, 最後一個大分類之後不可有逗號; 填入順序就是顯示的順序
  35.   showLevel: 2,  // 預設打開的標籤層數, 填入 1 為全部收起的狀態
  36.   showCategoryCount: "Y",  // 大分類若不顯示文章數, 請填入 "N"
  37.   openLogo: "▼",  // 如使用圖檔,雙引號內請填入 http 開頭的網址
  38.   closeLogo: "►",  // 如使用圖檔,雙引號內請填入 http 開頭的網址
  39.   listLogo: "⇢",  // 如使用圖檔,雙引號內請填入 http 開頭的網址
  40.   margin: 10,  // 縮排的像素值
  41.   openText: "全展開",  // 可改為自訂文字, 不顯示文字請改為 ""
  42.   closeText: "全收合",  // 可改為自訂文字, 不顯示文字請改為 "&nbsp;"
  43.   interval: "Y"  // 預設每個大分類之間空一行, 如不要空行請填 "N"
  44. };
  45. //]]>
  46.  
  47. treeLabel.data = [];
  48. treeLabel.labelName = [];
  49.  
  50. <b:loop values='data:labels' var='label'>
  51.  
  52. (function ()  {
  53.   var a = "<data:label.name/>",
  54.       b = a.split("-"),
  55.       l = b.length,
  56.       data = [],
  57.       i;
  58. //<![CDATA[
  59. for(i=0;i<l;i++){if(i!=0&&i!=l-1&&b[i].search(" ")!=0){b[i]=" "+b[i]}data[i]=b[i]};
  60. //]]>
  61.   treeLabel.data.push([data, "<data:blog.languageDirection/>", "<data:label.url/>", "<data:label.count/>"]);
  62. } )();
  63.  
  64. </b:loop>
  65.  
  66. //<![CDATA[
  67. treeLabel.dg=function(a){return document.getElementById(a)};treeLabel.toggle=function(n){var k=treeLabel.dg,o=treeLabel.labelName,b=o.length,p=treeLabel.openLogo,h=treeLabel.closeLogo,m,q,d,g,a,e,c,f;for(e=0;e<b;e++){m=o[e];f=m.length;for(c=0;c<f;c++){q=m.join("")+c;d="logo"+q;g=k(q);a=k(d);if(m[1]&&n==1){if(a&&!a.firstChild.src){a.innerHTML=p}if(a&&a.firstChild.src){a.firstChild.src=p}if(g){g.style.display="block"}}if(m[1]&&n==0){if(a&&!a.firstChild.src){a.innerHTML=h}if(a&&a.firstChild.src){a.firstChild.src=h}if(g){g.style.display="none"}}}}};treeLabel.swap=function(c,d){var f=treeLabel.dg,a=f(d),e=f(c),b=treeLabel.openLogo,g=treeLabel.closeLogo;if(!e.firstChild.src){e.innerHTML=(e.innerHTML==b)?g:b}else{e.firstChild.src=(e.firstChild.src==b)?g:b}a.style.display=(a.style.display=="block")?"none":"block"};(function(){var l=treeLabel.dg,S=treeLabel.data,F=treeLabel.category,R=[],D=[],u=[],f=[],z=F.length,g=S.length,E=treeLabel.showLevel,v=treeLabel.openLogo,e=treeLabel.closeLogo,N=treeLabel.listLogo,d=treeLabel.margin,I=(treeLabel.interval=="Y")?"<p/>":"",w="",t="",m="",a=0,J,A,o,c=l("treeLabel_host"),Q=(window.getComputedStyle)?(window.getComputedStyle(c).display=="none")?"<a href='http://wayne-fu.blogspot.com/2013/01/multi-tree-label-update.html' target='_blank'><img src='http://2.bp.blogspot.com/-nn8uU4LhVtM/T8cdzYQnUZI/AAAAAAAACos/JcGy8V05y84/s1600/info.png' title='Blogger 多層樹狀標籤\n程式設計：WFU BLOG' style='width: 20px; vertical-align: middle;'/></a>":"":"",P,O,M,C,B,K,L,s,H,q,G,h,b,r;v=(v.search("http")<0)?v:"<img src='"+v+"' style='vertical-align: middle;'/>";e=(e.search("http")<0)?e:"<img src='"+e+"' style='vertical-align: middle;'/>";N=(N.search("http")<0)?N:"<img src='"+N+"' style='vertical-align: middle;'/>";S.sort();for(P=0;P<g;P++){treeLabel.labelName[P]=S[P][0];D[P]=S[P][1];u[P]=S[P][2];f[P]=S[P][3]}R=treeLabel.labelName;for(P=0;P<z;P++){for(O=0;O<g;O++){J=R[O];if(J[1]&&J[0]==F[P]){a++;if(a!=0){a=1}L=function(){if(O-1<0){return 0}K=0,A=R[O-1];function i(){if(J[K]==A[K]){K++;i()}}i();return K};M=L();o=function(){if(J[M+1]){H=0;q="";G=J.join("")+M;h="logo"+G;b=(M<E-1)?v:e;r=(M<E-1)?"block":"none";if(treeLabel.showCategoryCount=="Y"){for(C=0;C<g;C++){A=R[C];for(B=M;B>=0;B--){if(J[B]!=A[B]){break}if(J[B]==A[B]&&B==0){H+=parseInt(f[C]);q="("+H+")"}}}}w+="<div class='treeLabel_category'><span onclick='treeLabel.swap(\""+h+'","'+G+"\");'><a id='"+h+"' href='javascript:' style='margin-left:"+M*d+"px;'>"+b+"</a>";w+="<span class='treeLabel_catText'><a href='javascript:'> "+J[M]+" </a></span></span><span>"+q+"</span></div><div id='"+G+"' style='display:"+r+"'>";M++;o()}else{w+="<div class='treeLabel_label' style='margin-left:"+M*d+"px;'>"+N+" <a dir='"+D[O]+"' href='"+u[O]+"'><span dir='ltr'>"+J[M]+"</span></a> ("+f[O]+")</div>";A=R[O+1]||"";m="";s=function(){if(M-1>0){m+="</div>";if(!A){M--;s()}else{for(K=M;K>=1;K--){if(J[K-1]!=A[K-1]){K=2;break}if(J[K-1]==A[K-1]&&K==1){break}}if(K==1){m=m.replace("</div>","")}else{M--;s()}}}};s();w+=m}};o()}}if(a==1){w+=I+"</div>";a=0}}l("treeLabel_main").innerHTML=w;t="<a href='javascript:treeLabel.toggle(1);'>"+v+"</a><span class='treeLabel_catText'><a href='javascript:treeLabel.toggle(1);'>"+treeLabel.openText+"</a></span>　";t+="<a href='javascript:treeLabel.toggle(0);'>"+e+"</a><span class='treeLabel_catText'><a href='javascript:treeLabel.toggle(0);'>"+treeLabel.closeText+"</a></span> ";if(navigator.userAgent.indexOf("MSIE")<0){t+=Q}l("treeLabel_toggle").innerHTML=t})();
  68. //]]>
  69. </script>

以上方法來自 http://www.wfublog.com/2013/01/multi-tree-label-update.html

(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(39)

  • 個人分類：Blogger-樹狀標籤
▲top
  • 4月 16 週三 201422:20

  • ok 網頁地圖

Blogger 網頁地圖提交 Sitemap 至 google   http://www.google.com/webmasters
提交 Sitemap 至 yahoo Binge  https://login.live.com
提交檔案
http://XXXXXX.blogspot.hk/sitemap.xml
http://XXXXXX.blogspot.hk/rss.xml
http://XXXXXX.blogspot.hk/atom.xml?redirect=false
http://XXXXXX.blogspot.hk/feeds/posts/default?orderby=updated
http://XXXXXX.blogspot.hk/atom.xml?redirect=false&start-index=1&max-results=500
========================================================================
其他網頁
要自行制作網頁地圖
網上有網站幫你制作 http://www.xml-sitemaps.com/
制作後下載所有地圖檔案,上載到你的網頁跟目錄.後提交 yahoo , google
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：網頁地圖
▲top
  • 3月 04 週二 201421:12

  • CSS hover opacity 滑鼠接觸我

.tt { opacity: 0.5; font-size: 20px; color: Lime; } .tt:hover{ opacity: 1; font-size: 40px; color: #C33; }
css 滑鼠接觸我
css hover 滑鼠接觸改CSS參數
css opacity: 0.1 - 1
1 - 不透明度
<style type="text/css">
.tt {
 opacity: 0.5;
 font-size: 20px;
 color: #066;
}
.tt:hover{
 opacity: 1;
 font-size: 40px;
 color: #C33;
}
</style>
<div class="tt">
css 滑鼠接觸我
</div>
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(3)

  • 個人分類：hover
▲top
  • 2月 26 週三 201423:35

  • border 框架 框線 邊框

<img height="70" src="https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s136/site_logo.gif" style="border: 10px solid red;"  width="70" /><img height="70" src="https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s136/site_logo.gif" style="border: 10px dashed yellow;" width="70" /><img height="70" src="https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s136/site_logo.gif" style="border: 10px double lime;" width="70" /><img height="70" src="https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s136/site_logo.gif" style="border: 10px dotted magenta;" width="100%" /><img height="70" src="https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s136/site_logo.gif" style="border: 10px groove olivedrab;" width="70" /><img height="70" src="https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s136/site_logo.gif" style="border: 10px ridge pink;" width="70" /><img height="70" src="https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s136/site_logo.gif" style="border: 10px inset pink;" width="70" /><img height="70" src="https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s136/site_logo.gif" style="border: 10px outset yellowgreen;" width="70" />| border 圖框 | img | height | width | https | span | style |border 框線 | border 邊框 |
(繼續閱讀...)
文章標籤

c8cc168 發表在 痞客邦 留言(0) 人氣(1)

  • 個人分類：border
▲top
«1...4568»

ck

文章分類

  • youtube (4)
  • 網頁地圖 (1)
  • table (1)
  • scroll (1)
  • padding (1)
  • ASCII (1)
  • Blogger-下拉式選單 (1)
  • documen-1 (1)
  • Blogger-隱藏修改 CSS (1)
  • Blogger-留言嵌入 (1)
  • setTimeout (1)
  • event.keyCode (1)
  • input file (1)
  • checkbox (1)
  • a href (1)
  • 水平分線 hr (1)
  • 管理員-MP3 (1)
  • HTML-GO TO (1)
  • getMouseXY (1)
  • GO TOP (1)
  • document-属性对照 (1)
  • Blogger-版面寬度 (1)
  • document-1 (2)
  • 焦点選擇 (1)
  • substring() (1)
  • getSeconds (1)
  • hover (1)
  • Blogger-樹狀標籤 (1)
  • documen-焦点選擇 (1)
  • 管理員-講道 (1)
  • document-網頁螢幕 寬高 (1)
  • small (1)
  • class (1)
  • DIV (1)
  • border (1)
  • margin-top (1)
  • float (1)
  • 可收合面板 (2)
  • visibility (1)
  • HTML-導入檔案 link css js (1)
  • Color Code (1)
  • Mouse (1)
  • input (1)
  • 框架及背景 (2)
  • 管理員-YouTube (1)
  • 管理員-CSS (1)
  • 管理員-聽歌 (1)
  • 管理員-推 (1)
  • Blogger-下拉式選單相簿 (1)
  • random() (1)
  • 文字 (1)
  • marquee (1)
  • 彈出視窗 (1)
  • 管理員-金句 (1)
  • img (1)
  • title (2)
  • audio (1)
  • 輸入及選擇 (4)
  • select option (3)
  • &lt;!--&gt; (1)
  • a download (1)
  • abbr title (1)
  • ul li (1)
  • 未分類文章 (1)

最新文章

  • list-style-type:none;
  • YouTube 自動改變螢幕大細
  • YouTube 播放清單
  • abbr title
  • a download
  • select option 下拉式選單

熱門文章

  • (563)三層橫的下拉選單按鈕

動態訂閱

文章精選

文章搜尋

誰來我家

參觀人氣

  • 本日人氣：
  • 累積人氣：