春风博客

春天里,百花香...

导航

<2008年10月>
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

四种CSS链接按钮示例

代码下载:
http://www.blogjava.net/Files/sitinspring/CssLinkButton20081008210352.rar



背景色切换链接按钮CSS代码:
/*2008.10.08*/

#linkButtonDiv1 ul
{
    margin
:0;
    padding
:0;
    list-style-type
:none;
}


#linkButtonDiv1 li a
{
    width
:100px;
    height
:20px;
    
    display
:bolck;    
    font-size
: 16px; 
        
    margin
:5px;
    
    border
: 1px solid #000000; 
    
    padding
:5px;
    
    color
:#000000;
    background-color
:#94b8e9;
    text-decoration
:none;
    text-align
:center;
}


#linkButtonDiv1 li a:hover
{
    color
:#ffffff;
    background-color
:#336699;
    text-decoration
:underline;
}



背景图片切换链接按钮CSS代码:
/*2008.10.08*/

#linkButtonDiv2 ul
{
    margin
:0;
    padding
:0;
    list-style-type
:none;
}


#linkButtonDiv2 li a
{
    width
:100px;
    height
:20px;
    
    display
:bolck;    
    font-size
: 16px; 
        
    margin
:5px;
    
    border
: 1px solid #000000; 
    
    padding
:5px;
    
    color
:#000000;
    background
:url(../img/bg-0314.gif);
    text-decoration
:none;
    text-align
:center;
}


#linkButtonDiv2 li a:hover
{
    color
:#ffffff;
    background
:url(../img/bg-0315.gif);
    text-decoration
:underline;
}



背景色突起效果按钮示例:
/*2008.10.08*/

#linkButtonDiv3 ul
{
    margin
:0;
    padding
:0;
    list-style-type
:none;
}


#linkButtonDiv3 li a
{
    width
:100px;
    height
:20px;
    
    display
:bolck;    
    font-size
: 16px; 
        
    margin
:5px;
    
    padding
:5px;
    
    color
:#8d4f10;
    background
:#efb57c;
    
    text-decoration
:none;
    text-align
:center;
    
    border
:2px outset #efb57c;
}


#linkButtonDiv3 li a:hover
{
    font-weight
:bold;
    color
:#ffffff;
    background
:#daa670;
    text-decoration
:underline;
    
    border
:2px outset #daa670;
}




一张背景图片左右切换按钮CSS代码:
/*2008.10.08*/

#linkButtonDiv4 ul
{
    margin
:0;
    padding
:0;
    list-style-type
:none;
}


#linkButtonDiv4 li a
{
    width
:114px;
    height
:24px;
    
    display
:bolck;    
    font-size
: 12px; 
        
    margin
:5px;
    
    padding
:5px;
    
    color
:#000000;
    background
:url(../img/buttonbg.jpg) norepeat left top;
    text-decoration
:none;
    text-align
:center;
}


#linkButtonDiv4 li a:hover
{
    font-weight
:bold;
    color
:#ffffff;
    background-position
:right top;
    text-decoration
:underline;
}



页面HTML代码:
<body bgcolor="#cccccc">
    
<div id="bodyDiv">
        
<div id="header">
            
<jsp:include page="/web/page/branch/header.jsp"/>
        
</div>
        
<div id="menubar">
            
<jsp:include page="/web/page/branch/menubar.jsp"/>
        
</div>
        
<div id="content">
            
<table border="0" width="100%" height="100%" style="table-layout:fixed;word-wrap:break-word;word-break;break-all;">
                
<tr>
                    
<td valign="top" width="25%">
                        
<div class="contentTitle">
                            
<strong>背景色切换链接按钮示例</strong> 
                        
</div>
                        
<div id="linkButtonDiv1" class="contentConcept">
                            
<ul>
                                
<li><href="#">链接按钮一</a></li>
                                
<li><href="#">链接按钮二</a></li>
                                
<li><href="#">链接按钮三</a></li>
                                
<li><href="#">链接按钮四</a></li>
                                
<li><href="#">链接按钮五</a></li>
                                
<li><href="#">链接按钮六</a></li>
                            
</ul>
                        
</div>
                    
</td>
                    
                    
<td valign="top" width="25%">
                        
<div class="contentTitle">
                            
<strong>背景图片切换链接按钮示例</strong> 
                        
</div>
                        
<div id="linkButtonDiv2" class="contentConcept">
                            
<ul>
                                
<li><href="#">链接按钮一</a></li>
                                
<li><href="#">链接按钮二</a></li>
                                
<li><href="#">链接按钮三</a></li>
                                
<li><href="#">链接按钮四</a></li>
                                
<li><href="#">链接按钮五</a></li>
                                
<li><href="#">链接按钮六</a></li>
                            
</ul>
                        
</div>
                    
</td>
                    
                    
<td valign="top" width="25%">
                        
<div class="contentTitle">
                            
<strong>背景色突起效果按钮示例</strong> 
                        
</div>
                        
<div id="linkButtonDiv3" class="contentConcept">
                            
<ul>
                                
<li><href="#">链接按钮一</a></li>
                                
<li><href="#">链接按钮二</a></li>
                                
<li><href="#">链接按钮三</a></li>
                                
<li><href="#">链接按钮四</a></li>
                                
<li><href="#">链接按钮五</a></li>
                                
<li><href="#">链接按钮六</a></li>
                            
</ul>
                        
</div>
                    
</td>
                    
                    
<td valign="top" width="25%">
                        
<div class="contentTitle">
                            
<strong>一张背景图片左右切换按钮示例</strong> 
                        
</div>
                        
<div id="linkButtonDiv4" class="contentConcept">
                            
<ul>
                                
<li><href="#">链接按钮一</a></li>
                                
<li><href="#">链接按钮二</a></li>
                                
<li><href="#">链接按钮三</a></li>
                                
<li><href="#">链接按钮四</a></li>
                                
<li><href="#">链接按钮五</a></li>
                                
<li><href="#">链接按钮六</a></li>
                            
</ul>
                        
</div>
                    
</td>
                
</tr>
            
</table>
        
</div>        
    
</div>
    
<div id="footer">
        
<jsp:include page="/web/page/branch/footer.jsp"/>
    
</div>
</body>

posted on 2008-10-08 12:02 sitinspring 阅读(14332) 评论(1)  编辑  收藏 所属分类: HTML,CSS&JS

评论

# re: 四种CSS链接按钮示例[未登录] 2012-03-15 16:43 YY

GOOD, thanks  回复  更多评论   


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


网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.