背景圓角
不同瀏覽器 用不同語法 ,所以在 CSS 或 style 內加曬三個語法。
CSS3 border-radius
Mozilla -moz-border-radius
WebKit -webkit-border-radius

方框 及 底色
<div style="-moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px;background-color: rgba(255, 255, 0, 0.3); height: 300px; text-align: center; width: 80%;">
xxxxxx</div>

-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
四個角為 圓角

background-color: rgba(255, 255, 0, 0.3);
rgba(red 值, green 值, blue 值, alpha 值)
alpha 值 0.3 不透明度 30%

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


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

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

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

input { font-size:20px } #aa123 table { font-size:26px; -moz-border-radius: 25px; -webkit-border-radius: 25px; background-color: rgba(255, 255, 0, 0.3); border-radius: 25px; height: 125px; text-align: center; width: 125px; }

<input type="text" size="40" value="123456" />

<input onclick="this.select()" size="40" type="text" value="123456" />

<input onmouseover="this.select()" size="40" type="text" value="123456" />;


<input onchange="this.select()" onclick="this.select()" size="40" type="text" value="123456" />

<input size="40" type="text" value="123456" maxlength="10"/>

<input size="40" type="number" value="123456"  />

<form>
 <input type="text">
 <input type="reset" value="清除表單">
</form>
  


<input size="40" type="password" value="123456"  />

<input onfocus="this.value='焦點在此'"
       onblur="this.value='焦點移開'"  size="40" type="text" value="焦點移開" />

<input  size="40" type="text" value="readonly" readonly />

<input disabled="disabled"  size="40" type="text" value="disabled" />

<input type="color" >

<input type="date">

<input type="datetime-local">

<form action="demo_form.asp">
E-mail: <input type="email" />
  <input type="submit" />
</form>
E-mail:


<input type="month" >

<form action="demo_form.asp">
Quantity (between 1 and 5): <input max="5" min="1" name="quantity" type="number" />
  <input type="submit" />
Quantity (between 1 and 5):


Points: 0<input type="range" name="points" min="1" max="100">100 Points: 0100

<input type="time" >

<input type="week" >

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

滑鼠游標設定 style="cursor:help;" 或 css aa{cursor:help}
值描述url需使用的自定义光标的 URL。
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。default默认光标(通常是一个箭头)auto默认。浏览器设置的光标。crosshair光标呈现为十字线。pointer光标呈现为指示链接的指针(一只手)move此光标指示某对象可被移动。e-resize此光标指示矩形框的边缘可被向右(东)移动。ne-resize此光标指示矩形框的边缘可被向上及向右移动(北/东)。nw-resize此光标指示矩形框的边缘可被向上及向左移动(北/西)。n-resize此光标指示矩形框的边缘可被向上(北)移动。se-resize此光标指示矩形框的边缘可被向下及向右移动(南/东)。sw-resize此光标指示矩形框的边缘可被向下及向左移动(南/西)。s-resize此光标指示矩形框的边缘可被向下移动(南)。w-resize此光标指示矩形框的边缘可被向左移动(西)。text此光标指示文本。wait此光标指示程序正忙(通常是一只表或沙漏)。help此光标指示可用的帮助(通常是一个问号或一个气球)。

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

style="background-image: url('https://lh6.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/w136-h76-no/site_logo.gif'); background-repeat: repeat; height: 200px; width: 400px;"========================================================
style="background-image: url('https://lh6.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/w136-h76-no/site_logo.gif');background-repeat:repeat-y; height: 200px; width: 400px;"

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

ColorHTML/CSS NameHex Code
#RRGGBB
Decimal Code
(R,G,B)
Black#000000(0,0,0)White#FFFFFF(255,255,255)Red#FF0000(255,0,0)Lime#00FF00(0,255,0)Blue#0000FF(0,0,255)Yellow#FFFF00(255,255,0)Cyan / Aqua#00FFFF(0,255,255)Magenta / Fuchsia#FF00FF(255,0,255)Silver#C0C0C0(192,192,192)Gray#808080(128,128,128)Maroon#800000(128,0,0)Olive#808000(128,128,0)Green#008000(0,128,0)Purple#800080(128,0,128)Teal#008080(0,128,128)Navy#000080(0,0,128)
Color Color Name Hex Code
#RRGGBB
Decimal Code
R,G,B
Color Color NameHex Code
#RRGGBB
Decimal Code
R,G,B
maroon #800000 (128,0,0) blue violet #8A2BE2 (138,43,226) dark red #8B0000 (139,0,0) indigo #4B0082 (75,0,130) brown #A52A2A (165,42,42) dark slate blue #483D8B (72,61,139) firebrick #B22222 (178,34,34) slate blue #6A5ACD (106,90,205) crimson #DC143C (220,20,60) medium slate blue #7B68EE (123,104,238) red #FF0000 (255,0,0) medium purple #9370DB (147,112,219) tomato #FF6347 (255,99,71) dark magenta #8B008B (139,0,139) coral #FF7F50 (255,127,80) dark violet #9400D3 (148,0,211) indian red #CD5C5C (205,92,92) dark orchid #9932CC (153,50,204) light coral #F08080 (240,128,128) medium orchid #BA55D3 (186,85,211) dark salmon #E9967A (233,150,122) purple #800080 (128,0,128) salmon #FA8072 (250,128,114) thistle #D8BFD8 (216,191,216) light salmon #FFA07A (255,160,122) plum #DDA0DD (221,160,221) orange red #FF4500 (255,69,0) violet #EE82EE (238,130,238) dark orange #FF8C00 (255,140,0) magenta / fuchsia #FF00FF (255,0,255) orange #FFA500 (255,165,0) orchid #DA70D6 (218,112,214) gold #FFD700 (255,215,0) medium violet red #C71585 (199,21,133) dark golden rod #B8860B (184,134,11) pale violet red #DB7093 (219,112,147) golden rod #DAA520 (218,165,32) deep pink #FF1493 (255,20,147) pale golden rod #EEE8AA (238,232,170) hot pink #FF69B4 (255,105,180) dark khaki #BDB76B (189,183,107) light pink #FFB6C1 (255,182,193) khaki #F0E68C (240,230,140) pink #FFC0CB (255,192,203) olive #808000 (128,128,0) antique white #FAEBD7 (250,235,215) yellow #FFFF00 (255,255,0) beige #F5F5DC (245,245,220) yellow green #9ACD32 (154,205,50) bisque #FFE4C4 (255,228,196) dark olive green #556B2F (85,107,47) blanched almond #FFEBCD (255,235,205) olive drab #6B8E23 (107,142,35) wheat #F5DEB3 (245,222,179) lawn green #7CFC00 (124,252,0) corn silk #FFF8DC (255,248,220) chart reuse #7FFF00 (127,255,0) lemon chiffon #FFFACD (255,250,205) green yellow #ADFF2F (173,255,47) light golden rod yellow #FAFAD2 (250,250,210) dark green #006400 (0,100,0) light yellow #FFFFE0 (255,255,224) green #008000 (0,128,0) saddle brown #8B4513 (139,69,19) forest green #228B22 (34,139,34) sienna #A0522D (160,82,45) lime #00FF00 (0,255,0) chocolate #D2691E (210,105,30) lime green #32CD32 (50,205,50) peru #CD853F (205,133,63) light green #90EE90 (144,238,144) sandy brown #F4A460 (244,164,96) pale green #98FB98 (152,251,152) burly wood #DEB887 (222,184,135) dark sea green #8FBC8F (143,188,143) tan #D2B48C (210,180,140) medium spring green #00FA9A (0,250,154) rosy brown #BC8F8F (188,143,143) spring green #00FF7F (0,255,127) moccasin #FFE4B5 (255,228,181) sea green #2E8B57 (46,139,87) navajo white #FFDEAD (255,222,173) medium aqua marine #66CDAA (102,205,170) peach puff #FFDAB9 (255,218,185) medium sea green #3CB371 (60,179,113) misty rose #FFE4E1 (255,228,225) light sea green #20B2AA (32,178,170) lavender blush #FFF0F5 (255,240,245) dark slate gray #2F4F4F (47,79,79) linen #FAF0E6 (250,240,230) teal #008080 (0,128,128) old lace #FDF5E6 (253,245,230) dark cyan #008B8B (0,139,139) papaya whip #FFEFD5 (255,239,213) aqua #00FFFF (0,255,255) sea shell #FFF5EE (255,245,238) cyan #00FFFF (0,255,255) mint cream #F5FFFA (245,255,250) light cyan #E0FFFF (224,255,255) slate gray #708090 (112,128,144) dark turquoise #00CED1 (0,206,209) light slate gray #778899 (119,136,153) turquoise #40E0D0 (64,224,208) light steel blue #B0C4DE (176,196,222) medium turquoise #48D1CC (72,209,204) lavender #E6E6FA (230,230,250) pale turquoise #AFEEEE (175,238,238) floral white #FFFAF0 (255,250,240) aqua marine #7FFFD4 (127,255,212) alice blue #F0F8FF (240,248,255) powder blue #B0E0E6 (176,224,230) ghost white #F8F8FF (248,248,255) cadet blue #5F9EA0 (95,158,160) honeydew #F0FFF0 (240,255,240) steel blue #4682B4 (70,130,180) ivory #FFFFF0 (255,255,240) corn flower blue #6495ED (100,149,237) azure #F0FFFF (240,255,255) deep sky blue #00BFFF (0,191,255) snow #FFFAFA (255,250,250) dodger blue #1E90FF (30,144,255) black #000000 (0,0,0) light blue #ADD8E6 (173,216,230) dim gray / dim grey #696969 (105,105,105) sky blue #87CEEB (135,206,235) gray / grey #808080 (128,128,128) light sky blue #87CEFA (135,206,250) dark gray / dark grey #A9A9A9 (169,169,169) midnight blue #191970 (25,25,112) silver #C0C0C0 (192,192,192) navy #000080 (0,0,128) light gray / light grey #D3D3D3 (211,211,211) dark blue #00008B (0,0,139) gainsboro #DCDCDC (220,220,220) medium blue #0000CD (0,0,205) white smoke #F5F5F5 (245,245,245) blue #0000FF (0,0,255) white #FFFFFF (255,255,255) royal blue #4169E1 (65,105,225) | CSS | HTML | style | Color Code | Color | Color | 顏色對表 |

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

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

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


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

/* 加載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) 人氣()


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

Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲,請立即離開。

已滿十八歲者,亦請勿將內容提供給未成年人士。