Maison >interface Web >tutoriel CSS >Code d'effets spéciaux du menu de porte coulissante implémenté par l'échange DIV+CSS_Experience

Code d'effets spéciaux du menu de porte coulissante implémenté par l'échange DIV+CSS_Experience

WBOYoriginal: 2016-05-16 12:05:311235parcourir

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Effets sp茅ciaux du menu de porte coulissante impl茅ment茅s par 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">Accueil des scripts</b>
  
    <b class="h3">[2007-05-16]</b>
    <span>
    <img src="/images/logo.gif" alt="jb51.net  "></span></a>
</li>
</ul>
</div>
</div>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：css souligner la couleur une phrase code_experience échangeArticle suivant：css souligner la couleur une phrase code_experience échange

Articles Liés

Voir plus