집 > 기사 > 웹 프론트엔드 > jQuery 드롭다운 친화적인 링크 미화 효과 코드 Sharing_jquery

jQuery 드롭다운 친화적인 링크 미화 효과 코드 Sharing_jquery

WBOY원래의: 2016-05-16 15:42:251322검색

이 문서의 예에서는 jQuery 드롭다운 친화적 링크 미화 효과를 설명합니다. jQuery 드롭다운 친화적 링크 미화 코드는 참고용으로 모든 사람과 공유됩니다. 세부 내용은 다음과 같습니다.
작업 렌더링: >

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요. 모두에게 공유되는 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.jb51.net/">脚本之家</option>
 <option value="http://www.jb51.net/">网页制作</OPTION>
 <option value="http://www.jb51.net/">脚本专栏</option>
 <option value="http://www.jb51.net/">脚本下载</option>
 <option value="http://www.jb51.net/">网络编程</option>
 <option value="http://www.jb51.net/">电子书籍</option>
 <option value="http://www.jb51.net/">数据库</option>
 </select>
</div>
<script type=text/javascript src="js/newbase.js"></script>
<!-- 代码 结束 -->

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

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

위는 여러분과 공유한 jQuery 드롭다운 친화적인 링크 미화 효과 코드입니다. 마음에 드셨으면 좋겠습니다.

성명：

이전 기사：Apple iwatch_javascript 스킬의 모습을 모방한 js 타이머 코드 공유다음 기사：Apple iwatch_javascript 스킬의 모습을 모방한 js 타이머 코드 공유

jQuery 드롭다운 친화적인 링크 미화 효과 코드 Sharing_jquery

관련 기사