<button style="cursor: pointer; width: 100px;"> <marquee scrollamount="60">內容</marquee> |
目前分類:輸入及選擇 (4)
- Jul 01 Tue 2014 11:59
input type="button" 按鈕
<input type="button" value="文字">
按鈕 滑鼠游標設定為(一只手)
<input type="button" value="文字" style="cursor:pointer;" />按鈕 滑鼠游標設定為(一只手)
<input type="button" value="文字" style="cursor:pointer;" />按鈕 連結
<input style="cursor: pointer;" type="button" value="文字" onclick="self.location.href='欲連結到的網址';" />按鈕 自訂寬高
<input style="cursor: pointer; height: 50px; width: 100px;" type="button" value="文字" />按鈕 文字 大細
<input style="cursor: pointer; font-size: 25px;" type="button" value="文字" />圖片按鈕
<button style="cursor:pointer;"><img src= "https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s128/site_logo.gif" /></button>| CSS | HTML | button | cursor pointer | span | border | margin | margin | background-color | center | text-align | img src | 按鈕 |
- Jun 25 Wed 2014 00:34
三層橫的下拉選單按鈕
<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 | 三層橫的下拉選單按鈕 |
- Jun 24 Tue 2014 23:50
三層直 的下拉選單按鈕
| <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> |