国庆节回来，这回着实是踏踏实实的休息了一次，感觉精神好多了。活是干了一点，不过睡得放心多了。尤其是昨晚的台风影响，感觉好凉爽，一觉居然睡了10个小时。
今天上班把以前写的一个东东整理了一下，不过还是有不少的缺憾在里面，感兴趣的朋友看看就可以了：）
其实这个东东已经有很多人写过了，不过还是把自己整理的贴出来大家瞧瞧，看还可以怎么改进。
先看看Demo吧：
［效果演示：http://www.doyoe.com/model/xhtmlcss/style/imgview/1.htm］
CSS部分：
a {
font:bold 12px/20px "宋体",sans-serif;
text-decoration:none;
}
#dyimgview {
width:260px;
}
#dyimgview h3 {
width:100%;
margin:10px 0;
overflow:hidden;
}
#dyimgview h3 a {
display:block;
width:20px;
height:20px;
margin:2px;
color:#fff;
text-align:center;
background-color:#aaa;
float:left;
}
#dyimgview h3 a:hover {
color:#f00;
background-color:#000;
}
#dyimgview ul {
margin:0;
padding:0;
list-style:none;
border:10px solid #ddd;
overflow:hidden;
height:170px;
voice-family:"/"}/"";voice-family:inherit;
height:150px;
}
#dyimgview ul li {
height:150px;
}
#dyimgview ul img {
width:240px;
height:150px;
vertical-align:top;
border:none;
}
/*Tips效果*/
.tips span {
display:none;
cursor:pointer;
}
.tips:link,a.tips:hover {
display:block;
}
.tips:hover span {
display:block;
width:100%;
text-align:center;
position:relative;
z-index:99;
margin-top:-32px;
color:#fff;
background-color:#840606;
padding:0.2em 0;
filter:alpha(opacity=70);
opacity:0.7;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飘零雾雨, edzmaster@gmail.com" />
<title>纯CSS构造图片展示</title>
</head>
<body>
<div id="dyimgview">
<h3><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></h3>
<ul>
<li id="a"><a href="" class="tips"><img src="1.jpg" alt="" /><span>哇塞，美女耶！</span></a></li>
<li id="b"><a href="" class="tips"><img src="2.jpg" alt="" /><span>喔，还是美女！</span></a></li>
<li id="c"><a href="" class="tips"><img src="3.jpg" alt="" /><span>作者本人</span></a></li>
</ul>
</div>
</body>
</html>
看Demo可以发现，这是通过书签来实现显示不同图片的效果，目前貌似只有IE，FF等浏览器支持，Opera下毫无效果（遗憾一）；而且不能为“1，2，3”指定“当前”效果样式（遗憾二），很难知道当前显示的是哪个部分的内容，不过应该有变通的方法，如果同学们有好的方法，不妨交流一下。