春风博客

春天里，百花香...

导航

<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><a href="#">链接按钮一</a></li>
                                <li><a href="#">链接按钮二</a></li>
                                <li><a href="#">链接按钮三</a></li>
                                <li><a href="#">链接按钮四</a></li>
                                <li><a href="#">链接按钮五</a></li>
                                <li><a href="#">链接按钮六</a></li>
                            </ul>
                        </div>
                    </td>
                    
                    <td valign="top" width="25%">
                        <div class="contentTitle">
                            <strong>背景图片切换链接按钮示例</strong> 
                        </div>
                        <div id="linkButtonDiv2" class="contentConcept">
                            <ul>
                                <li><a href="#">链接按钮一</a></li>
                                <li><a href="#">链接按钮二</a></li>
                                <li><a href="#">链接按钮三</a></li>
                                <li><a href="#">链接按钮四</a></li>
                                <li><a href="#">链接按钮五</a></li>
                                <li><a href="#">链接按钮六</a></li>
                            </ul>
                        </div>
                    </td>
                    
                    <td valign="top" width="25%">
                        <div class="contentTitle">
                            <strong>背景色突起效果按钮示例</strong> 
                        </div>
                        <div id="linkButtonDiv3" class="contentConcept">
                            <ul>
                                <li><a href="#">链接按钮一</a></li>
                                <li><a href="#">链接按钮二</a></li>
                                <li><a href="#">链接按钮三</a></li>
                                <li><a href="#">链接按钮四</a></li>
                                <li><a href="#">链接按钮五</a></li>
                                <li><a href="#">链接按钮六</a></li>
                            </ul>
                        </div>
                    </td>
                    
                    <td valign="top" width="25%">
                        <div class="contentTitle">
                            <strong>一张背景图片左右切换按钮示例</strong> 
                        </div>
                        <div id="linkButtonDiv4" class="contentConcept">
                            <ul>
                                <li><a href="#">链接按钮一</a></li>
                                <li><a href="#">链接按钮二</a></li>
                                <li><a href="#">链接按钮三</a></li>
                                <li><a href="#">链接按钮四</a></li>
                                <li><a href="#">链接按钮五</a></li>
                                <li><a 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 阅读(14764) 评论(1)  编辑  收藏 所属分类: HTML,CSS&JS

评论

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

GOOD, thanks  回复  更多评论   


只有注册用户登录后才能发表评论。
网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.