最新更新 sitemap 设计搜素
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
网上家居 虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

用CSS制作100%点击区的滑动门效果

日期:03-02    来源:|    作者:

学习标准的朋友,一般都会在学习的过程中接触到css滑动门技术,或许大家也都看过这篇文章《css中的滑动门技术》,如果你还没接触过或还没看过上文或有点忘记内容,也没关系,可以点击上面的文章链接,先了解或温习一遍。

在《css中的滑动门技术》一文中的滑动门例子,大家仔细实验,或许已经发现,链接区有9像素的盲点无法点击,而且在IE下,只能点击文字部分大小,不能点击整个按钮区块。而我们或许期望的是整个按钮区块都可以点击,并且不允许有盲点存在。

那我们又该如何去实现呢?下面我们一起来探讨一些解决方法:

首先为了方便我们先把《css中的滑动门技术》中的代码移过来:

XHTML部分:

css部分:

#header {
  float:left;
  width:100%;
  background:#DAE0D2 url("bg.gif") repeat-x bottom;
  font-size:93%;
  line-height:normal;
}
#header ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
}
#header li {
  float:left;
  background:url("left.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
}
#header a {
  float:left;
  display:block;
  background:url("right.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
}
/* Commented Backslash Hack
   hides rule from IE5-Mac */
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
  color:#333;
}
#header #current {
  background-image:url("left_on.gif");
}
#header #current a {
  background-image:url("right_on.gif");
  color:#333;
  padding-bottom:5px;
}

代码: