xhtml实现的竖向鼠标滑过触发内容切换的代码

时间：2011-05-01 来源：网页代码站
代码简介：
老外弄的，并且还带了圆角，很流畅，当鼠标经过触发内容切换，很不错的，您试试。
代码内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>xhtml+css实现的竖向鼠标滑过触发内容切换的代码_网页代码站(www.webdm.cn)</title>
</head>
<style type="text/css">
 /* common styling */

 /* Set up the default font and ovrall size to include image */
 body {
        background: #fff;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        font-size: 12px;
}

#info {font-family:font-family:"trebuchet ms", trebuchet, arial, sans-serif; font-size:1em;}
#menu {
  margin:0; 
  padding:0; 
   
  overflow:hidden; 
  background:#f0f0f0;
  }
#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:#000;
  }
#menu li a.one span {
  display:block; 
   
  margin:0 10px;
  }
#menu li a:hover {
  background:#f1f1f1;
  }
#menu li a:hover span {
  display:block; 
   
  margin:0 10px; 
  cursor:pointer;
  }
#menu .h2 {
  margin:0 5px; 
  padding:0; 
  color:#808; 
  font-variant:small-caps; 
  font-size:1.5em; 
  border:0;
  }
#menu .h3 {
  margin:0 5px; 
  padding:0; 
  font-size:1.1em; 
  color:#00b;
  }
#menu img {
  margin:5px 5px 5px 0; 
  border:1px solid #000; 
  float:left;
  }
.curved {
  width:21em;
  margin:0 auto;
  }
.curved .b1, .curved .b2, .curved .b3, .curved .b4  {
  font-size:1px; 
  display:block; 
  background:#88c;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ 
}
.curved .b1, .curved .b2, .curved .b3 {
  
  }
.curved .b2, .curved .b3, .curved .b4 {
  background:#f0f0f0; 
  border-left:1px solid #88c; 
  border-right:1px solid #88c;
  }
.curved .b1 {
  margin:0 4px; 
  background:#88c;
  }
.curved .b2 {
  margin:0 2px; 
  border-width:0 2px;
  }
.curved .b3 {
  margin:0 1px;
  }
.curved .b4 {
   
  margin:0;
  }
.curved .c1 {
  margin:0 5px; 
  background:#88c;
  }
.curved .c2 {
  margin:0 3px; 
  border-width:0 2px;
  }
.curved .c3 {
  margin:0 2px;
  }
.curved .c4 {
   
  margin: 0 1px;
  }
.curved .boxcontent {
  display:block; 
  background:transparent; 
  border-left:1px solid #88c; 
  border-right:1px solid #88c; 
  font-size:0.9em; 
  text-align:justify;
  }
</style>
<body>

<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 class="m5 five" href="#nogo">
      <b class="h2">Paul Cézanne</b><br />
      <b class="h3">(1839-1906)</b>
      <span>
       <img src="http://www.webdm.cn/images/20091030/cezanne.jpg" alt="painting" title="painting" />
       The French painter who exhibited little in his lifetime and pursued 
       his interests increasingly in artistic isolation, is regarded today 
       as one of the great forerunners of modern painting.
      </span>
     </a>
    </li>
    <li>
     <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">Henri Matisse</b><br />
      <b class="h3">(1869-1954)</b>
      <span>
       <img src="http://www.webdm.cn/images/20091030/matisse.jpg" alt="painting" title="painting" />
       Initially planned a career as a lawyer. However, he began to paint 
       after an acute attack of appendicitis and then proceeded to become 
       a leader in many art circles.
      </span>
     </a>
    </li>
    <li>
     <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">William Turner</b><br />
      <b class="h3">(1775-1851)</b>
      <span>
       <img src="http://www.webdm.cn/images/20091030/turner.jpg" alt="painting" title="painting" />
       This English painter was one of the greatest romantic interpreters 
       of nature in the history of Western art and is still unrivaled in 
       the virtuosity of his painting of light.
      </span>
     </a>
    </li>
    <li>
     <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">John Constable</b><br />
      <b class="h3">(1776-1837)</b>
      <span>
       <img src="http://www.webdm.cn/images/20091030/constable.jpg" alt="painting" title="painting" />
       Tried to capture informally the effects of changing light and the 
       patterns of clouds moving across the country sky. He loved the 
       countryside, and his best work was of outdoor scenes in his native 
       Suffolk.
      </span>
     </a>
    </li>
    <li>
     <a class="one" href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">Claude Monet</b><br />
      <b class="h3">(1840-1926)</b>
      <span>
       <img src="http://www.webdm.cn/images/20091030/monet.jpg" alt="painting" title="painting" />
       Monet's concern was to reflect the influence of light on a subject. 
       He never abandoned his Impressionist painting style until his death 
       in 1926 when Fauvism and Cubism were en vogue and when abstract 
       painting came into existence.
      </span>
     </a>
    </li>
   </ul>
  </div>
 <b class="b4 c4"></b>
 <b class="b3 c3"></b>
 <b class="b2 c2"></b>
 <b class="b1 c1"></b>
</div>

</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/79b71f31-f55c-499c-b58a-34bbacb55c6e.html