Skip to content

Commit b033fb8

Browse files
cttincttin
committedJul 4, 2016
add files of task9
1 parent 5571d5b commit b033fb8

File tree

3 files changed

+172
-0
lines changed

3 files changed

+172
-0
lines changed
 

‎曹婷婷/L9/task9-1.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge chrome=1" />
6+
<title> CSS sprites</title>
7+
<style>
8+
/**{
9+
margin: 0px;
10+
padding: 0px;
11+
}*/
12+
.icon{
13+
width: 100px;
14+
height: 40px;
15+
display: inline-block;
16+
background: url(http://csssprites.com/results/c179c90432ffd5f54d2897f11d3f78bd/result.png) 0 0 no-repeat;
17+
cursor: pointer;
18+
padding-left: 35px;
19+
font-family: "Microsoft YaHei";
20+
line-height: 35px;
21+
}
22+
.s1{
23+
background-position: 2px 1px;
24+
}
25+
.s1:hover{
26+
background-position: 1px -134px;
27+
}
28+
.s2{
29+
background-position: 4px -42px;
30+
}
31+
.s2:hover{
32+
background-position: -1px -183px;
33+
}
34+
.s3{
35+
background-position: -1px -90px;
36+
}
37+
.s3:hover{
38+
background-position: 3px -228px;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<div class="icon s1">
44+
<span class="foeward">前进</span>
45+
</div>
46+
<div class="icon s2">
47+
<span class="begin">开始</span>
48+
</div>
49+
<div class="icon s3">
50+
<span class="stop">停止</span>
51+
</div>
52+
</body>
53+
</html>

‎曹婷婷/L9/task9-2.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge chrome=1" />
6+
<title> CSS sprites</title>
7+
<style>
8+
/**{
9+
margin: 0px;
10+
padding: 0px;
11+
}*/
12+
.icon{
13+
width: 100px;
14+
height: 40px;
15+
display: inline-block;
16+
background: url(http://csssprites.com/results/c179c90432ffd5f54d2897f11d3f78bd/result.png) 0 0 no-repeat;
17+
cursor: pointer;
18+
padding-left: 35px;
19+
font-family: "Microsoft YaHei";
20+
line-height: 35px;
21+
}
22+
.icon:hover{
23+
color: rgb(171,113,193);
24+
}
25+
.s1{
26+
background-position: 2px 1px;
27+
}
28+
.s1:hover{
29+
background-position: 1px -134px;
30+
}
31+
.s2{
32+
background-position: 4px -42px;
33+
}
34+
.s2:hover{
35+
background-position: -1px -183px;
36+
}
37+
.s3{
38+
background-position: -1px -90px;
39+
}
40+
.s3:hover{
41+
background-position: 3px -228px;
42+
}
43+
</style>
44+
</head>
45+
<body>
46+
<div class="icon s1">
47+
<span class="foeward">前进</span>
48+
</div>
49+
<div class="icon s2">
50+
<span class="begin">开始</span>
51+
</div>
52+
<div class="icon s3">
53+
<span class="stop">停止</span>
54+
</div>
55+
</body>
56+
</html>

‎曹婷婷/L9/task9-3.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="Edge,chrome=1" />
6+
<title>用css border实现三角形</title>
7+
<style>
8+
.triangle{
9+
width: 0px;
10+
height: 0px;
11+
margin: 20px;
12+
}
13+
.first{
14+
border-top: 50px solid blue;
15+
border-right: 50px solid yellow;
16+
border-bottom: 50px solid green;
17+
border-left: 50px solid red;
18+
}
19+
.second{
20+
border-top: 50px solid blue;
21+
border-right: 50px solid transparent;
22+
border-bottom: 50px solid transparent;
23+
border-left: 50px solid transparent;
24+
}
25+
.third{
26+
border-top: 50px solid transparent;
27+
border-right: 50px solid transparent;
28+
border-bottom: 50px solid transparent;
29+
border-left: 50px solid red;
30+
}
31+
.fourth{
32+
border-top: 50px solid transparent;
33+
border-right: 50px solid yellow;
34+
border-bottom: 50px solid transparent;
35+
border-left: 50px solid transparent;
36+
}
37+
.fifth{
38+
border-top: 50px solid transparent;
39+
border-right: 50px solid transparent;
40+
border-bottom: 50px solid green;
41+
border-left: 50px solid transparent;
42+
}
43+
.sixth{
44+
border-right: 70px solid transparent;
45+
border-bottom: 75px solid red;
46+
}
47+
.seventh{
48+
border-left: 75px solid transparent;
49+
border-bottom: 75px solid green;
50+
}
51+
52+
</style>
53+
</head>
54+
<body>
55+
<div class="first triangle"></div>
56+
<div class="second triangle"></div>
57+
<div class="third triangle"></div>
58+
<div class="fourth triangle"></div>
59+
<div class="fifth triangle"></div>
60+
<div class="sixth triangle"></div>
61+
<div class="seventh triangle"></div>
62+
</body>
63+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.