Saivan's Blog-
-=WEB标准的研究,开发=-
Home
Navigation
Comment
Search
Links
Other
为达到最佳的视觉及浏览效果,请您使用
Firefox
或
Opera
来浏览本站!
My DouBan
时尚CSS菜单,很酷
2005-9-26
时尚CSS菜单, 很特别,不用图片,做出圆角效果,而且加上了滑动效果,要好好研究一下。
在线运行演示
<!DOCTYPE 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=gb2312" /> <title>时尚CSS菜单</title> </head> <style type="text/css"> #navigation {background:transparent; margin:0 auto; height:3em; overflow:hidden; background:#bbb;} #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; overflow:hidden; font-size:1px;} .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;} .red {background:#c00;} .orange {background:#f90;} .yellow {background:#b8b800;} .green {background:#090;} .blue {background:#00c;} .indigo {background:#309;} .violet {background:#c6c;} </style> <body> <div id="navigation"> <ul> <li> <a class="menu" href="#"><b class="snazzy"><span class="boxcontent red">item #1</span> <b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b></b></a> </li> <li> <a class="menu" href="#"><b class="snazzy"><span class="boxcontent orange">item #2</span> <b class="b4 orange"></b><b class="b3 orange"></b><b class="b2 orange"></b><b class="b1"></b></b></a> </li> <li> <a class="menu" href="#"><b class="snazzy"><span class="boxcontent yellow">item #3</span> <b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b></b></a> </li> <li> <a class="menu" href="#"><b class="snazzy"><span class="boxcontent green">item #4</span> <b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b></b></a> </li> <li> <a class="menu" href="#"><b class="snazzy"><span class="boxcontent blue">item #5</span> <b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class="b1"></b></b></a> </li> <li> <a class="menu" href="#"><b class="snazzy"><span class="boxcontent indigo">item #6</span> <b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b></b></a> </li> <li> <a class="menu" href="#"><b class="snazzy"><span class="boxcontent violet">item #7</span> <b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b></b></a> </li> </ul> </div> </body> </html>
Post at:
WEB Standard
全部共有[1]条日志,每页显示(1)篇日志
Comment View ({Count})
{CommentAuthor}
{CommentTime Format="yyyy-mm-dd"}
{CommentContent}
{CommentUrl}{CommentEmail}{CommentIp}
(C) Copyright 2005
Saivan's Blog
, Power by
5DBlog
, and this Style design by Saivan Chan.