收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2981|回复: 11

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

[复制链接]
发表于 2011-7-8 09:05:25 | 显示全部楼层 |阅读模式
2011-07-08_085930.jpg

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

难道只有用js来实现了?

[[i] 本帖最后由 yilubenpao 于 2011-7-8 09:19 编辑 ]
发表于 2011-7-8 09:12:41 | 显示全部楼层
你这些字的长度 差不多吗,直接把背景大小定死  那些文字的宽度也定死   用a:hover 实现
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-7-8 09:18:22 | 显示全部楼层
文字不一样的   但是差不了多少
估计只能够用你这种方法了。要是用js也比较麻烦。。。谢谢啦。
回复 支持 反对

使用道具 举报

发表于 2011-7-8 09:46:30 | 显示全部楼层
如果真想弄 直接用两张不同的图片切换 (只是不利于优化)
回复 支持 反对

使用道具 举报

发表于 2011-7-8 09:51:29 | 显示全部楼层
坐等代码~~~~~
回复 支持 反对

使用道具 举报

发表于 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>
差不多这样吧
回复 支持 反对

使用道具 举报

发表于 2011-7-8 11:07:15 | 显示全部楼层
是要这样子吗?

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

btn1.png
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-7-8 11:36:18 | 显示全部楼层
原帖由 [i]zhu104210362 于 2011-7-8 10:28 发表
可以的
标题
差不多这样吧

成功了; 用的就是这种方法
回复 支持 反对

使用道具 举报

 楼主| 发表于 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  ...

运行不起来哦。。。
回复 支持 反对

使用道具 举报

发表于 2011-7-8 12:04:17 | 显示全部楼层
原帖由 [i]yilubenpao 于 2011-7-8 11:37 发表

运行不起来哦。。。

下面有张图片的。。看到没。。下下来你改一下图片地址
回复 支持 反对

使用道具 举报

发表于 2011-7-8 15:00:06 | 显示全部楼层
generic-button.gif .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> generic-button.gif

[[i] 本帖最后由 josea 于 2011-7-8 15:08 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2011-7-15 00:53:54 | 显示全部楼层

回复 11# josea 的帖子

不错!谢谢L上的
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-11-15 03:43 , Processed in 0.109098 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表