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

原创 2007年10月11日 08:59:00

  国庆节回来,这回着实是踏踏实实的休息了一次,感觉精神好多了。活是干了一点,不过睡得放心多了。尤其是昨晚的台风影响,感觉好凉爽,一觉居然睡了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书签导航按钮

最近在写个网站,发现导航栏怎么写都不好看。后来在看别人的网站的时候发现了一个不错的设计,于是乎就想自己去试试如何写出同样的效果。先贴别人网站导航的效果图。 类似书签式的立体导航,瞬间就觉得这...
  • xy_ggsddu
  • xy_ggsddu
  • 2015年08月02日 18:29
  • 1478

图解CSS3核心技术与案例实战.大漠(带详细书签)

  • 2017年12月18日 18:33
  • 96.86MB
  • 下载

HTML5 CSS3专题 纯CSS打造相册效果

今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。 效果图: 效果是不是还是很不错的,最主要的是没有使用一...
  • lmj623565791
  • lmj623565791
  • 2014年06月15日 16:15
  • 19527

css3书签风格按钮列表(兼容ie,ff,chrome,safari和opera)

比原文增加了对于ie,Firefox,Opera的兼容效果 CSS3 jQuery style menu * { margin:0; padding:0; } html {hei...
  • snow_finland
  • snow_finland
  • 2014年02月12日 10:30
  • 1283

如何使用CSS3实现书页(书本)卷角效果

我们有时候想在踏得网页面上显示一个公告或用户提示信息。一个常用设计是使用书签形状。 我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。 用CSS3的伪元...
  • iefreer
  • iefreer
  • 2016年03月10日 16:46
  • 5392

如何使用CSS3实现书页(书本)卷角效果

我们有时候想在踏得网页面上显示一个公告或用户提示信息。一个常用设计是使用书签形状。 我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。 用CSS3的伪元...
  • iefreer
  • iefreer
  • 2016年03月10日 16:46
  • 5392

使用纯CSS3实现一个3D旋转的书本

有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用。书本的3D模型是...
  • iefreer
  • iefreer
  • 2016年03月19日 18:03
  • 4295

一个简单的tab标签页,纯css+js写的,带样式

最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了。 先看效果图: 接下来看下代码怎么写的吧: 一、sp文件easytab.jsp ...
  • yunsyz
  • yunsyz
  • 2014年01月27日 17:31
  • 2775

纯CSS3实现图片展示特效

Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成。本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可...
  • px459
  • px459
  • 2016年07月17日 21:22
  • 255

jQuery相册图片展示代码

  • 2013年11月22日 13:29
  • 228KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯CSS的相册图片展示(书签应用)
举报原因:
原因补充:

(最多只允许输入30个字)