亚洲午夜精品一区二区,欧美日韩精品福利,日本视频一区二区不卡

四種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 閱讀(14773) 評論(1) 編輯收藏所屬分類: HTML,CSS&JS


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




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

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

春風(fēng)博客

導(dǎo)航

統(tǒng)計

公告

常用鏈接

留言簿(11)

隨筆分類(224)

隨筆檔案(126)

個人軟件下載

我的其它博客

我的鄰居們

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

四種CSS鏈接按鈕示例

評論