xhtml实现的竖向鼠标滑过触发内容切换的代码
代码简介：
老外弄的，并且还带了圆角，很流畅，当鼠标经过触发内容切换，很不错的，您试试。
代码内容：
<!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;
height:32.5em;
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;
height:15em;
margin:0 10px;
}
#menu li a:hover {
background:#f1f1f1;
}
#menu li a:hover span {
display:block;
height:15em;
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 {
height:1px;
}
.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 {
height:2px;
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 {
height:2px;
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
