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

2007-03-02 作者:bitsCN整理来源:中国网管联盟点评 投稿 收藏

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

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

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

网管网www_bitscn_com

首先为了方便我们先把《CSS中的滑动门技术》中的代码移过来：网管下载dl.bitscn.com

XHTML部分：

网管u家u.bitscn@com

<div id="header">
<ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>

中国网管论坛bbs.bitsCN.com

CSS部分：

网管bitscn_com

#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; 网管下载dl.bitscn.com
padding-bottom:5px;
}

网管u家u.bitscn@com

代码：

网管下载dl.bitscn.com

<!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>CSS中滑动门技术</title>
<style type="text/css" media="screen">
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}
html>body {font-size:small;}

#header {
float:left;
width:100%;
background:#DAE0D2 url("http://webdesign.bitscn.com/UploadFiles_8014/200703/20070302161233143.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;

网管联盟bitsCN@com

background:url("http://webdesign.bitscn.com/UploadFiles_8014/200703/20070302161234642.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("http://webdesign.bitscn.com/UploadFiles_8014/200703/20070302161234839.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("http://webdesign.bitscn.com/UploadFiles_8014/200703/20070302161234578.gif");
}
#header #current a {
background-image:url("http://webdesign.bitscn.com/UploadFiles_8014/200703/20070302161236934.gif");
color:#333;
padding-bottom:5px;
}
</style>
</head> 网管下载dl.bitscn.com

<body>
<div id="header">
<ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

网管网www.bitscn.com

网管bitscn_com

顶一下

TAGs：效果点击制作 #header href lia float:left 滑动技术

上一篇：用CSS制作鼠标经过图像下一篇：使用CSS缩写给你的网站加速

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

2007-03-02 作者:bitsCN整理 来源:中国网管联盟 点评 投稿 收藏

2007-03-02 作者:bitsCN整理来源:中国网管联盟点评投稿收藏