和风细雨

世上本无难事，心以为难，斯乃真难。苟不存一难之见于心，则运用之术自出。

2008年3月12日 #

无序列表的翻转按钮效果


CSS代码：

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

/*无序链表的链接CSS设置开始*/
ul a{
    display:block;
    padding:2px;
    text-align:center;
    text-decoration:none;
    width:130px;
    margin:2px;
    color:#8d4f10;
}

ul a:link{
    background:#efb57c;
    border:2px outset #efb57c;
}

ul a:visited{
    background:#efb57c;
    border:2px outset #efb57c;
}

ul a:focus{
    background:#daa670;
    border:2px outset #daa670;
    color:black;
}

ul a:hover{
    background:#daa670;
    border:2px outset #daa670;
    color:black;
}

ul a:active{
    background:#bb8e60;
    border:2px outset #bb8e60;
}
/*无序链表的链接CSS设置结束*/
li{    
    padding-left:10px;
}

页面代码：
<%@ page contentType="text/html; charset=UTF-8" %>

<ul>    
<li><a href='ShowPage?page=addTag'>添加類別</a></li>
<li><a href='ViewTag'>查看類別</a></li>
<li><a href='ShowPage?page=addAccount'>添加賬目</a></li>
<li><a href='ViewAccount'>逐条查看賬目</a></li>
<li><a href='ShowPage?page=summary'>统计</a></li>
<li><a href='PeriodSummary?period=year'>每年统计</a></li>
<li><a href='PeriodSummary?period=month'>每月统计</a></li>
<li><a href='PeriodSummary?period=day'>每日统计</a></li>
</ul>

 

用出来效果还是挺好看的。

posted @ 2008-03-12 09:38 和风细雨 阅读(58) | 评论 (0) | 编辑 收藏