Schiebetürcode für 100 % Klickfläche-CSS-Tutorial-php.cn

Schiebetürcode für 100 % Klickfläche

PHP中文网

Freigeben： 2016-05-16 12:08:41

Original

1565 Leute haben es durchsucht

Freunde, die Standards studieren, kommen im Laufe des Lernens normalerweise mit der CSS-Schiebetürtechnologie in Berührung. Vielleicht haben Sie auch diesen Artikel „Schiebetürtechnologie in CSS“ gelesen. Ich habe es noch nicht gelesen. Es spielt keine Rolle, ob Sie den obigen Artikel gelesen oder den Inhalt vergessen haben. Sie können auf den Artikellink oben klicken, um ihn zuerst zu verstehen oder zu lesen.

Im Beispiel einer Schiebetür im Artikel „Schiebetürtechnologie in CSS“ haben Sie bei sorgfältigem Experimentieren möglicherweise festgestellt, dass es im Linkbereich einen toten Winkel von 9 Pixeln gibt, der nicht angeklickt werden kann Unter IE kann nur auf die Größe des Textteils geklickt werden, der gesamte Schaltflächenblock kann nicht angeklickt werden. Was wir erwarten können, ist, dass der gesamte Tastenblock angeklickt werden kann und keine toten Winkel zulässig sind.

Wie sollen wir es dann erreichen? Lassen Sie uns gemeinsam einige Lösungen besprechen:

Der Einfachheit halber verschieben wir zunächst den Code in „Sliding Door Technology in CSS“:
XHTML-Teil:

<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>

Nach dem Login kopieren

CSS-Teil:

#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;  
}

Nach dem Login kopieren