jQuery下拉友情鏈接美化效果代碼分享
本文實(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> <!-- 代碼 開始 --> <div class=footer-select> <select id=FriendLink class=footer_sel> <option selected value="">友情鏈接</option> <option value="http://www.dbjr.com.cn/">腳本之家</option> <option value="http://www.dbjr.com.cn/">網(wǎng)頁制作</OPTION> <option value="http://www.dbjr.com.cn/">腳本專欄</option> <option value="http://www.dbjr.com.cn/">腳本下載</option> <option value="http://www.dbjr.com.cn/">網(wǎng)絡(luò)編程</option> <option value="http://www.dbjr.com.cn/">電子書籍</option> <option value="http://www.dbjr.com.cn/">數(shù)據(jù)庫</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下拉友情鏈接美化效果代碼,希望大家可以喜歡。
- 三級(jí)下拉菜單的js實(shí)現(xiàn)代碼
- js 控制下拉菜單刷新的方法
- js模擬select下拉菜單控件的代碼
- Js點(diǎn)擊彈出下拉菜單效果實(shí)例
- js 單擊式的下拉菜單效果實(shí)例
- js下拉菜單語言選項(xiàng)簡(jiǎn)單實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)簡(jiǎn)單二級(jí)下拉菜單
- jQuery樹形下拉菜單特效代碼分享
- JS實(shí)現(xiàn)下拉菜單賦值到文本框的方法
- jquery帶下拉菜單和焦點(diǎn)圖代碼分享
- jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果
- jQuery實(shí)現(xiàn)的簡(jiǎn)潔下拉菜單導(dǎo)航效果代碼
相關(guān)文章
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
以前用原生的JS做過類似拖拽div的效果,現(xiàn)在按原思路改做成一個(gè)JQ的小插件,當(dāng)作制作JQ插件的一個(gè)小練習(xí),感興趣的朋友可以了解下哈2013-05-05Javascript函數(shù)中的arguments.callee用法實(shí)例分析
這篇文章主要介紹了Javascript函數(shù)中的arguments.callee用法,結(jié)合實(shí)例形式分析了arguments.callee操作當(dāng)前方法引用的具體技巧,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法,涉及jQuery針對(duì)頁面元素的動(dòng)態(tài)添加與刪除相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-08-08通過pjax實(shí)現(xiàn)無刷新翻頁(兼容新版jquery)
這篇文章主要介紹了通過pjax實(shí)現(xiàn)無刷新翻頁,兼容新版jquery,使用心得方法,需要的朋友可以參考下2014-01-01jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery點(diǎn)擊導(dǎo)航欄選中更換樣式的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01用Jquery.load載入頁面后樣式?jīng)]了頁面混亂的解決方法
一直想用jquery.load的方法載入新的頁面,以實(shí)現(xiàn)局部刷新,結(jié)果發(fā)現(xiàn)樣式?jīng)]了,后來發(fā)現(xiàn)了解決方法,如果不過濾掉一些內(nèi)容的話,直接加載,會(huì)使頁面混亂的2014-10-10