狼客门

中国传统色彩名录 - [代码]

████ 橘黄：柑橘的黄色。
████ 橙黄：同上。（quester注：Y100 M50 感觉的色彩，现代感比较强。广告上用得较多）
████ 橘红：柑橘皮所呈现的红色。
████ 姜黄：中药名。别名黄姜。为姜科植物姜黄的根茎。又指人脸色不正,呈黄白色
████ 缃色：浅黄色。
████ 橙色：界于红色和黄色之间的混合色。
████ 茶色：一种比栗色稍红的棕橙色至浅棕色
████ 驼色：一种比咔叽色稍红而微淡、比肉桂色黄而稍淡和比核桃棕色黄而暗的浅黄棕色

阅读全文 | 评论0 | 编辑 | 分享 0
超漂亮的仿MAC的CSS菜单 - [代码]

阅读全文 | 评论0 | 编辑 | 分享 0
snazzy border menus 上下TAB菜单 - [代码]

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效,无图片圆角TAB菜单.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Stu Nicholls | CSSplay | Another snazzy menu</title> <style type="text/css"> #outer {display:block; position:relative; background:#eee; padding:2em; text-align:center;} #outer h2 {margin-bottom:1em;} #navigation {background:transparent; margin:0 auto; height:3em; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } #navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;} #navigation li {display:block; float:left; margin:0 1px;} .snazzy {background:transparent;} .snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;} .b1, .b2, .b3, .b4 {display:block; font-size:1px; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } .b1, .b2, .b3 {height:1px;} .b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;} .b1 {margin:0 5px; background:#fff;} .b2 {margin:0 3px; border-width:0 2px;} .b3 {margin:0 2px;} .b4 {height:2px; margin:0 1px;} .boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;} a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;} a.menu:hover {background:transparent; cursor:pointer;} a.menu:hover span {padding-top:10px; background:#888;} a:menu:hover b {background:#888;} .red {background:#c00;} .orange {background:#f90;} .yellow {background:#b8b800;} .green {background:#090;} .blue {background:#00c;} .indigo {background:#309;} .violet {background:#c6c;} .grey {background:#888;} a:hover b.red {background:#888;} a:hover b.orange {background:#888;} a:hover b.yellow {background:#888;} a:hover b.green {background:#888;} a:hover b.blue {background:#888;} a:hover b.indigo {background:#888;} a:hover b.violet {background:#888;} .active {padding-top:10px; background:#888; cursor:default;} #navigation2 {clear:both; background:transparent; margin:0 auto; height:3em; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } #navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;} #navigation2 li {display:block; float:left; margin:0 1px;} .pad {display:block; height:1em; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;} a.menu2:hover {background:transparent; cursor:pointer;} a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;} a.menu2:hover .pad {height:0.2em;} </style> </head> <body> <div id="wrapper"> <div id="info"> <h2>More snazzy border menus</h2> <div id="outer"> <div id="navigation"> <ul> <li> <a class="menu" href="#nogo">item #1 </a> </li> <li> <a class="menu" href="#nogo">item #2 </a> </li> <li> <a class="menu" href="#nogo">item #3 </a> </li> <li> <a class="menu" href="#nogo">item #4 </a> </li> <li> <a class="menu" href="#nogo">item #5 </a> </li> <li> <a class="menu" href="#nogo">item #6 </a> </li> <li> <a class="menu" href="#nogo">item #7 </a> </li> </ul> </div>  <h3>TAB DOWN</h3> <h3>TAB UP</h3> <div id="navigation2"> <ul> <li> <a class="menu2" href="#nogo">item #1 </a> </li> <li> <a class="menu2" href="#nogo">item #2 </a> </li> <li> <a class="menu2" href="#nogo">item #3 </a> </li> <li> <a class="menu2" href="#nogo">item #4 </a> </li> <li> <a class="menu2" href="#nogo">item #5 </a> </li> <li> <a class="menu2" href="#nogo">item #6 </a> </li> <li> <a class="menu2" href="#nogo">item #7 </a> </li> </ul> </div>  </div>  </div>    </div>  </body> </html>

阅读全文 | 评论0 | 编辑 | 分享 0
完全用CSS实现的中英文双语导航菜单 - [代码]

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
这是一个完全用CSS实现的中英文双语导航菜单，无脚本和图片，初始时，菜单语言是英文，当鼠标悬停在菜单上时，其变成中文，当然你也可以反过来做,缺点：因为中英文字的长度关系，不能实现自适应宽度，只能固定宽度。
<!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=utf-8" /> <meta name="Keywords" content="bilingual menu,中英文双语菜单" /> <meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /> <meta content="all" name="robots" /> <meta http-equiv="pragma" content="no-cache" /> <meta name="author" content="forestgan" /> <meta name="copyright" content="forestgan" /> <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> </head> <body> <div id="top"> <ul id="nav"> <li><a class="bi" href="index.html">Home首　页</a></li> <li><a class="bi" href="about.html">About us关于我们</a></li> <li><a class="bi" href="products.html">Products产品展示</a></li> <li><a class="bi" href="services.html">Services售后服务</a></li> <li><a class="bi" href="contact.html">Contact联系我们</a></li> </ul> <div id="navbar"></div> </div> <noscript>google-analytics</noscript> <noscript>stat.</noscript> </body> </html>

阅读全文 | 评论0 | 编辑 | 分享 0
鼠标移过放大的JS动态菜单 - [代码]

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>www.lanrentuku.com</title> <style type="text/css"> html { overflow: hidden; } body { background: #222; } #menu { padding: 10px; background: #000; height: 300px; width: 400px; } #menu a { display:block; text-decoration:none; font-family: arial, helvetica, verdana, sans-serif; white-space: nowrap; } </style> <script type="text/javascript"> </script> </head> <body> <div id="menu"> <a href="http://del.icio.us/tag/scripting">scripting</a> <a href="http://del.icio.us/tag/javascript">javascript</a> <a href="http://del.icio.us/tag/web">web</a> <a href="http://del.icio.us/tag/dhtml">dhtml</a> <a href="http://del.icio.us/tag/css">css</a> <a href="http://del.icio.us/tag/ajax">ajax</a> <a href="http://del.icio.us/tag/programming">programming</a> <a href="http://del.icio.us/tag/design">design</a> <a href="http://del.icio.us/tag/webdesign">webdesign</a> <a href="http://del.icio.us/tag/html">html</a> <a href="http://del.icio.us/tag/dom">dom</a> <a href="http://del.icio.us/tag/webdev">webdev</a> <a href="http://del.icio.us/tag/reference">reference</a> <a href="http://del.icio.us/tag/tools">tools</a> <a href="http://del.icio.us/tag/tutorial">tutorial</a> <a href="http://del.icio.us/tag/xmlhttprequest">xmlhttprequest</a> <a href="http://del.icio.us/tag/menu">menu</a> <a href="http://del.icio.us/tag/xml">xml</a> <a href="http://del.icio.us/tag/library">library</a> <a href="http://del.icio.us/tag/development">development</a> </div> </body> </html>

阅读全文 | 评论0 | 编辑 | 分享 0

共47页第一页上一页 1 2 3 4 5 6 7 8 9 10 下一页最后一页

中国传统色彩名录 - [代码]

超漂亮的仿MAC的CSS菜单 - [代码]

snazzy border menus 上下TAB菜单 - [代码]

完全用CSS实现的中英文双语导航菜单 - [代码]

鼠标移过放大的JS动态菜单 - [代码]

最近更新

最新评论

目录

狼 客 门

中国传统色彩名录 - [代码]

超漂亮的仿MAC的CSS菜单 - [代码]

snazzy border menus 上下TAB菜单 - [代码]

完全用CSS实现的中英文双语导航菜单 - [代码]

鼠标移过放大的JS动态菜单 - [代码]

最近更新

最新评论

目录

狼客门