link
HTML link 標籤是在 head 區域內的標籤,通常是導入 css 檔案,
<link 屬性 屬性值 種類>
<link rel="shortcut icon" href="http://img.xuite.net/_v_1.0.65/favicon/xuite/favicon.ico"/>
<link rel="stylesheet" href="http://img.xuite.net/_v_1.0.65/my2/blog/style.css" type="text/css" >
<script src='http://rcc.an56.org/xuiteA.js' type='text/javascript'>
</script>
c8cc168 發表在 痞客邦 留言(0) 人氣(5)
display:block - 區塊方式呈現
display:inline - 所有文字或圖片均不換行
display:none - 所有文字或圖片不顯示,不佔空間
visibility : hidden - 所有文字或圖片不顯示,物件空間保留
<div style="display: block;">1234</div> <div style="display: block;">1234</div>
1234 1234 |
<div style="display: inline;">1234</div> <div style="display: inline;">1234</div>
1234 1234 |
<div style="display: none;">1234</div> <div style="display: none;">1234</div>
1234 1234 |
<div style="visibility : hidden;">1234</div> <div style="visibility : hidden;">1234</div>
1234 1234 |
c8cc168 發表在 痞客邦 留言(0) 人氣(1)
| <table border="0"> <tbody> <tr> <td><div class="cssjs"> <form onclick="aaff(1)" style="cursor: pointer;"> 2014主題</form> <div class="cssjst"> <img alt="基督教" id="gh1" src="https://lh6.googleusercontent.com/-_7lEEweM7Lg/U2mvpOgQ_BI/AAAAAAAAB7Y/1gerzQldBeA/s402/2014Banner.jpg " width="95%" /> </div> </div> </td></tr> <tr><td><div class="cssjs" style="cursor: pointer;"> <form onclick="aaff(2)"> 復興教會 始創人<br /> 包德寧牧師</form> <div class="cssjst"> <img alt="包德寧牧師" id="gh2" src="https://lh5.googleusercontent.com/-AJCljYLQkVQ/U3sd5tT7KKI/AAAAAAAACB8/W_tLpfbHXSg/s250/dennisbalcombe.jpg" width="95%" /> </div> </div> </td></tr> <tr><td><div class="cssjs" style="cursor: pointer;"> <form onclick="aaff(3)"> 埔恩堂 創辦牧師<br />鄭德明 牧師</form> <div class="cssjst"> <img alt="牧師 鄭德明" id="gh3" src="https://lh6.googleusercontent.com/-KB9ITDJHkbY/U1KGx7YwRkI/AAAAAAAACB8/Hbzt7cGXWXU/s512/382926_2658925716955_367686360_n.jpg" width="95%" /> </div> </div> </td></tr> <tr><td> <div class="cssjs" style="cursor: pointer;"> <form onclick="aaff(4)"> 長老 廖權</form> <div class="cssjst"> <img alt="長老 廖權" id="gh4" src="https://lh6.googleusercontent.com/-MWUEx6KgnBY/U1KGx0MshXI/AAAAAAAACB8/8sHdibe8jks/s512/600358_428776813821456_1682343578_n.jpg" width="95%" /> </div> </div> </td></tr> <tr><td><div class="cssjs" style="cursor: pointer;"> <form onclick="aaff(5)" width="300px"> 友好連結</form> <div class="cssjst" id="gh5"> <form style="font-size: 16px;"> <a href="http://mp4.ug5g.com/" target="ARR">詩 歌</a><br /> <br /> <a href="http://rcc.ug5g.com/" target="ARR">埔恩堂(民間版)</a><br /> <a href="http://rcchk.org/tprcc/tprcc.htm" target="ARR">埔恩堂(官網)</a><br /> <a href="http://evhktp.blogspot.hk/" target="ARR">齊賢社(民間版)</a><br /> <a href="http://www.eva-volunteer.org.hk/" target="ARR">齊賢社(官網)</a><br /> <a href="http://www.rcchk.org/" target="ARR">復 興 教 會</a><br /> <a href="http://kf.rcchk.org/" target="ARR">葵 芳 堂</a><br /> <a href="http://rccrhk.org/" target="ARR">真 奧 堂</a><br /> <a href="http://rcchk.org/sbc/index.html" target="ARR">示羅聖經學院</a><br /> <a href="http://rcmi.ac/" target="ARR">復興華人國際事工</a> <br /> <br /> <a href="http://www.housingauthority.gov.hk/tc/common/pdf/commercial-properties/leasing-information/welfare-lettings/flats.pdf" target="ARR">社福用途單位</a><br /> <a href="http://www.e123.hk/ngo/fund" target="ARR">慈善基金</a> </form> </div> </div> </td></tr> </tbody></table> <style type="text/css"> .cssjs{ background-color:#1E90FF; line-height: 25px; width:250px; font-size:100%; color:white; padding-top:0px; padding-left:0px; padding-right:0px; padding-bottom:0px; border: 2px solid blue; } .cssjs:hover { background-color:deepskyblue; } .cssjst{ width:250px; font-size:150%; background-color: #00FF00; padding-top:0px; padding-left:0px; padding-right:0px; padding-bottom:0px; } </style> <script type="text/javascript"> function aaff(x852){ if(x852 ==1){ document.getElementById("gh1").style.display="inline"; document.getElementById("gh2").style.display="none"; document.getElementById("gh3").style.display="none"; document.getElementById("gh4").style.display="none"; document.getElementById("gh5").style.display="none"; } if(x852 ==2){ document.getElementById("gh1").style.display="none"; document.getElementById("gh2").style.display="inline"; document.getElementById("gh3").style.display="none"; document.getElementById("gh4").style.display="none"; document.getElementById("gh5").style.display="none"; } if(x852 ==3){ document.getElementById("gh1").style.display="none"; document.getElementById("gh2").style.display="none"; document.getElementById("gh3").style.display="inline"; document.getElementById("gh4").style.display="none"; document.getElementById("gh5").style.display="none"; } if(x852 ==4){ document.getElementById("gh1").style.display="none"; document.getElementById("gh2").style.display="none"; document.getElementById("gh3").style.display="none"; document.getElementById("gh4").style.display="inline"; document.getElementById("gh5").style.display="none"; } if(x852 ==5){ document.getElementById("gh1").style.display="none"; document.getElementById("gh2").style.display="none"; document.getElementById("gh3").style.display="none"; document.getElementById("gh4").style.display="none"; document.getElementById("gh5").style.display="inline"; } } aaff(1); </script> |
c8cc168 發表在 痞客邦 留言(0) 人氣(154)
|
/* 加載csshover3.htc,解決IE6沒有li:hover擬類的問題 */ * html body { behavior:url("csshover3.htc"); } /* ---------- 大小與定位 ---------- */ #menu8 { /* 選單大小 */ width:800px; height:30px; } #menu8 ul { /* 取消ul樣式符號 */ list-style-type:none; /* 重設ul邊界與留白為零 */ margin:0; padding:0; /* 內有浮動元件時,需設overflow才會自動調整大小 */ overflow: hidden; } * html #menu8 ul { /* 解決IE6不理overflow問題,直接指定高度 */ height:30px; } #menu8 ul li { /* 利用float讓第一層li水平排列 */ float:left; } /* 解決IE6條列式餘白問題*/ * html #menu8 ul li { display:inline; } #menu8 ul li a { /* 將a改為區塊元件,以便指定寬高 */ display:block; /* 這邊也要設float,否則IE6會以100%寬度顯示 */ float:left; /* 固定高度 */ height:30px; width:100px; text-align: center; } #menu8 ul li ul { /* 讓第二層ul跳脫文件流以利定位 */ position:absolute; /* 固定寬度 */ width:200px; /* 避免出現捲軸 */ overflow:visible; /* 讓ul與母階層li相同位置 */ clear:left; margin-top: 30px; margin-right: 0; margin-bottom: 0; margin-left: 0; } /* 修正IE7絕對定位差異 */ *:first-child+html #menu8 ul li ul { margin-top:0; } /* 修正IE6絕對定位差異 */ * html #menu8 ul li ul { margin-top:0; } #menu8 ul li ul li { /* 覆寫繼承自第一層的浮動設定 */ float:none; text-align: center; } #menu8 ul li ul li a { /* 覆寫繼承自第一層的浮動設定 */ float:none; width: 100%;/* 註:display、height、padding繼承第一層的設定 */ } #menu8 ul li ul li ul { margin-top: -30px; margin-right: 0; margin-bottom: 0; margin-left: 200px; width: 100%; } /* 修正IE7絕對定位差異 */ *:first-child+html #menu8 ul li ul li ul { margin-top:-30px; } #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; }
<table border="0"> <tbody> <tr> <td><div id="menu8"> <ul> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">主 頁</a> </li> <!-------------------------------------------------------> <li><a href="https://www.blogger.com/null">講道重溫</a> <ul> <li><a href="https://www.blogger.com/null">主日 講道重溫</a> <ul> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">講道重溫 2014</a></li> <li><a href="https://www.blogger.com/null">講道重溫 2013</a> <ul> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">2013 MP4</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">2013 MP3</a></li> </ul> </li> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">講道重溫 2012</a></li> </ul> </li> <li><a href="https://www.blogger.com/null">信仰綱要錄音</a> <ul> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">信仰綱要 第1課</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">信仰綱要 第2課</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">信仰綱要 第3課</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">信仰綱要 第5課</a></li> </ul> </li> </ul> </li> <!-------------------------------------------------------> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">教會簡介</a> <ul> <li><a href="https://www.blogger.com/null">十載點滴</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">同工感言</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">我們的夢</a></li> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">牧者十載情</a></li> </ul> </li> <!-------------------------------------------------------> <li><a href="https://www.blogger.com/null">照 片</a> <ul> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">人 物</a></li> </ul> </li> <!-------------------------------------------------------> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">聚會時間</a> </li> <!-------------------------------------------------------> <li><a href="https://www.blogger.com/blogger.g?blogID=4458225802601532711">聯絡我們</a> </li> <!-------------------------------------------------------> </ul> </div> </td></tr> </tbody></table> <style type="text/css"> /* 加載csshover3.htc,解決IE6沒有li:hover擬類的問題 */ * html body { behavior:url("csshover3.htc"); } /* ---------- 大小與定位 ---------- */ #menu8 { /* 選單大小 */ width:800px; height:30px; } #menu8 ul { /* 取消ul樣式符號 */ list-style-type:none; /* 重設ul邊界與留白為零 */ margin:0; padding:0; /* 內有浮動元件時,需設overflow才會自動調整大小 */ overflow: hidden; } * html #menu8 ul { /* 解決IE6不理overflow問題,直接指定高度 */ height:30px; } #menu8 ul li { /* 利用float讓第一層li水平排列 */ float:left; } /* 解決IE6條列式餘白問題*/ * html #menu8 ul li { display:inline; } #menu8 ul li a { /* 將a改為區塊元件,以便指定寬高 */ display:block; /* 這邊也要設float,否則IE6會以100%寬度顯示 */ float:left; /* 固定高度 */ height:30px; width:100px; text-align: center; } #menu8 ul li ul { /* 讓第二層ul跳脫文件流以利定位 */ position:absolute; /* 固定寬度 */ width:200px; /* 避免出現捲軸 */ overflow:visible; /* 讓ul與母階層li相同位置 */ clear:left; margin-top: 30px; margin-right: 0; margin-bottom: 0; margin-left: 0; } /* 修正IE7絕對定位差異 */ *:first-child+html #menu8 ul li ul { margin-top:0; } /* 修正IE6絕對定位差異 */ * html #menu8 ul li ul { margin-top:0; } #menu8 ul li ul li { /* 覆寫繼承自第一層的浮動設定 */ float:none; text-align: center; } #menu8 ul li ul li a { /* 覆寫繼承自第一層的浮動設定 */ float:none; width: 100%;/* 註:display、height、padding繼承第一層的設定 */ } #menu8 ul li ul li ul { margin-top: -30px; margin-right: 0; margin-bottom: 0; margin-left: 200px; width: 100%; } /* 修正IE7絕對定位差異 */ *:first-child+html #menu8 ul li ul li ul { margin-top:-30px; } #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> <br /> <br /> |
| css | html | 三層橫的下拉選單按鈕 |
c8cc168 發表在 痞客邦 留言(0) 人氣(563)
| <table border="0"> <tbody> <tr> <td ><div id="menu4" > <ul> <li> <a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">主 頁</a> <ul> <li> <img src="https://lh5.googleusercontent.com/3dQrd4vmrX6QobV9qWlX jN8Bkzv2bXmUcYQLGJ785mM=w200-h250-no" width="260" height="243" alt="包德寧牧師" /> </li> </ul> </li>
<!-------------------------------------------------------> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">講道重溫</a> <ul> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">主日 講道重溫</a> <ul> <li><a http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">講道重溫 2014</a></li> <li><a href="https://www.blogger.com/null">講道重溫 2013</a> <ul> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">2013 MP4</a></li> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">2013 MP3</a></li> </ul> </li> <li><a http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">講道重溫 2012</a></li> </ul> </li> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">信仰綱要錄音</a> <ul> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">信仰綱要 第1課</a></li> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">信仰綱要 第2課</a></li> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">信仰綱要 第3課</a></li> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">信仰綱要 第5課</a></li> </ul> </li> </ul> </li> <!-------------------------------------------------------> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">教會簡介</a> <ul> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">十載點滴</a></li> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">同工感言</a></li> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">我們的夢</a></li> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">牧者十載情</a></li> </ul> </li> <!-------------------------------------------------------> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">照 片</a> <ul> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">人 物</a></li> </ul> </li> <!-------------------------------------------------------> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">聚會時間</a> </li> <!-------------------------------------------------------> <li><a href="http://rcc.ug5g.com/search/label/%E9%A0%81%E9%A6%96" target="_new">聯絡我們</a> </li> <!-------------------------------------------------------> </ul> </div> </td></tr> </tbody></table>
<style type="text/css"> /* 加載csshover3.htc,解決IE6沒有li:hover擬類的問題 */ * html body { behavior:url("csshover3.htc"); } /* ----------- 大小與定位 ----------------------- */ #menu4 { /* 選單大小 */ width:100px; height:30px; } #menu4 ul { /* 取消ul樣式符號 */ list-style-type:none; /* 重設ul邊界與留白為零 */ margin:0; padding:0; /* 內有浮動元件時,需設overflow才會自動調整大小 */ overflow: hidden; } * html #menu4 ul { /* 解決IE6不理overflow問題,直接指定高度 */ height:30px; } #menu4 ul li { /* 利用float讓第一層li水平排列 */ float:left; } /* 解決IE6條列式餘白問題*/ * html #menu4 ul li { display:inline; } #menu4 ul li a { /* 將a改為區塊元件,以便指定寬高 */ display:block; /* 這邊也要設float,否則IE6會以100%寬度顯示 */ float:left; /* 固定高度 */ height:30px; width:100px; text-align: center; } #menu4 ul li ul { /* 讓第二層ul跳脫文件流以利定位 */ position:absolute; /* 固定寬度 */ width:200px; /* 避免出現捲軸 */ overflow:visible; /* 讓ul與母階層li相同位置 */ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 90px; } /* 修正IE7絕對定位差異 */ *:first-child+html #menu4 ul li ul { margin-top:0; } /* 修正IE6絕對定位差異 */ * html #menu4 ul li ul { margin-top:0; } #menu4 ul li ul li { /* 覆寫繼承自第一層的浮動設定 */ float:none; text-align: center; } #menu4 ul li ul li a { /* 覆寫繼承自第一層的浮動設定 */ float:none; width: 100%; /* 註:display、height、padding繼承第一層的設定 */ } #menu4 ul li ul li ul { margin-top: -30px; margin-right: 0; margin-bottom: 0; margin-left: 200px; width: 100%; } /* 修正IE7絕對定位差異 */ *:first-child+html #menu4 ul li ul li ul { margin-top:-30px; } #menu4 ul li ul li ul li { /* width、float繼承第二層,免設定 */ } #menu4 ul li ul li ul li a { /* width、float繼承第二層,免設定 */ } /* ---------- 隱藏與顯示階層 ---------- */ #menu4 ul li ul { /* 預先隱藏第二層 */ visibility:hidden; } #menu4 ul li:hover ul { /* 觸動第一層時,顯示第二層 */ visibility:visible; } #menu4 ul li:hover ul li ul { /* 顯示第二層時,隱藏第三層,避免同時彈出 */ visibility:hidden; } #menu4 ul li ul li:hover ul { /* 觸動第二層時,顯示第三層 */ visibility:visible; } #menu4 ul li ul li:hover ul li ul { /* 顯示第三層時,隱藏第四層,避免同時彈出 */ visibility:hidden; } #menu4 ul li ul li ul li:hover ul { /* 觸動第三層時,顯示第四層 */ visibility:visible; } /* ----- 以下為美化用,非必需 --------- */
/* 預設字體 */ #menu4 { font-size:16px; font-family:Arial, Helvetica, sans-serif; } /* 第一層ul背景色彩與邊框 */ #menu4 ul { background:#0099CC; border-style: inset; } /* 第一層a字型 */ #menu4 ul li a { color:#FFF; text-decoration:none; line-height: 30px; } /*第二層ul背景色彩與邊框 */ #menu4 ul li ul { background:#0099CC; border-style: inset; } /* 第二層a字型 */ #menu4 ul li ul li a { font-size:16px; color:#333333; text-decoration:none; } /* 觸動第一層li時,改變背景色 */ #menu4 ul li:hover, #menu4 ul li a:hover { background:#00FFFF; } #menu4 ul li:hover a { color:#333333; } /* 觸動第二層以上li時改變背景色 */ #menu4 ul li ul li:hover, #menu4 ul li ul li a:hover { background:#00FFFF; } </style> |
| css | html | 三層直 的下拉選單按鈕 |
c8cc168 發表在 痞客邦 留言(0) 人氣(10)
| <table border="0"> <tbody> <tr> <td width="300px"> <!-----------------------------------------> <div class="rccA1"> <form > 2014主題<br></form> <div class="rccFB1" > <img alt="基督教" src="https://lh6.googleusercontent.com/-_7lEEweM7Lg/U2mvpOgQ_BI/AAAAAAAAB7Y/1gerzQldBeA/s402/2014Banner.jpg " width="95%" /> </div> </div> <!------------------------------------------->
<div class="rccA1"> <form > 復興教會 始創人<br /> 包德寧牧師</form> <div class="rccB1" style="margin: -190px 0px 0px 0px;" > <img alt="包德寧牧師" src="https://lh5.googleusercontent.com/-AJCljYLQkVQ/U3sd5tT7KKI/AAAAAAAACAg/c4D4bMH0uLA/s250/dennisbalcombe.jpg" width="95%" /> </div> </div> <!------------------------------------------> <div class="rccA1"> <form > 埔恩堂 創辦牧師<br /> 鄭德明 牧師<br /></form> <div class="rccB1" style="margin: -250px 0px 0px 0px;" > <img alt="牧師 鄭德明" src="https://lh6.googleusercontent.com/-KB9ITDJHkbY/U1KGx7YwRkI/AAAAAAAAB3M/qyKxGNKjgJg/s512/382926_2658925716955_367686360_n.jpg" width="95%" /> </div> </div> <!-------------------------------------------> <div class="rccA1"> <form > 傳道人 廖權<br></form> <div class="rccB1" style="margin: -275px 0px 0px 0px;); background-repeat: repeat;"> <img alt="傳道人 廖權" src="https://lh6.googleusercontent.com/-MWUEx6KgnBY/U1KGx0MshXI/AAAAAAAAB3E/i03CQpYMHi0/s512/600358_428776813821456_1682343578_n.jpg" width="95%" /> </div> </div> <!------------------------------------------> <!------------------------------------------> <div class="rccA1"> <form width="300px"> 友好連結</form> <div class="rccB1" style="font-size:18px;margin: -200px 0px 0px 0px;" > <img src="http://t51-3.yunpan.360.cn/s1/800-600.569b986929fc1bf41c35f1d722986eff1060872c.c25bc5.jpg?st=N8YlpaIYsKpEUz-uKfC9ww&e=1403712000&mt=jpg" width="95%" /> <form style="font-size:16px;margin: -380px 0px 0px 15px; "> <a href="http://mp4.ug5g.com/" target="ARR">詩 歌</a><br /> <br /> <a href="http://rcc.ug5g.com/" target="ARR">埔恩堂(民間版)</a><br /> <a href="http://rcchk.org/tprcc/tprcc.htm" target="ARR">埔恩堂(官網)</a><br /> <a href="http://evhktp.blogspot.hk/" target="ARR">齊賢社(民間版)</a><br /> <a href="http://www.eva-volunteer.org.hk/" target="ARR">齊賢社(官網)</a><br /> <a href="http://www.rcchk.org/" target="ARR">復 興 教 會</a><br /> <a href="http://kf.rcchk.org/" target="ARR">葵 芳 堂</a><br /> <a href="http://rccrhk.org/" target="ARR">真 奧 堂</a><br /> <a href="http://rcchk.org/sbc/index.html" target="ARR">示羅聖經學院</a><br /> <a href="http://rcmi.ac/" target="ARR">復興華人國際事工</a> <br /> <br /> <a href="http://www.housingauthority.gov.hk/tc/common/pdf/commercial-properties/leasing-information/welfare-lettings/flats.pdf" target="ARR">社福用途單位</a><br>
<a href="http://www.e123.hk/ngo/fund" target="ARR">慈善基金</a> </form> </div> </div> </td></tr> </tbody></table>
<style type="text/css"> .rccA1{ background-color:#1E90FF; line-height: 25px; width:300px; font-size:100%; padding-top:0px; padding-left:0px; padding-right:0px; padding-bottom:0px; border: 1px solid darkgoldenrod; }
.rccFB1{ width:300px; font-size:150%; background-image:url("http://t51-3.yunpan.360.cn/s1/800-600.569b986929fc1bf41c35f1d722986eff1060872c.c25bc5.jpg?st=p91cFeModpoA_1UhMwlcVg&e=1403625600&mt=jpg"); background-repeat: repeat; padding-top:0px; padding-left:0px; padding-right:0px; padding-bottom:0px; border: 1px solid darkgoldenrod; }
.rccB1{ width:300px; font-size:150%; background-color: darkkhaki; padding-top:0px; padding-left:0px; padding-right:0px; padding-bottom:0px; border: 1px solid darkgoldenrod; display:none ; }
.rccA1:hover .rccB1{ display:block; }
.rccB1 a{ color:black; } </style> |
| css | html | 可收合面板 | CSS + script | hover | document.getElementById(id) | display none | display inline | bottom | padding | background color | cursor: pointer |
c8cc168 發表在 痞客邦 留言(0) 人氣(42)
⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞
ⅠⅡ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ Ⅻ
←↑→↓↔↕↖↗↘↙↚↛↜↝↞↟↠↡↢↣↤↥↦↧↨↩↪↫↬↭↮↯↰↱↲↳↴↵↶↷↸↹↺↻↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⇈⇉⇊⇋⇌⇍⇎⇏⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇚⇛⇜⇝⇞⇟⇠⇡⇢⇣⇤⇥⇦⇧⇨⇩⇪
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳
⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂⒃⒄⒅⒆⒇
⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓⒔⒕⒖⒗⒘⒙⒚⒛
⒜⒝⒞⒟⒠⒡⒢⒣⒤⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵
ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏ
ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ⓪
⓫⓬⓭⓮⓯⓰⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾
─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏ ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟ ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯ ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿ ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
═║╒╓╔╕╖╗╘╙╚╛╜╝╞╟╠╡╢╣╤╥╦╧╨╩╪╫╬
╭╮╯╰╱╲╳╴╵╶╷╸╹╺╻╼╽╾╿
▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏▐░▒▓▔▕▖▗▘▙▚▛▜▝▞▟■□▢▣▤▥▦▧▨▩▪▫▬▭▮▯▰▱▲△▴▵▶▷▸▹►▻▼▽▾▿◀◁◂◃◄◅◆◇◈◉◊○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◢◣◤◥◦◧◨◩◪◫◬◭◮◯◰◱◲◳◴◵◶◷◸◹◺◻◼◽◾◿☀☁☂☃☄★☆☇☈☉☊☋☌☍☎☏☐☑☒☓☔☕☖☗☘☙☚☛☜☝☞☟☠☡☢☣☤☥☦☧☨☩☪☫☬☭☮☯☰☱☲☳☴☵☶☷☸☹☺☻☼☽☾☿♀♁♂♃♄♅♆♇♈♉♊♋♌♍♎♏♐♑♒♓♔♕♖♗♘♙♚♛♜♝♞♟♠♡♢♣♤♥♦♧♨♩♪♫♬♭♮♯
✁✂✃✄
✆✇✈✉✌✍✎✏✐✑✒
✓✔✕✖✗✘✙✚✛✜✝✞✟✠✡✢✣✤✥✦✧✨✩✪✫✬✭✮✯✰✱✲✳✴✵✶✷✸✹✺✻✼✽✾✿❀❁❂❃❄❅❆❇❈❉❊❋❌❍❎❏❐❑❒❓❔❕❖❗❘❙❚❛❜❝❞❟❠❡❢❣❤❥❦❧
❶❷❸❹❺❻❼❽❾❿➀➁➂➃➄➅➆➇➈➉➊➋➌➍➎➏➐➑➒➓➔➕➖➗➘➙➚➛➜➝➞➟➠➡➢➣➤➥➦➧➨➩➪➫➬➭➮➯➰➱➲➳➴➵➶➷➸➹➺➻➼➽➾
《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟〠〡〢〣〤〥〦〧〨〩〪〭〮〯〫〬
㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟
㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉㊊㊋㊌㊍㊎㊏㊐㊑㊒㊓㊔㊕㊖㊗㊘㊙㊚㊛㊜㊝㊞㊟㊠㊡㊢㊣㊤㊥㊦㊧㊨㊩㊪㊫㊬㊭㊮㊯㊰㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿㋀㋁㋂㋃㋄㋅㋆㋇㋈㋉㋊㋋
㏠㏡㏢㏣㏤㏥㏦㏧㏨㏩㏪㏫㏬㏭㏮㏯㏰㏱㏲㏳㏴㏵㏶㏷㏸㏹㏺㏻㏼㏽㏾
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~⦅⦆。「」←↑→↓■○
c8cc168 發表在 痞客邦 留言(0) 人氣(6)

#leftfloat { float:left; } #rightfloat { float:right; } 這個例子是用來顯示
img 內加入 style="float:left"
會如何影響整個頁面的呈現。在這裡,
圖案浮動於左邊
c8cc168 發表在 痞客邦 留言(0) 人氣(1)
padding-top (上) padding-right (右) padding-bottom (下) padding-left (左)padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
padding:[上方與下方距離] [左方與右方距離]
c8cc168 發表在 痞客邦 留言(0) 人氣(0)
margin-top:25px (上邊界) margin-right:25px (右邊界) margin-bottom:25px (下邊界) margin-left:25px (左邊界)margin:25px 四個邊的外距都是25pxborder 邊框....
<div style="border: 5px solid blue;width:50%;height:150px">
<div style="margin: 15px; border: 5px solid red;"></div>
</div>
這是邊界的例子 margin: 15px。
c8cc168 發表在 痞客邦 留言(0) 人氣(1)