这种效果用css能够实现不？

yilubenpao · 发表于 2011-7-8 09:05:25

想了很久，觉得css很难实现。
1，要是左边且一块，右边切一块，中间平铺。。。。但是html结构不好写。。。其他标签吧好像不支持hover标签（在IE下）

难道只有用js来实现了？

[[i] 本帖最后由 yilubenpao 于 2011-7-8 09:19 编辑 ]

tza17313 · 发表于 2011-7-8 09:12:41

你这些字的长度差不多吗，直接把背景大小定死那些文字的宽度也定死用a:hover 实现

yilubenpao · 发表于 2011-7-8 09:18:22

文字不一样的但是差不了多少
估计只能够用你这种方法了。要是用js也比较麻烦。。。谢谢啦。

vallkiss · 发表于 2011-7-8 09:46:30

如果真想弄直接用两张不同的图片切换（只是不利于优化）

bluekee · 发表于 2011-7-8 09:51:29

坐等代码~~~~~

zhu104210362 · 发表于 2011-7-8 10:28:37

可以的
<a href="#" style="background:XXX left top;float:left;"><span style="background:XXX left top;float:left;margin-left:10px;padding-right:10px;">标题</span></a>
差不多这样吧

shiwoya · 发表于 2011-7-8 11:07:15

是要这样子吗？

提示：您可以先修改部分代码再运行

yilubenpao · 发表于 2011-7-8 11:36:18

原帖由 [i]zhu104210362 于 2011-7-8 10:28 发表
可以的
标题
差不多这样吧

成功了；用的就是这种方法

yilubenpao · 发表于 2011-7-8 11:37:31

原帖由 [i]shiwoya 于 2011-7-8 11:07 发表
是要这样子吗？[html]

无标题文档

*{margin:0; padding:0;}
a{display:block; height:23px; line-height:23px; float:left; padding:0 0 0 10px;}
a span{display:block; float:left; padding:0 10px ...

运行不起来哦。。。

shiwoya · 发表于 2011-7-8 12:04:17

原帖由 [i]yilubenpao 于 2011-7-8 11:37 发表

运行不起来哦。。。

下面有张图片的。。看到没。。下下来你改一下图片地址

josea · 发表于 2011-7-8 15:00:06

.generic-button的图片是左边的圆角，
.generic-button span 的图片是右边的圆角

<!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=utf-8" />
<title>无标题文档</title>
<style>
.generic-button
{
background: url(img/generic-button.gif) no-repeat top left;
display: block;
float: left;
padding: 0 0 0 1px;
}

.generic-button:hover
{
background-position: bottom left;
}

.generic-button span
{
background: url(img/generic-button.gif) no-repeat top right;
display: block;
float: left;
padding: 0 0px 0 0;
}

.generic-button:hover span
{
background-position: bottom right;
}

.generic-button span span
{
font-size: 12px;
line-height: 22px;
background-color: #999;
color: #fff;
cursor: pointer;
display: block;
float: left;
padding: 0px 6px;
text-align: center;
}

.generic-button:hover span span
{
background-color: #666;
}

</style>
</head>

<body>
<p><a href="#" class="generic-button"><span><span>我来回答</span></span></a></p>
</body>
</html>

[[i] 本帖最后由 josea 于 2011-7-8 15:08 编辑 ]

lxin07hl · 发表于 2011-7-15 00:53:54

不错！谢谢L上的

帐号		自动登录	找回密码
密码			注册

这种效果用css能够实现不？

回复 11# josea 的帖子