本文介绍了一种利用CSS进行图片展示的方法，通过设置不同状态下的样式实现图片预览效果。详细展示了如何使用相对定位、绝对定位及伪类选择器等技术实现图片放大功能。
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
2<html xmlns="http://www.w3.org/1999/xhtml" >3
3<head>4
4 <title>Untitled Page</title>5
5 <style type = "text/css">
6
6 body{}{}{}{7
7 margin-top:10px;8
8 margin-right:0;9
9 margin-bottom:0;10
10 margin-left:0;11
11 padding:0;12
12 }13
13 #picture{}{}{}{14
14 background-color:#ffffff;15
15 left:10px;16
16 position:relative;17
17 top:10px;18
18 width:35px;19
19 }20
20 #picture a .large{}{}{}{21
21 width:1px;22
22 display:block;23
23 left:-1px;24
24 top:-1px;25
25 height:1px;26
26 position:absolute;27
27 border-width:0px;28
28 29
29 }30
30 #picture a img{}{}{}{31
31 border:0px;32
32 }33
33 #picture a.pop,#picture a.pop:visited{}{}{}{34
34 background:#ffffff;35
35 border:1px solid #000000;36
36 display:block;37
37 height:35px;38
38 left:0;39
39 text-decoration:none;40
40 top:0;41
41 width:35px;42
42 }43
43 #picture a.pop:hover{}{}{}{44
44 background:#8c97a3;45
45 color:#000000;46
46 text-decoration:none;47
47 }48
48 #picture a.pop:hover .large{}{}{}{49
49 border:1px solid #000000;50
50 display:block;51
51 height:200px;52
52 left:40px;53
53 position:absolute;54
54 top:40px;55
55 width:200px;56
56 }57
57 </style>58
58</head>59
59<body>60
6061
61<div id = "picture">62
62 <a class = "pop" href = "#">63
63 <img src = "midle.jpg" width = "35px" height = "35px" />64
64 <img src = "all1.jpg" width = "100px" height = "100px" class = "large" />65
65 </a>66
66</div>67
6768
68</body>69
69</html>
扫一扫
2037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
