加入城市,听原创电台,写情感文字,分享你的一切。
您需要 登录 才可以下载或查看,没有帐号?注册居民
x
下面是导航菜单demo:
Demo:
这里我能上传图片了,原本是可以实时演示的,但是我不知道怎么弄。
下面的是用到的图片,分别对应着上面菜单的颜色:
red:
;
blue:
;
green:
;
orange:
purple:
。
终于传完了。接着分别是CSS和html代码:
css:
<style type="text/css">
.glossymenu{ position: relative; padding: 0 0 0 34px; margin: 0 auto 0 auto; background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/ height: 46px; list-style: none; }
.glossymenu li{ float:left; }
.glossymenu li a{ float: left; display: block; color:#000; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold; padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ height: 46px; line-height: 46px; text-align: center; cursor: pointer; }
.glossymenu li a b{ float: left; display: block; padding: 0 24px 0 8px; /*Padding of menu items*/ }
.glossymenu li.current a, .glossymenu li a:hover{ color: #fff; background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/ background-position: left; }
.glossymenu li.current a b, .glossymenu li a:hover b{ color: #fff; background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/ }
</style>
html代码:(用url代替#,而粗体部分是菜单内容)
。
最后是图片打包,点击下载:
css菜单图片.rar
(15.72 KB, 下载次数: 219)
|