这篇文章主要介绍了jQuery下拉友情链接美化效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。

文实例讲述了jQuery下拉友情链接美化效果，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="http://demo.jb51.net/js/2015/jQuery-xlyqlj/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.100sucai.com/web/jquerytexiao/CSS3heHtml5/">100素材网</option>

 <option value="http://www.100sucai.com/web/jquerytexiao/tubiaoyutuxing/">网页制作</OPTION>

 <option value="http://www.100sucai.com/web/jquerytexiao/biaodanyanzheng/">脚本专栏</option>

 <option value="http://www.100sucai.com/web/jquerytexiao/daohangcaidan">脚本下载</option>

 <option value="http://www.100sucai.com/web/jquerytexiao/xuanxiangka/">网络编程</option>

 <option value="http://www.100sucai.com/web/jquerytexiao/shipingbofangqi">电子书籍</option>

 <option value="http://www.100sucai.com/web/jquerytexiao/shijianheshijian">数据库</option>

 </select>

</div>

<script type=text/javascript src="http://demo.jb51.net/js/2015/jQuery-xlyqlj/js/newbase.js"></script>

<!-- 代码 结束 -->

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

</div>

</body>

</html>

　　

jQuery下拉友情链接美化效果代码分享的更多相关文章

  1. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  2. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

  3. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  4. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  5. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  6. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  7. jquery下拉菜单

    下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用.美观大方的下拉菜单或者导航效果. 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱 ...

  8. 高仿IOS下拉刷新的粘虫效果

    最近看需要做一款下拉刷新的效果,由于需要和Ios界面保持一致,所以这用安卓的方式实现了ios下的下拉刷新的粘虫效果. 最新的安卓手机版本的QQ也有这种类似的效果,就是拖动未读信息的那个红色圆圈,拖动近 ...

  9. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

随机推荐

  1. [ActionScript 3.0] AS3.0 Loader加载子swf时是否需要指定新的应用程序域ApplicationDomain

    实际应用中, Loader加载子swf时是否需要指定新的应用程序域ApplicationDomain,需要择情况而定. 1.如果在本地将项目位置添加到flashplayer受信任位置(上一篇文章所述) ...

  2. Entity Framework6 访问MySQL

    先用PM命令安装EF6,MySQL提供的EF实现新增.删除.修改是采用存储过程实现的 Install-Package EntityFramework 配置修改如下 <?xml version=& ...

  3. Configuring HugePages for Oracle on Linux (x86-64)

    Introduction Configuring HugePages Force Oracle to use HugePages (USE_LARGE_PAGES) Disabling Transpa ...

  4. (转)直接拿来用！最火的iOS开源项目（二）

    “每一次的改变总意味着新的开始.”这句话用在iOS上可谓是再合适不过的了.GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7, ...

  5. 开发者眼中最好的 22 款 GUI 测试工具

    1.Abbot - Java GUI 测试框架 Abbot是一个基于GUI的简单的Java测试框架,它能够帮助开发者测试Java用户界面. 它提供事件自动生成和验证Java GUI组件,使您能够轻松地 ...

  6. C语言之实现控制台光标随意移动

    原理引入windows.h,首先是要获得输入的东西,然后通过判断: 1.方向键:执行上下左右的移动功能 2:回车键:执行换行的功能. 3.普通键:输入功能. 终点就是要获取到屏幕上的坐标,当按下了方向 ...

  7. Drupal8开发教程：模块开发——创建新页面

    之前我们已经通过<Drupal8开发教程:认识.info.yml文件>对模块的YAML文件有了了解,今天我们来看如何通过模块开发的方式添加一个新的页面. 在 Drupal 7 中,通过模块 ...

  8. 常见行为：仿真&重力&碰撞&捕捉

    一.UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架.可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象,重力.弹性碰撞等,游戏开发中很常见,例如愤怒的小鸟. 二.UI ...

  9. 【HTML/XML 8】XSL，可扩展样式表语言

    导读:上篇博客说了在XML文档中实现表现形式的一种形式:CSS层叠样式表,本篇博客将接着说明其另一种实现方式XSL,并将分析XSL和CSS之间的 关系. 一.XSL简介 XSL(eXtensible ...

  10. HDOJ1010(BFS)

    //为什么bfs不行呢,想不通 #include<cstdio>#include<cstring>#include<queue>using namespace st ...