css 多个按钮放在一张图片上。 例如电驴搜索那个 怎么实现

发布网友 发布时间：2022-04-06 12:00

我来回答

共4个回答

热心网友 时间：2022-04-06 13:29

@.....这个咋个说呢，虽然很简单……
就拿verycd那搜索框做例吧……，自己写了个……
HTML：
<div id="top-search">
<input type="text" id="top-search-input" name="kw" value="" />
<input type="submit" id="top-search-lib" class="top-search-button" value="资源" />
<input type="button" id="top-search-site" class="top-search-button" value="高级搜索" />
<input type="button" id="top-search-advance" class="top-search-button" value="发布资源"
/></div>

CSS：
#top-search{width:750px;height:34px;background:url(search.jpg) no-repeat}/*背景*/
#top-search input{float:left;width:70px;height:30px;margin-top:5px;background:none;border:none;}/*整体input设置*/
#top-search #top-search-input{width:408px;height:12px;margin:12px 35px 5px 27px;}/*调整输入框*/
#top-search-lib,#top-search-site,#top-search-advance{text-indent:-999px;overflow:hidden;cursor:pointer;}/*其它三个按钮，隐藏字体*/

图片就用下面这张：

参考资料：http://hiphotos.baidu.com/yaopk/pic/item/6431692209b0f2f44723e816.jpg

热心网友 时间：2022-04-06 14:47

用firework查看图片的坐标
例如： background:url(../images/x.jpg) no-repeat -100px 122px;

热心网友 时间：2022-04-06 16:22

把图片做成背景

热心网友 时间：2022-04-06 18:13

你是想要div+css的学习资料吗？可以加我。