久久久久伊人,五月天亚洲综合情,亚洲成av人**亚洲成av**

四種CSS鏈接按鈕示例

代碼下載：
http://www.aygfsteel.com/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代碼：

<jsp:include page="/web/page/branch/header.jsp"/>

</div>

<jsp:include page="/web/page/branch/menubar.jsp"/>

</div>

<tr>

<strong>背景色切換鏈接按鈕示例</strong>

</div>

<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>

<strong>背景圖片切換鏈接按鈕示例</strong>

</div>

<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>

<strong>背景色突起效果按鈕示例</strong>

</div>

<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>

<strong>一張背景圖片左右切換按鈕示例</strong>

</div>

<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>

<jsp:include page="/web/page/branch/footer.jsp"/>

</div>

</body>

posted on 2008-10-08 12:02 sitinspring 閱讀(14783) 評論(1) 編輯收藏所屬分類: HTML,CSS&JS


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 樹狀側邊菜單欄示例滑動側邊菜單欄示例球拍式導航菜單效果的實現四種CSS鏈接按鈕示例使用CSS設置表格二使用CSS設置表格使用無序列表制作導航菜單 CSS固定寬度兩欄居中示例 CSS可變寬度兩欄式布局例子按鈕按下效果的左側導航欄實現

# re: 四種CSS鏈接按鈕示例[未登錄] 2012-03-15 16:43 YY

春風博客

導航

統計

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

四種CSS鏈接按鈕示例

評論