背景圓角 不同瀏覽器 用不同語法 ,所以在 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)
人氣()
c8cc168 發表在
痞客邦
留言(0)
人氣()
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)
人氣()
| Color | HTML/CSS Name | Hex 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 Name | Hex 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)
人氣()
| <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)
人氣()
| <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)
人氣()