求助~谁能弄出这个模样的下拉框？

wyx213 2011-03-09 09:26:09

http://hi.csdn.net/space-2195588-do-album-picid-759088.html

如上面链接中的 10 Results per page的下拉框，怎么写啊，我是这方面的菜鸟~ 有背景色，圆角，点击的地方不是向下的小箭头~急~~

用css ,javascript, dojo 都可以。。

...全文

453 35 打赏收藏转发到动态举报

写回复

用AI写文章

35 条回复

切换为时间正序

请发表友善的回复…

发表回复

pei_0454 2011-05-17

打赏
举报

通过此帖得到帮助，谢谢楼主了

wyx213 2011-03-14

打赏
举报

不能用css+div+js了，要求用dojo....

wyx213 2011-03-14

打赏
举报

有 UI高手能帮我做出个极其相似的下拉框背景图片也行啊~~

这玩意没做出来~日本都地震了~~~~~~··

wyx213 2011-03-14

打赏
举报

[Quote=引用 31 楼 cool_xiaocao 的回复:]

引用 3 楼 theforever 的回复:

http://www.aa25.cn/css_example/541.shtml
这个，下载了自己改改就可以了。DIV+CSS。

应该符合楼主想要的效果了，学习嘛，还得自己研究研究
不懂再来这样，这里有的是高手
[/Quote]说的对，不过我还是没弄出来，呵呵

Cool_xiaocao 2011-03-13

打赏
举报

[Quote=引用 3 楼 theforever 的回复:]

http://www.aa25.cn/css_example/541.shtml
这个，下载了自己改改就可以了。DIV+CSS。
[/Quote]

应该符合楼主想要的效果了，学习嘛，还得自己研究研究
不懂再来这样，这里有的是高手

wyx213 2011-03-11

打赏
举报

蓝色蒲公英（头像）可以点下那个链接，所有的代码都可以右键看到了，也就一个js,一个html,三个css,另外有几张img

呵呵，今天是弄不出来了，周六周日还得去沈阳参加婚礼，只能等到下周继续弄了。。

wyx213 2011-03-11

打赏
举报

这个要是能发附件就好了，我把我的代码发上来，让高手看看，说不定很快就能弄好:)

发个链接上来吧：http://9.123.77.65:9080/STG/stg_v2_0208/index.html~其中的下拉框还是普通的。

yhx1991 2011-03-11

打赏
举报

把 Class的那几个颜色改下下面的图片去掉就可以了我刚试了的就是看是不是你要的效果

wyx213 2011-03-11

打赏
举报

[Quote=引用 25 楼 yhx1991 的回复:]

呵呵没事看你自己能不能改哈就颜色什么的
[/Quote]

嗯，我再试试吧，其实3楼的那个更像一些，如果聪明的或者做过的，估计一会就搞定啦，
我吭哧瘪度的半天没弄出来，呵呵

wyx213 2011-03-11

打赏
举报

[Quote=引用 21 楼 luxu001207 的回复:]

我这儿有个DIV + CSS + JS，不过我怕你不会改，所以还是不传了
[/Quote]

呵呵~估计是吧，3楼给的那个，我改了很久了，也没改成功。。。。这个东西html的代码是在js里硬拼出来的。。。哎，让我一个没做过的人接手这样的活，郁闷了。。。

yhx1991 2011-03-11

打赏
举报

呵呵没事看你自己能不能改哈就颜色什么的

wyx213 2011-03-11

打赏
举报

[Quote=引用 22 楼 yhx1991 的回复:]

发过去了你看你收到没
[/Quote]收到了，多谢！

不过，跟我的那个图相差好大啊，我需要的不是漂亮，而是外观与我那个图越像越好！

哎，呵呵，让大家见笑了，是我太笨了。。。

yhx1991 2011-03-11

打赏
举报

发了你看你收到没

yhx1991 2011-03-11

打赏
举报

发过去了你看你收到没

Atai-Lu 2011-03-11

打赏
举报

我这儿有个DIV + CSS + JS，不过我怕你不会改，所以还是不传了

wyx213 2011-03-11

打赏
举报

谢谢啦，不过这个下拉框好像跟我的那个模样差别很大啊

wyx213 2011-03-11

打赏
举报

[Quote=引用 18 楼 yhx1991 的回复:]

还有三张图片我不知道怎么一起传上来了要不你把邮箱给我喔发你邮箱里面去
[/Quote]

好的，我邮箱wangyx213@hotmail.com

yhx1991 2011-03-11

打赏
举报

还有三张图片我不知道怎么一起传上来了要不你把邮箱给我喔发你邮箱里面去

yhx1991 2011-03-11

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级菜单</title>
<style type="text/css">

/* 整体设置*/
#menu {
margin:0;
padding:0;
width:610px;
list-style-type:none;
font:14px Arial;
}

#menu li {
float:left;
padding:0;
margin:0 1px 0 0;
width:150px;
}

/* 设置菜单项*/
#menu li dl {
width:150px;/*ie6*/
margin: 0;
padding: 0 0 10px 0;
background: #cb6 url(images/bottom.gif) no-repeat bottom left;
}

#menu li dt a,#menu li dd a{ display:block;}

/* 设置菜单项的dt */
#menu li dt {
margin:0;
padding: 5px;
text-align:center;
border-bottom:1px solid #b00;
background:
}

#menu li dt.orange { background:#fa5 url(images/top.gif) no-repeat top left;}
#menu li dt.yellow { background:#ee5 url(images/top.gif) no-repeat top left;}
#menu li dt.green { background:#5e5 url(images/top.gif) no-repeat top left;}
#menu li dt.blue { background:#5cf url(images/top.gif) no-repeat top left;}

#menu li dt a ,#menu li dt a:visited {
display:block;
color:#333;
text-decoration:none;
}

/* 设置菜单项的dd */
#menu li dd {

margin:0;
padding:0;
color: #fff;
background: #47a;
}

#menu li dd.last {
border-bottom:1px solid #b00;
}

#menu li dd a, #menu li dd a:visited {
display:block;
color:#fff;
text-decoration:none;
padding:4px 5px 4px 20px;
background: #47a url(images/arrow.gif) no-repeat 10px 10px;
height:1em;
}

/*关闭子菜单*/

#menu li dd { display:none;}

/* 设置鼠标响应 */

#menu li:hover dd , #menu li a:hover dd { display:block;}

#menu li:hover, #menu li a:hover { border:0;}/*ie6*/

#menu li dd a:hover {
background: #147;
color:#9cf;
}

/*针对ie6的设置*/
#menu table { border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}

</style>
</head>

<body>
<ul id="menu">
<li>

<dl>
<dt class="orange"><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl>

</li>
<li>

<dl>
<dt class="yellow"><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl>

</li>
<li>

<dl>
<dt class="green"><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl>

</li>
<li>

<dl>
<dt class="blue"><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl>

</li>
</ul>
</body>
</html>

yhx1991 2011-03-11