jQuery下拉友情鏈接美化效果代碼分享

更新時(shí)間：2015年08月26日 16:42:13 投稿：lijiao

這篇文章主要介紹了jQuery下拉友情鏈接美化效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。

本文實(shí)例講述了jQuery下拉友情鏈接美化效果，jQuery下拉友情鏈接美化代碼是一款基于jQuery實(shí)現(xiàn)的下拉美化特效，分享給大家供大家參考。具體如下：
運(yùn)行效果圖： -------------------查看效果-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jQuery下拉友情鏈接美化效果代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery下拉友情鏈接美化代碼</title>
<style>
BODY {
 FONT: 12px "宋體", "微軟雅黑", Arial, Tahoma, Helvetica, STHeiti, "Hiragino Sans GB";
 COLOR: #363636
}
DIV {
 PADDING-BOTTOM: 0px;
 BORDER-RIGHT-WIDTH: 0px;
 MARGIN: 0px;
 PADDING-LEFT: 0px;
 PADDING-RIGHT: 0px;
 BORDER-TOP-WIDTH: 0px;
 BORDER-BOTTOM-WIDTH: 0px;
 BORDER-LEFT-WIDTH: 0px;
 PADDING-TOP: 0px
}
SELECT {
 PADDING-BOTTOM: 0px;
 BORDER-RIGHT-WIDTH: 0px;
 MARGIN: 0px;
 PADDING-LEFT: 0px;
 PADDING-RIGHT: 0px;
 BORDER-TOP-WIDTH: 0px;
 BORDER-BOTTOM-WIDTH: 0px;
 BORDER-LEFT-WIDTH: 0px;
 PADDING-TOP: 0px
}
SELECT {
 BOX-SIZING: content-box;
 BORDER-BOTTOM: #ddd 1px solid;
 BORDER-LEFT: #ddd 1px solid;
 PADDING-BOTTOM: 1px;
 LINE-HEIGHT: 20px;
 PADDING-LEFT: 0px;
 PADDING-RIGHT: 0px;
 BORDER-TOP: #ddd 1px solid;
 BORDER-RIGHT: #ddd 1px solid;
 PADDING-TOP: 1px;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
}
OPTION {
 PADDING-BOTTOM: 0px;
 BORDER-RIGHT-WIDTH: 0px;
 MARGIN: 0px;
 PADDING-LEFT: 0px;
 PADDING-RIGHT: 0px;
 BORDER-TOP-WIDTH: 0px;
 BORDER-BOTTOM-WIDTH: 0px;
 BORDER-LEFT-WIDTH: 0px;
 PADDING-TOP: 0px
}
.footer-select {
 POSITION: absolute;
 RIGHT: 620px;
 TOP: 19px
}
.footer_sel {
 BORDER-BOTTOM: #d6d6d6 1px solid;
 BORDER-LEFT: #d6d6d6 1px solid;
 LINE-HEIGHT: 22px;
 WIDTH: 190px;
 HEIGHT: 22px;
 COLOR: #afafaf;
 BORDER-TOP: #d6d6d6 1px solid;
 BORDER-RIGHT: #d6d6d6 1px solid
}

</style>
<script type=text/javascript src="js/jquery-1.4.1.min.js"></script>
</head>
<body>
<!-- 代碼 開(kāi)始 -->
<div class=footer-select>
 <select id=FriendLink class=footer_sel>
 <option selected value="">友情鏈接</option>
 <option value="http://www.dhdzp.com/">腳本之家</option>
 <option value="http://www.dhdzp.com/">網(wǎng)頁(yè)制作</OPTION>
 <option value="http://www.dhdzp.com/">腳本專(zhuān)欄</option>
 <option value="http://www.dhdzp.com/">腳本下載</option>
 <option value="http://www.dhdzp.com/">網(wǎng)絡(luò)編程</option>
 <option value="http://www.dhdzp.com/">電子書(shū)籍</option>
 <option value="http://www.dhdzp.com/">數(shù)據(jù)庫(kù)</option>
 </select>
</div>
<script type=text/javascript src="js/newbase.js"></script>
<!-- 代碼 結(jié)束 -->

<div style="text-align:center;margin:250px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>
</body>
</html>

以上就是為大家分享的jQuery下拉友情鏈接美化效果代碼，希望大家可以喜歡。

您可能感興趣的文章: