`

纯CSS之使用书签构造图片切换展示效果

    博客分类：
  • css
CSSXHTMLHTML 
阅读更多
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>　
分享到：
| HTML默认样式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics