ie7浏览器以后的下拉框,给他加上边框样式,是没用的。要是想做出样式好看的下拉框需要用js或者jquery来模拟实现。

代码如下:

        1. <div class="r">
        2. <dl class="link" id="link">
        3. <dt>友情链接</dt>
        4. <dd>
        5. <ul>
        6. <li><a href="###" target="_blank">友情链接一</a>
        7. `<a href="###" target="_blank">友情链接二</a>`</li>                        </ul>
        8. </dd>
        9. </dl>
        10. </div>

css代码:

  1. div.bottomTop div.bottomTopRight dl.link {
  2. margin-right:0px;
  3. display:inline-block;
  4. border:1px solid #484848;
  5. margin-left:15px;
  6. font-size:12px;
  7. margin-top:15px;
  8. width:90px;
  9. height:18px;
  10. }
  11. div.bottomTop div.bottomTopRight dl.link dt {
  12. background:url(../images/select_bg.gif) no-repeat 7px center;
  13. color:#515151;
  14. text-indent:18px;
  15. height:18px;
  16. line-height:18px;
  17. width:90px;
  18. cursor:pointer;
  19. font-family:宋体;
  20. }
  21. div.bottomTop div.bottomTopRight dl.link dd {
  22. display:none;
  23. position:relative;
  24. }
  25. div.bottomTop div.bottomTopRight dl.link ul {
  26. position:absolute;
  27. right:0px;
  28. bottom:19px;
  29. display:block;
  30. width:90px;
  31. background:#999999;
  32. }
  33. div.bottomTop div.bottomTopRight dl.link ul li {
  34. height:22px;
  35. line-height:22px;
  36. text-align:left;
  37. text-indent:18px;
  38. }
  39. div.bottomTop div.bottomTopRight dl.link ul li a {
  40. color:#515151;
  41. font-family:宋体;
  42. }
      1. jquery代码:

            • <script type="text/javascript">
            • $(function(){
            • $('#link dt').click(function(){
            • $('#link dd').toggle();
            • });
            • })
            • </script>
        1.  
        1. 要注意一点的是,要实现这个效果,<dd></dd>千万别加高度,

美化的select下拉框的更多相关文章

  1. jQuery多级联动美化版Select下拉框

    在线演示 本地下载

  2. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  3. 好看的Select下拉框是如何制造的

    现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...

  4. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  5. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  6. s:select下拉框validation验证

    S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...

  7. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  8. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  9. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

随机推荐

  1. Django基于正则表达式的URL(1)

    1. 此时,用户只能看到列表,如果用户想查看详细信息,应该再增加程序. 2. 把信息用a标签包起来以后,详细信息就有了可以跳转的功能. . 3. 点击不同的用户名时,获取到不同的信息. 3.1 在ur ...

  2. linux系统常见命令以及操作

    2.安装xshell,安装完打开,配置回话,输入名称(随便).SSH.主机(打开linux,点击右上角电脑图标system etho进行联网,打开终端输入ifconfig回车,找到inet add地址 ...

  3. 【loj6179】Pyh的求和

    Portal -->loj6179 Solution ​  这题其实有一个式子一喵一样的版本在bzoj,但是那题是\(m\)特别大然后只有一组数据  这题多组数据== ​    首先根据\(\v ...

  4. 【字符串】KMP字符串匹配

    百度百科 Definition \(KMP\)算法是一个字符串匹配算法.他接收两个字符串\(A,B\),返回\(B\)在\(A\)中出现的所有位置. 以下称需要被匹配的串\(A\)为主串,可能在主串中 ...

  5. mysql三-6:完整性约束

    一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性 主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN KE ...

  6. c/c++中的预编译指令总结

    预处理指令提供按条件跳过源文件中的节.报告错误和警告条件,以及描绘源代码的不同区域的能力.使用术语“预处理指令”只是为了与 C 和 C++ 编程语言保持一致.在 C# 中没有单独的预处理步骤:预处理指 ...

  7. Codeforces Global Round 2 题解

    Codeforces Global Round 2 题目链接:https://codeforces.com/contest/1119 A. Ilya and a Colorful Walk 题意: 给 ...

  8. [linux]linuxI/O测试的方法之dd

    参考http://www.thomas-krenn.com/en/wiki/Linux_I/O_Performance_Tests_using_dd Measuring Write Performan ...

  9. java project转变成java web project

    首先,你的eclipse必须得装有web插件 1.找到项目工作空间目录,打开.project文件,并修改文件, 修改如下:      找到:<natures> </natures&g ...

  10. DHCP及DHCP多作用域服务器工作原理

    一.DHCP服务是什么 DHCP称为动态主机配置协议.DHCP服务允许工作站连接到网络并且自动获取一个IP地址.配置DHCP服务的服务器可以为每一个网络客户提供一个IP地址.子网掩码.缺省网关.一个W ...