zoukankan
html css js c++ java
通过CSS控制图片样式,实现图片弹出效果
Code
1
<!
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
60
61
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
67
68
68
</
body
>
69
69
</
html
>
查看全文
相关阅读:
十四、内部类
十三、模板设计模式
十二、面向对象之多态
三、泛型
Spring Security学习笔记
Maven构建web项目在Eclipse中部署的几种方法
spring如何实现定时任务
安装jar包到本地仓库
使用java对pdf转成tiff文件
word文档转pdf解决修订问题
原文地址:https://www.cnblogs.com/ada313/p/1581804.html
最新文章
openresty随笔2---helloworld
phpstorm配置psr规范提醒
docker随笔9--docker-compose安装lnmp环境
docker随笔8--手动安装lnmp
docker随笔7--常用的shell命令sed与awk
docker随笔6--lnmp服务
docker随笔5---dockfile
docker随笔3--ssh服务
docker随笔3--网络配置
docker随笔2--数据卷
热门文章
BigDecimal的两个数相乘,看似失精
nginx 报错504 gateway time-out
windows安装nginx遇到的问题
STS创建spring boot文件报错IOException: Server returned HTTP response code: 407 for URL: http://start.spring.io
八、方法的重写
六、面向对象之继承
五、单例设计模式
十一、接口
十、抽象类
十五、面向对象总结
Copyright © 2011-2022 走看看