Google Fonts 提供了超过 600 种的高质量的字体，所有的浏览器都兼容，无需引入 JavaScri […]
CSS家族五大字体
什么是安全字体 安全字体这个概念，也许很多人都不是很熟悉，我们先举个例子： [crayon-67b5b1079 […]
CSS禁止文字自动换行
当中文文字很长的时候（中间没有空格也没有换行符号），不管是IE还是firefox，到达边界都会自动换行。 但是 […]
浏览器兼容性测试工具大全
一、单独安装（相对繁琐，不推荐） 使用IE6 Green、IE7 Standalone 及IE8 安装文件，分 […]
窗口属性
面将窗口的所有属性列表如下： [table=98%][tr][td=1,1,60]<b>属性值&l […]
swf文件及css特效字
<head><meta http-equiv=”content-typeR […]
cssbutton
[code]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML […]
滚动条
<meta http-equiv=”content-type” content= […]
CSS文字特效
CSS文字特效 ■CSS文字特效： 文字陰影效果： Filter:Shadow(color=Value;Di […]
非常精典的表格隔行变色CSS应用
以往在我们进行网页设计制作表格隔行换色的手法通常是通过手工定义或通过代码循环行数来定义颜色，前者的方法通常应用 […]
CSS滤镜
1、概述 好了，下面我们将进入CSS的最精彩的部分–滤镜，它将把我们带入绚丽多姿的多媒体世界。正是 […]
彩色CSS按钮
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<style>.btn { BORDER-RIGHT:#7b9ebd 1px solid; PADDING-RIGHT:2px; BORDER-TOP:#7b9ebd 1px solid; PADDING-LEFT:2px; FONT-SIZE:12px; FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde); BORDER-LEFT:#7b9ebd1px solid; CURSOR:hand; COLOR:black; PADDING-TOP:2px; BORDER-BOTTOM:#7b9ebd 1px solid } .btn1_mouseout { BORDER-RIGHT:#7EBF4F 1px solid; PADDING-RIGHT:2px; BORDER-TOP:#7EBF4F 1px solid; PADDING-LEFT:2px; FONT-SIZE:12px; FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#B3D997); BORDER-LEFT:#7EBF4F1px solid; CURSOR:hand; COLOR:black; PADDING-TOP:2px; BORDER-BOTTOM:#7EBF4F 1px solid } .btn1_mouseover { BORDER-RIGHT:#7EBF4F 1px solid; PADDING-RIGHT:2px; BORDER-TOP:#7EBF4F 1px solid; PADDING-LEFT:2px; FONT-SIZE:12px; FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#CAE4B6); BORDER-LEFT:#7EBF4F1px solid; CURSOR:hand; COLOR:black; PADDING-TOP:2px; BORDER-BOTTOM:#7EBF4F 1px solid } .btn2 { padding:2 4 04; font-size:12px; height:23; background-color:#ece9d8; border-width:1; } .btn3_mouseout { BORDER-RIGHT:#2C59AA 1px solid; PADDING-RIGHT:2px; BORDER-TOP:#2C59AA 1px solid; PADDING-LEFT:2px; FONT-SIZE:12px; FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5); BORDER-LEFT:#2C59AA1px solid; CURSOR:hand; COLOR:black; PADDING-TOP:2px; BORDER-BOTTOM:#2C59AA 1px solid } .btn3_mouseover { BORDER-RIGHT:#2C59AA 1px solid; PADDING-RIGHT:2px; BORDER-TOP:#2C59AA 1px solid; PADDING-LEFT:2px; FONT-SIZE:12px; FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#D7E7FA); BORDER-LEFT:#2C59AA1px solid; CURSOR:hand; COLOR:black; PADDING-TOP:2px; BORDER-BOTTOM:#2C59AA 1px solid } .btn3_mousedown { BORDER-RIGHT:#FFE400 1px solid; PADDING-RIGHT:2px; BORDER-TOP:#FFE400 1px solid; PADDING-LEFT:2px; FONT-SIZE:12px; FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5); BORDER-LEFT:#FFE4001px solid; CURSOR:hand; COLOR:black; PADDING-TOP:2px; BORDER-BOTTOM:#FFE400 1px solid } .btn3_mouseup { BORDER-RIGHT:#2C59AA 1px solid; PADDING-RIGHT:2px; BORDER-TOP:#2C59AA 1px solid; PADDING-LEFT:2px; FONT-SIZE:12px; FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5); BORDER-LEFT:#2C59AA1px solid; CURSOR:hand; COLOR:black; PADDING-TOP:2px; BORDER-BOTTOM:#2C59AA 1px solid } .btn_2k3 { BORDER-RIGHT:#002D96 1px solid; PADDING-RIGHT:2px; BORDER-TOP:#002D96 1px solid; PADDING-LEFT:2px; FONT-SIZE:12px; FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#9DBCEA); BORDER-LEFT:#002D961px solid; CURSOR:hand; COLOR:black; PADDING-TOP:2px; BORDER-BOTTOM: #002D96 1px solid } </style> <body> <button class='btn'>Button</button> <p> </p> <button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'">Button</button> <button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'" disabled>Button</button> <p> <button class='btn2'>Button</button> </p> <p> <button class='btn3_mouseoutonmouseover="this.className='btn3_mouseover'"onmouseout="this.className='btn3_mouseout'"onmousedown="this.className='btn3_mousedown'"onmouseup="this.className='btn3_mouseup'"' onclick="this.blur();">Button</button> </p> <p> <button class='btn_2k3'>2k3 Button</button> </p> </body> |
优秀CSS资源网站
学习 CSS 的朋友总是希望能获得更多的网站，去研究别人的代码，提示自己的能力。下面是一个列表，一个收集了 […]
很酷 CSS特效 – Dashboard
一个简单的教程，教你如何创建一个类似 Dashboard的页面效果。做得很酷，大致来看看过程： 首先将下面的代 […]
完全用CSS实现的中英文双语导航菜单
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Keywords" content="bilingual menu,中英文双语菜单" /> <meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /> <meta content="all" name="robots" /> <meta name="author" content="forestgan" /> <meta name="copyright" content="http://www.forest53.com" /> <title>完全用CSS实现的中英文双语导航菜单</title> <style type="text/css"> a{ color: #FFFF99; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; } #nav{ padding: 10px 10px 0; font-size: 12px; font-weight: bold; margin: 1em 0 0; list-style:none; } #nav li{ float: left; margin-right: 1px; } .bi{ position: relative; z-index: 0; } .bi:hover{ z-index: 99; } .bi:hover span{ visibility: visible; top: 0; left: 0; cursor: pointer; } .bi span{ position: absolute; left: -999em; visibility: hidden; } #nav li a,.bi:hover span{ line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } #nav li a:hover,.bi:hover span{ color: #FFFFFF; background: #DC4E1B; } .bi:hover span{ padding-top: 2px; } #navbar{ background: #DC4E1B; height: 8px; overflow: hidden; clear: both; } </style> <link href="../css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="top"> <ul id="nav"> <li><a class="bi" href="Http://www.junstudio.org/">Home<span>首 页</span></a></li> <li><a class="bi" href="Http://www.junstudio.org/blog">Blog<span>日志</span></a></li> <li><a class="bi" href="Http://www.junstudio.org/guestbook">guestbook<span>留言本</span></a></li> <li><a class="bi" href="Http://www.pickbar.com/">Pickbar<span>精品吧</span></a></li> <li><a class="bi" href="Http://www.fansir.com/">fansir<span>樊SIR</span></a></li> </ul> <div id="navbar"></div> </body> </html> |
CSS Menu – Vertical
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Menu - Vertical</title> <style type="text/css"> body { margin: 0; padding: 30px; background: #FFF; color: #666; } h1 { font: bold 16px Arial, Helvetica, sans-serif; } p { font: 11px Arial, Helvetica, sans-serif; } a { color: #900; text-decoration: none; } a:hover { background: #900; color: #FFF; } /*CSS Code for Menu Begin:*/ /* Root = Vertical, Secondary = Vertical */ ul#navmenu, ul#navmenu li, ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; /*For KHTML*/ list-style: none; } ul#navmenu li { display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; display: block; background: #EEE; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { background: #EEE; color: #666; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 4th Menu */ ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a { background: #EEE; color: #666; } /* 4th Menu Hover */ ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover { background: #CCC; color: #FFF; } ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 160px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; } </style> <script type="text/javascript"> <!-- navHover = function() { var lis = document.getElementById("navmenu").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].onmouseover=function() { this.className+=" iehover"; } lis[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", navHover); --> </script> </head> <body> <h1>CSS Menu - Vertical</h1> <hr /> <ul id="navmenu"> <li><a href="#">Blog</a></li> <li><a href="#">Work +</a> <ul> <li><a href="#">Websites +</a> <ul> <li><a href="#">qrayg</a></li> <li><a href="#">qArcade</a></li> <li><a href="#">qLoM</a></li> <li><a href="#">qDT</a></li> </ul> </li> <li><a href="#">Pen and Ink</a></li> <li><a href="#">Free Interfaces</a></li> </ul> </li> <li><a href="#">Learn +</a> <ul> <li><a href="#">Fireworks +</a> <ul> <li><a href="#">aquaButton</a></li> <li><a href="#">aquaButton2</a></li> <li><a href="#">aquaButton3</a></li> </ul> </li> </ul> </li> </ul> </body> </html> |
CSS Menu – Horizontal
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Menu - Horizontal</title> <style type="text/css"> <!-- @import"dhtml-horiz.css"; --> body { margin: 0; padding: 30px; background: #FFF; color: #666; } h1 { font: bold 16px Arial, Helvetica, sans-serif; } p { font: 11px Arial, Helvetica, sans-serif; } a { color: #900; text-decoration: none; } a:hover { background: #900; color: #FFF; } /*CSS Code for Menu Begin:*/ /* Root = Horizontal, Secondary = Vertical */ ul#navmenu { margin: 0; border: 0 none; padding: 0; width: 500px; /*For KHTML*/ list-style: none; height: 24px; } ul#navmenu li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height: 24px; } ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 24px; left: 0; } ul#navmenu ul li { float: none; /*For Gecko*/ display: block !important; display: inline; /*For IE*/ } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; background: #EEE; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { float: none; background: #EEE; color: #666; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 4th Menu */ ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a { background: #EEE; color: #666; } /* 4th Menu Hover */ ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover { background: #CCC; color: #FFF; } ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 160px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; } </style> <script type="text/JavaScript"> navHover = function() { var lis = document.getElementById("navmenu").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].onmouseover=function() { this.className+=" iehover"; } lis[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", navHover); </script> </head> <body> <h1>CSS Menu - Horizontal</h1> <hr /> <ul id="navmenu"> <li><a href="#">Blog</a></li> <li><a href="#">Work +</a> <ul> <li><a href="#">Websites +</a> <ul> <li><a href="#">Websites +</a> </li> </ul> </li> </ul> </li> </ul> </body> </html> |
CSS下拉菜单演示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS下拉菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ wedisplay: block; width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } --> </style> <script type=text/javascript> <!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"), ""); } } } window.onload=menuFix; //--><!]]> </script> </head> <body> <ul id="nav"> <li><a href="#">产品介绍</a> <ul> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> </ul> </li> <li><a href="#">服务介绍</a> <ul> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二服务二</a></li> <li><a href="#">服务二服务二服务二</a></li> <li><a href="#">服务二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四111</a></li> </ul> </li> <li><a href="#">在线演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">联系联系联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html> |
下拉菜单2
[code] <head> <title>取得当前路径与文件名(PHP)</ti […]
CSS注意事项
为了给标题做标记, 要用<h1>、<h2>、 <h3>、<h4> […]
CSS特效字与CSS滤镜介绍
<link rel=”stylesheet” type=”text/ […]
CSS特效字
[code] <link rel=”stylesheet” type=̶ […]
CSS滚动条
绿色滚动条
|
1 2 3 4 |
浅绿色 <style> body {SCROLLBAR-FACE-COLOR: #dfefcf; SCROLLBAR-HIGHLIGHT-COLOR: #339966; SCROLLBAR-SHADOW-COLOR: #339966; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #112200; SCROLLBAR-TRACK-COLOR: white; SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; } .opacity {FILTER: alpha(opacity=100) </style> |
[crayon-67b5b107 […]
CSS超级技巧大放送合集
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用cs […]
CSS锦囊
在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易 […]