当前位置：首页 → 问答吧 → 求助一则平面图的DIV方式！

求助一则平面图的DIV方式！

时间：2010-09-10

来源：互联网

-----------------------------------------------

问题：大家都看到上面的平面图。
鼠标经过上面某个滑门的时候，下面的绿线也同位置裁切掉相同的宽度。
如：

上面的“相册”。我鼠标经过相册的按钮时候，背景为白色，下面的绿线也被裁切掉了相同的宽度！

[ 本帖最后由 ropopo 于 2010-9-10 09:35 编辑 ]

附件

未命名.jpg (50.48 KB)

2010-9-10 08:49

未命名.jpg (50.48 KB)

2010-9-10 08:50

作者: ropopo 发布时间: 2010-09-10

没明白意思语句中间插逗号没

作者: millionfor 发布时间: 2010-09-10

我做做看，还不知道能否完成

作者: buddies 发布时间: 2010-09-10

代码贴出来看看，是不是白色的背景太高了所致

作者: ghiro520 发布时间: 2010-09-10

在FireFox跟ie7.ie8是没问题，我不知道ie6是否也可以

附件

nav.rar (981 Bytes)

2010-9-10 10:17, 下载次数: 1

作者: buddies 发布时间: 2010-09-10

这个方法不是很理想，不知道是不是楼主想要的效果，代码应该还可以精简一些；

<!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> * {margin:0;padding:0;list-style:none;font-size:12px;} #header {width:950px;height:200px;margin:10px auto;border:1px solid #ccc;position:relative} #header ul {height:24px;position:absolute;bottom:1px;left:30px;_bottom:-1px} #header ul li {float:left;margin-right:10px;background:#eee;border:1px solid #ccc;display:inline;position:relative;height:24px} #header ul li a {float:left;display:block;height:24px;text-align:center;padding:0 6px;line-height:24px;text-decoration:none} #header ul li a:hover {padding-bottom:12px;background:#fff;_position:absolute;_left:0;} #content {width:950px;height:200px;margin:0 auto;border:1px solid #ccc;} </style> </head> <body> <div id="header"> <ul> <li><a href="#">题目1</a></li> <li><a href="#">题目2</a></li> <li><a href="#">题目3题目3</a></li> <li><a href="#">题目4</a></li> <li><a href="#">题目5</a></li> <li><a href="#">题目6</a></li> </ul> </div> <div id="content"></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: geminids 发布时间: 2010-09-10

求助一则平面图的DIV方式！

附件

附件

热门阅读

热门下载