Rumah > hujung hadapan web > tutorial css > Kod pintu gelangsar untuk kawasan klik 100%.

Kod pintu gelangsar untuk kawasan klik 100%.

PHP中文网
Lepaskan: 2016-05-16 12:08:41
asal
1622 orang telah melayarinya

Rakan yang belajar standard biasanya akan berhubung dengan teknologi pintu gelangsar CSS dalam proses pembelajaran Mungkin anda juga pernah membaca artikel ini "Teknologi pintu gelangsar dalam CSS". t membacanya lagi Tidak kira jika anda telah membaca artikel di atas atau terlupa kandungannya Anda boleh klik pada pautan artikel di atas untuk memahami atau menyemaknya terlebih dahulu.

Dalam contoh pintu gelangsar dalam artikel "Teknologi Pintu Gelangsar dalam CSS", jika anda mencuba dengan teliti, anda mungkin mendapati terdapat titik buta 9 piksel dalam kawasan pautan yang tidak boleh diklik dan di bawah IE, hanya bahagian teks yang boleh diklik saiznya, keseluruhan blok butang tidak boleh diklik. Apa yang kami jangkakan ialah keseluruhan blok butang boleh diklik dan tiada titik buta dibenarkan.

Lalu bagaimana kita harus mencapainya? Mari kita bincangkan beberapa penyelesaian bersama:

Pertama sekali, untuk kemudahan, mari kita alihkan kod dalam "Teknologi Pintu Gelangsar dalam CSS":
Bahagian XHTML:

<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>
Salin selepas log masuk

Bahagian 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;  
}
Salin selepas log masuk
Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan