打印

[教程] 做了个纯CSS的图片展示效果.

snwebsite [楼主]

蓝色怪兽

荣誉管理团队

帖子: 4347
体力: 7370
威望: 69

1^# 大中小发表于 2007-3-19 16:50

!恩偶然想到可以这么玩,虽然少了flash或者脚本的动感效果,但是用CSS就能简单实现也蛮不错的嘛!

原理大家一看就明白啦. 书签 + 隐藏的图片...

<!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" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>
dl {
	position:absolute;
	width:240px;
	height:170px;
	border:10px solid #eee;
	}
dd {
	margin:0;
	width:240px;
	height:170px;
	overflow:hidden;
	}
img {
	border:1px solid black
	}
dt {
	position:absolute;
	right:3px;
	top:50px;
	}
a {
	display:block;
	margin:1px;
	width:20px;
	height:20px;
	text-align:center;
	font:700 12px/20px "宋体",sans-serif;
	color:#fff;
	text-decoration:none;
	background:#666;
	border:1px solid #fff;
	filter:alpha(opacity=40);
	opacity:.4;
	}
a:hover {
	background:#000
	}
</style>
<dl>
<dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>
<dd>
<img src="http://farm1.static.flickr.com/80/251133988_e0b8174060_m.jpg" alt="" title="" id="a" />
<img src="http://farm1.static.flickr.com/6/76318014_e50414fe42_m.jpg" alt="" title="" id="b" />
<img src="http://farm1.static.flickr.com/48/172522117_410a1e87c1_m.jpg" alt="" title="" id="c" />
</dd>
</dl>

提示：您可以先修改部分代码再运行

举一反三:

<!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" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>
dl {
	position:absolute;
	width:240px;
	height:170px;
	border:10px solid #eee;
	}
dd {
	margin:0;
	width:240px;
	height:170px;
	overflow:hidden;
	}
dt {
	position:absolute;
	right:1px;
	}
ul {
	margin:0;
	padding:0;
	width:260px;
	height:170px;
	list-style:none;
	background:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;
	border:1px solid #ccc
	}
#b {
	background-position:75% center
	}
#c {
	background-position:75% 86%
	}
li {
	width:205px;
	height:27px;
	font:12px/27px "宋体",sans-serif;
	white-space:nowrap;
	overflow:hidden;
	}
dt a {
	display:block;
	margin:1px;
	width:30px;
	height:56px;
	text-align:center;
	font:700 12px/55px "宋体",sans-serif;
	color:#fff;
	text-decoration:none;
	background:#666;
	}
dt a:hover {
	background:orange
	}
</style>
<dl>
<dt><a href="#a" title="">新闻</a><a href="#b" title="">娱乐</a><a href="#c" title="">体育</a></dt>
<dd>
<ul id="a">
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
	<li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
</ul>
<ul id="b">
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
	<li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
</ul>
<ul id="c">
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
	<li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
</ul>
</dd>
</dl>

提示：您可以先修改部分代码再运行

[ 本帖最后由 snwebsite 于 2007-3-21 10:23 编辑 ]

本帖最近评分记录

blank 威望 +2 精品文章，再补充点教程更好 XD 2007-3-19 18:14

LOST - FRINGE

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

old9

银牌会员

帖子: 600
体力: 995
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

2^# 大中小发表于 2007-3-19 16:59

哈哈，这个思路有意思。

http://old9.blogsome.com 已被 GFW 封锁

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

michaellee23

高级会员

帖子: 389
体力: 827
威望: 0
离线: 2 天

3^# 大中小发表于 2007-3-19 17:12

厉害，原来dl dt dd是干这个用的啊。我都不知道这个标签是干什么用的。

TOP

掌握加薪筹码 IT薪资宝典给您答案！

小毅

悟禅布衣

荣誉管理团队

帖子: 1125
体力: 1661
威望: 214
当前: 江苏南京
离线: 3 天

专长 网页设计,编辑,项目管理

4^# 大中小发表于 2007-3-19 22:03

这是个绝妙的想法，如果OPERA也能支持就更棒了！

毅博客 玉振之

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

笑天狂生

放眼未来

中级会员

帖子: 216
体力: 297
威望: 0
离线: 123 天

5^# 大中小发表于 2007-3-19 22:15

原来如此，有趣

暗夜艳阳，晴空朗月。

TOP

jdjia

秀才

金牌会员

帖子: 3844
体力: 4459
威望: 63
当前: 上海徐汇
离线: 2 天

专长 Flash,前端制作,PHP

6^# 大中小发表于 2007-3-19 22:32

楼主,强人.

赤脚跳着狐步舞（子鼠）我的BLOG：www.zishu.cn

TOP

AdamWan

大萬

高级会员

帖子: 255
体力: 592
威望: 2
当前: 北京海淀区
离线: 55 天

7^# 大中小发表于 2007-3-20 07:43

好帖子，这样的感觉也不错，但已经习惯了自动变换的样式，不知道用户还能不能够主动去点击切换。

IPICIQ.com 统统告诉你

TOP

yaoyuans

Yorkyao

新手上路

帖子: 424
体力: 19
威望: 0
当前: 上海浦东
离线: 1 天

8^# 大中小发表于 2007-3-20 09:33

这样也行，厉害，我怎么没想到呢

TOP

hzl918

新手上路

帖子: 24
体力: 46
威望: 0
离线: 577 天

9^# 大中小发表于 2007-3-20 10:09

楼主真强，收藏了。

TOP

aiyasoft

初级会员

帖子: 52
体力: 84
威望: 0
当前: 北京朝阳区
离线: 89 天

10^# 大中小发表于 2007-3-20 11:57

做记号咯

QQ:275333

TOP

jordan36

新手上路

帖子: 59
体力: 35
威望: 0
当前: 北京海淀区

11^# 大中小发表于 2007-3-20 15:36

顶
楼主强淫啊~~~~

TOP

261509559

随枫飘月

高级会员

帖子: 662
体力: 794
威望: 4
当前: 山东济南
离线: 1 天

专长 网页设计,前端制作,策划

12^# 大中小发表于 2007-3-20 16:05

太棒了好东西呀收藏了

yanglei blog

TOP

cbcman

初级会员

帖子: 65
体力: 147
威望: 0
当前: 广东广州
离线: 263 天

13^# 大中小发表于 2007-3-20 17:49

楼主，是高手！我以后会多来这里学习！希望楼主指教！谢谢！收藏了！

TOP

bmxcn

能蟹仔

中级会员

帖子: 145
体力: 321
威望: 0
离线: 66 天

14^# 大中小发表于 2007-3-21 09:06

引用:

原帖由 cbcman 于 2007-3-20 17:49 发表
楼主，是高手！我以后会多来这里学习！希望楼主指教！谢谢！收藏了！

我每天都看几次~~楼主还真强！
还没想过能用这个方法做。。

TOP

heihahei

馍馍

中级会员

帖子: 372
体力: 267
威望: 0
当前: 北京东城区
离线: 8 天

专长 网页设计,UI,平面

15^# 大中小发表于 2007-3-21 09:29

LZ 好强,受教了

TOP

yougucaofan

银牌会员

帖子: 1168
体力: 2136
威望: 0
离线: 101 天

16^# 大中小发表于 2007-3-21 09:42

不错不错，利用了锚点的概念作了这个效果，厉害。

忍受。一定要学会忍受。

TOP

luzhuqin

中级会员

帖子: 142
体力: 223
威望: 0
当前: 浙江杭州
离线: 40 天

17^# 大中小发表于 2007-3-21 09:47

楼主真牛啊/我做个记号.呵呵.下次找起来方便一点

http://www.shop34313562.taobao.com

TOP

km268

盗版阿飞

版主

帖子: 5826
体力: 8508
威望: 3
当前: 云南昆明

专长 网页设计,前端制作

18^# 大中小发表于 2007-3-21 10:39

效果太好了...
不知道是否能实现鼠标经过时就激活呢?
a:hover...

書閱三經人做自己自得自樂我就是我
支持正體字只因愛有心

TOP

禾火木风

高级会员

帖子: 1738
体力: 531
威望: 4
当前: 广西南宁
离线: 1 天

19^# 大中小发表于 2007-3-21 11:13

有意思。

DSTS

TOP

michelle1118

新手上路

帖子: 63
体力: 39
威望: 0
当前: 广东深圳

20^# 大中小发表于 2007-3-21 11:25

我也做个记号.

谢谢LZ

TOP

ypf0827

海参崴

中级会员

帖子: 153
体力: 328
威望: 0
当前: 浙江杭州
离线: 314 天

21^# 大中小发表于 2007-3-21 11:49

这好啊

TOP

1356803

中级会员

帖子: 149
体力: 247
威望: 0
离线: 37 天

22^# 大中小发表于 2007-3-21 12:09

佩服，css玩到高处，就是动脑子翻新花样了，自己也明白这个道理，可就是没往这方面想过，唉，笨了，笨了

TOP

michaellee23

高级会员

帖子: 389
体力: 827
威望: 0
离线: 2 天

23^# 大中小发表于 2007-3-21 13:47

dl dt dd标签到底有什么作用呢？

TOP

zlkent

中级会员

帖子: 695
体力: 353
威望: 0
当前: 上海浦东
离线: 3 天

专长 网页设计,前端制作,UE

24^# 大中小发表于 2007-3-21 17:22

FF下不行...

http://www.kyleblog.com

TOP

old9

银牌会员

帖子: 600
体力: 995
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

25^# 大中小发表于 2007-3-21 17:27

引用:

原帖由 zlkent 于 2007-3-21 17:22 发表
FF下不行...

可以的，自己写一个 html 试试。

[ 本帖最后由 old9 于 2007-3-21 20:50 编辑 ]

http://old9.blogsome.com 已被 GFW 封锁

TOP

wyzlx

初级会员

帖子: 35
体力: 71
威望: 0
离线: 36 天

26^# 大中小发表于 2007-3-21 20:26

厉害，收藏了

TOP

ashi

新手上路

帖子: 7
体力: 20
威望: 0
离线: 546 天

27^# 大中小发表于 2007-3-21 20:34

太智慧了，没想过还能这么玩。。。

TOP

xxcn2006

小小菜鸟

钻石会员

帖子: 3056
体力: 5567
威望: 0
当前: 北京海淀区
离线: 9 天

专长 PHP,.NET,AS

28^# 大中小发表于 2007-3-21 22:23

学了一招... 强悍.

经典论坛泡出来的...^^.

TOP

hahaxo

天牢囚犯

中级会员

帖子: 293
体力: 441
威望: 0
当前: 上海静安
离线: 1 天

29^# 大中小发表于 2007-3-21 23:36

有想法，喜欢。。。

about:blank

TOP

seagull8111

新手上路

帖子: 14
体力: 32
威望: 0
离线: 189 天

30^# 大中小发表于 2007-3-22 02:25

把 ul 变成 div
想放什么都可以、、
支持 ie + ff

ps: dl dt dd 从建站cms角度是很适合作图片效果的！

[ 本帖最后由 seagull8111 于 2007-3-22 02:28 编辑 ]

TOP