Rumah >hujung hadapan web >tutorial css >Kod kesan khas menu pintu gelangsar dilaksanakan oleh pertukaran DIV+CSS_Experience

Kod kesan khas menu pintu gelangsar dilaksanakan oleh pertukaran DIV+CSS_Experience

WBOYasal: 2016-05-16 12:05:311210semak imbas

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Kesan khas menu pintu gelangsar yang dilaksanakan oleh Script Home DIV+CSS </title>
<style type="text/Css">  
#menu {  
  margin:0;  
  padding:0;  
  height:26em;  
  overflow:hidden;  
  background:#FFFCF2;  
  }  
#menu li {  
  list-style-type:none;  
  float:left;  
  display:block;  
  width:100%;  
  }  
#menu li a {  
  display:block;  
  text-decoration:none;  
  color:#00b;  
  margin:0;  
  width:100%;  
  }  
#menu li a span {  
  display:none;  
  color:#453739;  
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  font-size: 12px;  
  padding: 10px 0px 5px;  
  }  
#menu li a.one span {  
  display:block;  
  height:15em;  
  margin:0 10px;  
  }  
#menu li a:hover {  
  background:#FFFCF2;  
  }  
#menu li a:hover span {  
  display:block;  
  height:15em;  
  margin:0 10px;  
  cursor:pointer;  
  }  
#menu .h2 {  
  margin:0 5px;  
  padding:0;  
  color:#933A34;  
  font-size:12px;  
  border:0;  
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  }  
#menu .h3 {  
  margin:0 5px;  
  padding:0;  
  font-size:10px;  
  color:#62583B;  
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  }  
#menu img {  
  margin:0px 5px 5px;  
  border:1px solid #000;  
  float:left;  
  }  
.curved {  
  width:21em;  
  }  
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {  
  font-size:1px;  
  display:block;  
  background:#C7BC98;  
/* hide overflow:hidden from IE5/Mac */  
/* */  
overflow: hidden;  
/* */  
}  
.curved .b1, .curved .b2, .curved .b3 {  
  height:1px;  
  }  
.curved .b2, .curved .b3, .curved .b4 {  
  background:#FFFCF2;  
  border-left:1px solid #C7BC98;  
  border-right:1px solid #C7BC98;  
  }  
.curved .b1 {  
  margin:0 4px;  
  background:#C7BC98;  
  }  
.curved .b2 {  
  margin:0 2px;  
  border-width:0 2px;  
  }  
.curved .b3 {  
  margin:0 1px;  
  }  
.curved .b4 {  
  height:2px;  
  margin:0;  
  }  
.curved .c1 {  
  margin:0 5px;  
  background:#C7BC98;  
  }  
.curved .c2 {  
  margin:0 3px;  
  border-width:0 2px;  
  }  
.curved .c3 {  
  margin:0 2px;  
  }  
.curved .c4 {  
  height:2px;  
  margin: 0 1px;  
  }  
.curved .boxcontent {  
  display:block;  
  background:transparent;  
  border-left:1px solid #C7BC98;  
  border-right:1px solid #C7BC98;  
  font-size:0.9em;  
  text-align:justify;  
  }  
</style>

<div class="curved">
 <b class="b1 c1"></b>
 <b class="b2 c2"></b>
 <b class="b3 c3"></b>
 <b class="b4 c4"></b>
  <div class="boxcontent">
  <ul id="menu">
   <li>
   <a href="/">
    <b class="h2">Laman Utama Skrip</b>
  
    <b class="h3">[2007-05-16]</b>
    <span>
    <img src="/images/logo.gif" alt="jb51.net  "></span></a>
</li>
</ul>
</div>
</div>

Kenyataan：

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 sebelumnya：css garis bawah warna satu ayat pertukaran kod_pengalamanArtikel seterusnya：css garis bawah warna satu ayat pertukaran kod_pengalaman

Artikel berkaitan

Lihat lagi