飘零雾雨的专栏

欢迎到我的主博客:css探索之旅(http://blog.doyoe.com/)

纯CSS的相册图片展示(书签应用)

  国庆节回来,这回着实是踏踏实实的休息了一次,感觉精神好多了。活是干了一点,不过睡得放心多了。尤其是昨晚的台风影响,感觉好凉爽,一觉居然睡了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”指定“当前”效果样式(遗憾二),很难知道当前显示的是哪个部分的内容,不过应该有变通的方法,如果同学们有好的方法,不妨交流一下。 

 
阅读更多
个人分类: CSS
想对作者说点什么? 我来说一句

HTML实现图片列表展示

qq_27632117 qq_27632117

2016-09-27 21:09:09

阅读数:6043

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭