PIXNET Logo登入

421244103

跳到主文

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

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

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 6月 25 週三 201423:46
  • link 導入 css 檔案

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)

  • 個人分類:HTML-導入檔案 link css js
▲top
  • 6月 25 週三 201410:40
  • display:block

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)

  • 個人分類:visibility
▲top
  • 6月 25 週三 201407:54
  • 可收合面板 CSS + script


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

  • 個人分類:可收合面板
▲top
  • 6月 25 週三 201400:34
  • 三層橫的下拉選單按鈕

  • 主 頁
  • 講道重溫
    • 主日 講道重溫
      • 講道重溫 2014
      • 講道重溫 2013
        • 2013 MP4
        • 2013 MP3
      • 講道重溫 2012
    • 信仰綱要錄音
      • 信仰綱要 第1課
      • 信仰綱要 第2課
      • 信仰綱要 第3課
      • 信仰綱要 第5課
  • 教會簡介
    • 十載點滴
    • 同工感言
    • 我們的夢
    • 牧者十載情
  • 照 片
    • 人 物
  • 聚會時間
  • 聯絡我們
/* 加載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)

  • 個人分類:輸入及選擇
▲top
  • 6月 24 週二 201423:50
  • 三層直 的下拉選單按鈕


  • 主 頁
    • 包德寧牧師
  • 講道重溫
    • 主日 講道重溫
      • 講道重溫 2014
      • 講道重溫 2013
        • 2013 MP4
        • 2013 MP3
      • 講道重溫 2012
    • 信仰綱要錄音
      • 信仰綱要 第1課
      • 信仰綱要 第2課
      • 信仰綱要 第3課
      • 信仰綱要 第5課
  • 教會簡介
    • 十載點滴
    • 同工感言
    • 我們的夢
    • 牧者十載情
  • 照 片
    • 人 物
  • 聚會時間
  • 聯絡我們
<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)

  • 個人分類:輸入及選擇
▲top
  • 6月 24 週二 201421:34
  • 可收合面板 CSS



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

  • 個人分類:可收合面板
▲top
  • 6月 03 週二 201421:53
  • 符號 ASCII

⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞
ⅠⅡ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ Ⅻ
←↑→↓↔↕↖↗↘↙↚↛↜↝↞↟↠↡↢↣↤↥↦↧↨↩↪↫↬↭↮↯↰↱↲↳↴↵↶↷↸↹↺↻↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇⇈⇉⇊⇋⇌⇍⇎⇏⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇚⇛⇜⇝⇞⇟⇠⇡⇢⇣⇤⇥⇦⇧⇨⇩⇪
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳
⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂⒃⒄⒅⒆⒇
⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓⒔⒕⒖⒗⒘⒙⒚⒛
⒜⒝⒞⒟⒠⒡⒢⒣⒤⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵
ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏ
ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ⓪
⓫⓬⓭⓮⓯⓰⓱⓲⓳⓴⓵⓶⓷⓸⓹⓺⓻⓼⓽⓾
─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏ ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟ ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯ ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿ ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
═║╒╓╔╕╖╗╘╙╚╛╜╝╞╟╠╡╢╣╤╥╦╧╨╩╪╫╬
╭╮╯╰╱╲╳╴╵╶╷╸╹╺╻╼╽╾╿
▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏▐░▒▓▔▕▖▗▘▙▚▛▜▝▞▟■□▢▣▤▥▦▧▨▩▪▫▬▭▮▯▰▱▲△▴▵▶▷▸▹►▻▼▽▾▿◀◁◂◃◄◅◆◇◈◉◊○◌◍◎●◐◑◒◓◔◕◖◗◘◙◚◛◜◝◞◟◠◡◢◣◤◥◦◧◨◩◪◫◬◭◮◯◰◱◲◳◴◵◶◷◸◹◺◻◼◽◾◿☀☁☂☃☄★☆☇☈☉☊☋☌☍☎☏☐☑☒☓☔☕☖☗☘☙☚☛☜☝☞☟☠☡☢☣☤☥☦☧☨☩☪☫☬☭☮☯☰☱☲☳☴☵☶☷☸☹☺☻☼☽☾☿♀♁♂♃♄♅♆♇♈♉♊♋♌♍♎♏♐♑♒♓♔♕♖♗♘♙♚♛♜♝♞♟♠♡♢♣♤♥♦♧♨♩♪♫♬♭♮♯
✁✂✃✄
✆✇✈✉✌✍✎✏✐✑✒
✓✔✕✖✗✘✙✚✛✜✝✞✟✠✡✢✣✤✥✦✧✨✩✪✫✬✭✮✯✰✱✲✳✴✵✶✷✸✹✺✻✼✽✾✿❀❁❂❃❄❅❆❇❈❉❊❋❌❍❎❏❐❑❒❓❔❕❖❗❘❙❚❛❜❝❞❟❠❡❢❣❤❥❦❧
❶❷❸❹❺❻❼❽❾❿➀➁➂➃➄➅➆➇➈➉➊➋➌➍➎➏➐➑➒➓➔➕➖➗➘➙➚➛➜➝➞➟➠➡➢➣➤➥➦➧➨➩➪➫➬➭➮➯➰➱➲➳➴➵➶➷➸➹➺➻➼➽➾
《》「」『』【】〒〓〔〕〖〗〘〙〚〛〜〝〞〟〠〡〢〣〤〥〦〧〨〩〪〭〮〯〫〬
㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟
㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉㊊㊋㊌㊍㊎㊏㊐㊑㊒㊓㊔㊕㊖㊗㊘㊙㊚㊛㊜㊝㊞㊟㊠㊡㊢㊣㊤㊥㊦㊧㊨㊩㊪㊫㊬㊭㊮㊯㊰㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿㋀㋁㋂㋃㋄㋅㋆㋇㋈㋉㋊㋋
㏠㏡㏢㏣㏤㏥㏦㏧㏨㏩㏪㏫㏬㏭㏮㏯㏰㏱㏲㏳㏴㏵㏶㏷㏸㏹㏺㏻㏼㏽㏾
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~⦅⦆。「」←↑→↓■○
(繼續閱讀...)
文章標籤

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

  • 個人分類:ASCII
▲top
  • 5月 18 週日 201409:32
  • float 圖案浮動


#leftfloat { float:left; } #rightfloat { float:right; } 這個例子是用來顯示
img 內加入 style="float:left"
會如何影響整個頁面的呈現。在這裡,
圖案浮動於左邊
(繼續閱讀...)
文章標籤

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

  • 個人分類:float
▲top
  • 5月 17 週六 201423:07
  • padding 四個邊留白


padding-top (上) padding-right (右) padding-bottom (下) padding-left (左)padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
padding:[上方與下方距離] [左方與右方距離]
(繼續閱讀...)
文章標籤

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

  • 個人分類:padding
▲top
  • 5月 17 週六 201422:43
  • margin 框架移位

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)

  • 個人分類:margin-top
▲top
«1...3458»

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)三層橫的下拉選單按鈕

動態訂閱

文章精選

文章搜尋

誰來我家

參觀人氣

  • 本日人氣:
  • 累積人氣: