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
>
查看全文
相关阅读:
Spark入门实战系列--1.Spark及其生态圈简介
理解JavaScript的原型链
为什么overflow:hidden能达到清除浮动的目的?
JavaScript中为什么需要!!?
CSS品控与流程
CSS高级特效(下)
CSS高级特效(上)
CSS变化、过渡与动画
CSS表单与数据表(下)
CSS表单与数据表(上)
原文地址:https://www.cnblogs.com/ada313/p/1581804.html
最新文章
Nginx 测试环境配置,留作笔记使用
Python Day2
Nginx 开启目录下载
简单的对象序列化协议(伪代码)
Java BASE58 以及 md5,sha256,sha1
DataBaseDaoAbstract
以太坊工具
BasicConverter 基本数据类型转换器
CentOS 7.0 使用 yum 安装 MariaDB 与 MariaDB 的简单配置
public class PageRender implements ResponseRender
热门文章
Java执行JavaScript代码
Spring总结
MyBatis总结
Log4j配置
Spark入门实战系列--4.Spark运行架构
Spark入门实战系列--3.Spark编程模型(下)--IDEA搭建及实战
Spark入门实战系列--3.Spark编程模型(上)--编程模型及SparkShell实战
Spark入门实战系列--2.Spark编译与部署(下)--Spark编译安装
Spark入门实战系列--2.Spark编译与部署(中)--Hadoop编译安装
Spark入门实战系列--2.Spark编译与部署(上)--基础环境搭建
Copyright © 2011-2022 走看看