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

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

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

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

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

搜索
查看: 2319|回复: 24

[求助] 这种效果怎么用css来实现?

[复制链接]
发表于 2011-7-8 11:45:02 | 显示全部楼层 |阅读模式
1.jpg


上面我直接用了背景,  下面 用了 左边切块  中间切点平铺 右边再切块。 可是导航下面有线了。 实现的效果
2011-07-08_114202.jpg

红色部分多了线,  该怎么来做效果图上一模一样的呢?
发表于 2011-7-8 12:00:03 | 显示全部楼层
了解一下 负margin position z-index 能解决你的这个问题.
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-7-8 13:09:17 | 显示全部楼层
position 能够实现吗? 因为颜色深的那个是hover和激活状态。  定位不是不好实现吗?
首页上可能好实现。但是hover到了第二个咋办呢?
回复 支持 反对

使用道具 举报

发表于 2011-7-8 13:16:01 | 显示全部楼层
可以把背景的高度加到上面导航的位置
回复 支持 反对

使用道具 举报

发表于 2011-7-8 13:16:50 | 显示全部楼层

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

回复 支持 反对

使用道具 举报

发表于 2011-7-8 13:56:46 | 显示全部楼层
是你切得不好吧。直接用ps切图 就行了。哪里用什么css。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-7-8 15:45:40 | 显示全部楼层
原帖由 [i]lijia2202 于 2011-7-8 13:56 发表
是你切得不好吧。直接用ps切图 就行了。哪里用什么css。


我切了很久  也不行啊  指教下。 谢谢
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-7-8 15:46:58 | 显示全部楼层
原帖由 [i]HoHoXC 于 2011-7-8 13:16 发表
可以把背景的高度加到上面导航的位置

照你这样的方法。 第二个不是也没有线框了吗? 第二个底下有线框的(源码下面)
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-7-8 15:48:47 | 显示全部楼层
原帖由 [i]4321285 于 2011-7-8 13:16 发表
[html]



   
   
   
    Example | xHTML1.0
   
        *{margin:0;padding:0;}
        body{padding:100px;text-align:center;}
        ul{zoom:1;clear:both;}
        ul:after{content:" ...


斑斑。。好像还是没有实现。   上面是圆角的哦
回复 支持 反对

使用道具 举报

发表于 2011-7-8 15:50:11 | 显示全部楼层

回复 9# yilubenpao [楼主] 的帖子

如何消除底部界限的方法.用这个办法已经解决了.
圆角什么的你自己能写吧?

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

使用道具 举报

 楼主| 发表于 2011-7-8 17:50:04 | 显示全部楼层
要是不考虑IE6,7  我知道怎么写。
考虑他们的话。只能够用图片了。。。
另外。你的方法还不是特别完美。 2下面没有线哦。。。效果图上 源码 下面有线的。
谢谢
回复 支持 反对

使用道具 举报

发表于 2011-7-14 11:10:36 | 显示全部楼层
学习了!!
回复 支持 反对

使用道具 举报

发表于 2011-7-15 00:53:01 | 显示全部楼层
大家都是高手啊 学习下!
回复 支持 反对

使用道具 举报

发表于 2011-7-19 08:57:58 | 显示全部楼层
hover状态的图片比其他tab高一像素,再用background-ground或者其他使之下移一像素,二楼正解1
回复 支持 反对

使用道具 举报

发表于 2011-7-19 13:43:43 | 显示全部楼层
hover的height比普通的大一个px,然后默认的背景下面留1px透明,hover的铺满。
然后把下面那块往上挪1px就行了。
回复 支持 反对

使用道具 举报

发表于 2011-7-19 14:57:36 | 显示全部楼层
li的高度可以大于ul的高度 li下边可以覆盖ul下边
回复 支持 反对

使用道具 举报

发表于 2011-7-19 17:12:45 | 显示全部楼层
你可以把平时状态(非Hover)下的背景图多切两个像素,保持和hover背景高度一样,这样css布局时方便很多;这多出来的像素要么透明(用gif图),要么直接截成下面的那块的顶部边线,只要能对齐,显示效果正常就行
回复 支持 反对

使用道具 举报

发表于 2011-8-30 15:07:58 | 显示全部楼层
position margin 负值
回复 支持 反对

使用道具 举报

发表于 2011-8-30 15:24:42 | 显示全部楼层
用position,然后top:1px,这个解决方法不错的
回复 支持 反对

使用道具 举报

发表于 2011-8-31 20:53:38 | 显示全部楼层
top用的太牛郎鹅。。
回复 支持 反对

使用道具 举报

发表于 2011-8-31 21:05:56 | 显示全部楼层
background bottom                padding           

去看无懈可击的WEB设计   去网上找电子版。里面有一个就是说这个效果的
回复 支持 反对

使用道具 举报

发表于 2011-9-1 15:17:51 | 显示全部楼层
子菜间margin-top:为负数就行咯。
回复 支持 反对

使用道具 举报

发表于 2011-9-1 15:33:43 | 显示全部楼层

回复 11# yilubenpao [楼主] 的帖子

切两张不一样的图试试咯。。
鼠标经过的时候是没有下面线的。。

或者用z-index试试。。

[[i] 本帖最后由 trista0516 于 2011-9-1 15:38 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2011-9-2 17:08:50 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2011-9-5 20:58:17 | 显示全部楼层
这个不错,应该很简单吧
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2019-11-20 09:12 , Processed in 0.124684 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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