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
>
查看全文
相关阅读:
C#判断一个字符串是否是数字或者含有某个数字
SQL多字段排序
对于过长字符串的大小比对
WebFrom页面绑定数据过于冗长的处理方法
webform的导出
SQL数据库Truncate的相关用法
SQL的CharIndex用法
近期总结
每周一水(4-1)
Codeforces Round #238 (Div. 2) 解题报告
原文地址:https://www.cnblogs.com/ada313/p/1581804.html
最新文章
宅男计划
NOIP模拟测试26「嚎叫响彻在贪婪的机房·主仆见证了 Hobo 的离别·征途堆积出友情的永恒」
NOIP模拟测试25「字符串·乌鸦喝水·所陀门王的宝藏(陀螺王)」
NOIP模拟测试24「star way to hevaen·lost my music」
NOIP模拟测试20「周·任·飞」
NOIP模拟测试21「折纸·不等式」
NOIP模拟测试19「count·dinner·chess」
NOIP模拟测试23「mine·water·gcd」
NOIP模拟测试22「位运算」
线段树
热门文章
最长上升子序列 LIS (Longest Increasing Subsequence)
Catalan数
堆、优先队列、堆排序
NHOI2015E 黄金矿工
NHOI2015C 树
傻傻分不清楚
NOIP2012普及组T3 摆花
WebFrom局部刷新
用Jquery获取Url的参数
页面图片弹窗
Copyright © 2011-2022 走看看