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>

| css | html | 導入 css 檔案 | 導入檔案 | 導入 檔案 | link | js |

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

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

| css | html | visibility | display: none | display none | display: inline | display inline |

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


2014主題
基督教
復興教會 始創人
包德寧牧師
包德寧牧師
埔恩堂 創辦牧師
鄭德明 牧師
牧師 鄭德明
長老 廖權
長老 廖權
<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) 人氣()




<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) 人氣()


<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) 人氣()



2014主題
基督教

復興教會 始創人
包德寧牧師
包德寧牧師

埔恩堂 創辦牧師
鄭德明 牧師
牧師 鄭德明

傳道人 廖權
傳道人 廖權

<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) 人氣()

⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞

ⅠⅡ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ Ⅻ

←↑→↓↔↕↖↗↘↙↚↛↜↝↞↟↠↡↢↣↤↥↦↧↨↩↪↫↬↭↮↯↰↱↲↳↴↵↶↷↸↹↺↻↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⇈⇉⇊⇋⇌⇍⇎⇏⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇚⇛⇜⇝⇞⇟⇠⇡⇢⇣⇤⇥⇦⇧⇨⇩⇪

①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳

⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂⒃⒄⒅⒆⒇

⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓⒔⒕⒖⒗⒘⒙⒚⒛

⒜⒝⒞⒟⒠⒡⒢⒣⒤⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵

ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏ

ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ⓪

⓫⓬⓭⓮⓯⓰⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾

─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏ ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟ ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯ ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿ ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏

═║╒╓╔╕╖╗╘╙╚╛╜╝╞╟╠╡╢╣╤╥╦╧╨╩╪╫╬

╭╮╯╰╱╲╳╴╵╶╷╸╹╺╻╼╽╾╿

▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏▐░▒▓▔▕▖▗▘▙▚▛▜▝▞▟■□▢▣▤▥▦▧▨▩▪▫▬▭▮▯▰▱▲△▴▵▶▷▸▹►▻▼▽▾▿◀◁◂◃◄◅◆◇◈◉◊○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◢◣◤◥◦◧◨◩◪◫◬◭◮◯◰◱◲◳◴◵◶◷◸◹◺◻◼◽◾◿☀☁☂☃☄★☆☇☈☉☊☋☌☍☎☏☐☑☒☓☔☕☖☗☘☙☚☛☜☝☞☟☠☡☢☣☤☥☦☧☨☩☪☫☬☭☮☯☰☱☲☳☴☵☶☷☸☹☺☻☼☽☾☿♀♁♂♃♄♅♆♇♈♉♊♋♌♍♎♏♐♑♒♓♔♕♖♗♘♙♚♛♜♝♞♟♠♡♢♣♤♥♦♧♨♩♪♫♬♭♮♯

✁✂✃✄

✆✇✈✉✌✍✎✏✐✑✒
✓✔✕✖✗✘✙✚✛✜✝✞✟✠✡✢✣✤✥✦✧✨✩✪✫✬✭✮✯✰✱✲✳✴✵✶✷✸✹✺✻✼✽✾✿❀❁❂❃❄❅❆❇❈❉❊❋❌❍❎❏❐❑❒❓❔❕❖❗❘❙❚❛❜❝❞❟❠❡❢❣❤❥❦❧

❶❷❸❹❺❻❼❽❾❿➀➁➂➃➄➅➆➇➈➉➊➋➌➍➎➏➐➑➒➓➔➕➖➗➘➙➚➛➜➝➞➟➠➡➢➣➤➥➦➧➨➩➪➫➬➭➮➯➰➱➲➳➴➵➶➷➸➹➺➻➼➽➾

《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟〠〡〢〣〤〥〦〧〨〩〪〭〮〯〫〬

㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟

㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉㊊㊋㊌㊍㊎㊏㊐㊑㊒㊓㊔㊕㊖㊗㊘㊙㊚㊛㊜㊝㊞㊟㊠㊡㊢㊣㊤㊥㊦㊧㊨㊩㊪㊫㊬㊭㊮㊯㊰㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿㋀㋁㋂㋃㋄㋅㋆㋇㋈㋉㋊㋋

㏠㏡㏢㏣㏤㏥㏦㏧㏨㏩㏪㏫㏬㏭㏮㏯㏰㏱㏲㏳㏴㏵㏶㏷㏸㏹㏺㏻㏼㏽㏾

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~⦅⦆。「」←↑→↓■○



| 符號 ASCII | css | hrml |

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

這個例子是用來顯示
img 內加入 style="float:left"
會如何影響整個頁面的呈現。在這裡,
圖案浮動於左邊




這個例子是用來顯示
img 內加入 style="float:right" }
會如何影響整個頁面的呈現。在這裡,
圖案浮動於右邊。

| CSS | HTML | float right | float:left | 顯示 img | 圖案浮動 | 圖案 | 浮動 | 右邊 | 左邊 |

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


  • padding-top (上) 
  • padding-right (右) 
  • padding-bottom (下) 
  • padding-left (左)
padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
padding:[上方與下方距離] [左方與右方距離]
padding:[上方距離] [左方與右方距離] [下方距離]
padding:[四個方位的距離];

<div style="background-color: #ffd78c; height: auto; line-height: 20px; font-size: 16px;">
<p>本文</p>
</div>
</div>


<div style="background-color: #deffff; text-align: left; font-size: 13px; padding: 10px 20px 50px 100px;">
<div style="background-color: #ffd78c; height: auto; line-height: 20px; font-size: 16px;">
<p>本文</p>
</div>
</div>

<div style="background-color: #deffff; text-align: left; font-size: 13px; padding: 10px 50px;">
<div style="background-color: #ffd78c; height: auto; line-height: 20px; font-size: 16px;">
<p>本文</p>
</div>
</div>

<div style="background-color: #deffff; text-align: left; font-size: 13px; padding-top: 30px ;">
<div style="background-color: #ffd78c; height: auto; line-height: 20px; font-size: 16px;">
<p>本文</p>
</div>
</div>

| css | html | background-color | background color | padding | padding 四個邊留白 |

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

  • margin-top:25px      (上邊界) 
  • margin-right:25px    (右邊界) 
  • margin-bottom:25px (下邊界) 
  • margin-left:25px      (左邊界)
  • margin:25px 四個邊的外距都是25px
  • border 邊框....

<div style="border: 5px solid blue;width:50%;height:150px">
<div style="margin: 15px; border: 5px solid red;"></div>
</div>
這是邊界的例子 margin: 15px


<div style="border: 5px solid blue;width:50%;height:150px">
<div style="margin: 5px; border: 5px solid red;"></div>
</div>
這是邊界的例子 margin: 5px


<div style="border: 5px solid blue;width:50%;height:150px">
<div style="margin: 5px 10px 20px 40px; border: 5px solid red;"> </div></div>
這是邊界的例子 margin: 5px 10px 20px 40px 


<div style="border: 5px solid blue;width:50%;height:150px">
<div style="margin-top: 20px; border: 5px solid red;"> </div></div>
這是邊界的例子 margin-top: 20px 


<div style="border: 5px solid blue;width:50%;height:150px">
<div style="margin-top: 20px; border: 5px solid red;"> </div></div>
這是邊界的例子 margin-top: 20px 

| css | html | CSS margin 區域 邊界距離 | border |

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

class 範例 。
分為不同的區域,及換行
不分為區域,及不換行。



<div class="div_class_A ">111</div>
<div class="div_class_A ">222</div>
111
222

<span class="div_class_A ">111</div>
<span class="div_class_A ">222</div>
111 222

<p class="div_class_A ">111</p>
<p class="div_class_A ">222</p>
111
222

<a class="div_class_A ">111</a>
<a class="div_class_A ">222</a>
111 222

| div | span | css | html |

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

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) 人氣()

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














css 行距 line-height: 20px
css 行距 line-height: 20px
css 行距 line-height: 20px

css 行距 line-height: 50px
css 行距 line-height: 50px
css 行距 line-height: 50px

| css | html | input | style | font-size | font size | font | lowercase | word-spacing | uppercase | uppercase | capitalize | line-through | text-align | text align | text | align | text-transform | text | transform | text-transform | text | transform | text-align: justify | text-align: center | text-align: right | text-align: left | text-align | text align | font-size | font size | font-weight | font weight | small | font-famil | font famil | font |

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

網頁螢幕 寬高






















更新數據

document.body.clientWidth 網頁可見區域寬 | document.body.clientHeight 網頁可見區域高 | document.body.offsetWidth 網頁可見區域寬 | document.body.offsetHeight 網頁可見區域高 | document.body.scrollWidth 網頁正文全文寬 | document.body.scrollHeight 網頁正文全文高 | document.body.scrollTop 網頁被卷去的高 | document.body.scrollLeft 網頁被卷去的高(ie) | document.body.scrollLeft 網頁被卷去的左 | window.screenTop 網頁正文部分上 | window.screenLeft 網頁正文部分左 | window.screen.height 螢幕解析度的高 | window.screen.width 螢幕解析度的寬 | window.screen.availHeight 螢幕可用工作區高度 | window.screen.availWidth 螢幕可用工作區寬度 | window.screen.colorDepth 你的螢幕設置是 | window.screen.deviceXDPI 你的螢幕設置 | document.body.clientWidth BODY 對象寬度 | document.body.clientHeight BODY對象高度 | document.documentElement.clientWidth 可見區域寬度 | document.documentElement.clientHeight 可見區域高度 |

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

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