PIXNET Logo登入

421244103

跳到主文

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

部落格全站分類:

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 11月 30 週日 201423:33
<button style="cursor: pointer; width: 100px;">
<marquee scrollamount="60">內容</marquee>
(繼續閱讀...)
文章標籤

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

  • 個人分類:輸入及選擇
▲top
  • 7月 01 週二 201411:59
  • input type="button" 按鈕

<input type="button" value="文字">

按鈕 滑鼠游標設定為(一只手)<input type="button" value="文字"  style="cursor:pointer;" />
(繼續閱讀...)
文章標籤

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

  • 個人分類:輸入及選擇
▲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
1

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

動態訂閱

文章精選

文章搜尋

誰來我家

參觀人氣

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