当柳上原的风吹向天际的时候...

真正的快乐来源于创造

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks
程序员如果没有美工的帮助只能在网上找些现成的图片来用,比较费事。我闲逛时偶遇一图片做菜单背景不错,遂拿下来做了一个,效果如下:

上面是短版的,下面是长版的,根据需要取用吧。

菜单样式定义CSS代码如下:
        /*这个是窄的*/
        #menubar ul
{
            margin
:0;
            padding
:0;
            list-style-type
:none;
        
}
        #menubar li
{
            float
:left;
            dispaly
:block;            
        
}
        #menubar li a
{
            width
:85px;
            height
:25px;
            line-height
:25px;

            font-size
:14px; 

            border-bottom
:1px solid #d1d1d1; 
            
            color
:#333333;
            text-decoration
:none;
            text-align
:center;
            font-weight
:bold;
            background
:#ffffff url(img/menus.gif) 0px -45px;
        
}

        #menubar li a:hover
{
            font-size
:15px; 
            color
:#0086d2;
            background
:#ffffff url(img/menus.gif) 0px 0px;
                
            border-bottom
:0px solid #d1d1d1; 
            text-decoration
:underline;
        
}
       
        /*注意下面是宽的*/
        #menubarBig ul
{
            margin
:0;
            padding
:0;
            list-style-type
:none;
        
}
        #menubarBig li
{
            float
:left;
            dispaly
:block;            
        
}
        #menubarBig li a
{
            width
:116px;
            height
:25px;
            line-height
:25px;

            font-size
:14px; 

            border-bottom
:1px solid #d1d1d1; 
            
            color
:#333333;
            text-decoration
:none;
            text-align
:center;
            font-weight
:bold;
            background
:#ffffff url(img/menus.gif) 0px -128px;
        
}

        #menubarBig li a:hover
{
            font-size
:15px; 
            color
:#0086d2;
            background
:#ffffff url(img/menus.gif) 0px -88px;
                
            border-bottom
:0px solid #d1d1d1; 
            text-decoration
:underline;
        
}

切换的秘密在于图片左上角位置的变化,大家用图片处理软件打开menus.gif对照研究一下就明白了。


全体代码下载:
http://www.blogjava.net/Files/heyang/CSSMenu20090823113544.rar

posted on 2009-08-23 11:33 何杨 阅读(918) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: