您现在的位置是:门户> 编程语言> HTML/CSS

100%点击区的滑动门代码第1/2页
2020-04-07 38人围观 0条评论
简介100%点击区的滑动门代码

    BLOG地址:http://www.planabc.net/article.asp?id=107

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

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

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

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

    复制代码 代码如下:

     
      
       
          
    • Home
    •  
          News 
          
    • Products
    •  
          
    • About
    •  
          
    • Contact
    •  
        
     
     

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; 


CSS中滑动门技术