Skip to content

Commit ff743bb

Browse files
huang303513huang303513
committed
base64数据图片、css3实现导航目录
1 parent 3b9629a commit ff743bb

File tree

2 files changed

+84
-0
lines changed

2 files changed

+84
-0
lines changed

‎html&css练习/html和css中使用base64图片数据.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>base64的使用</title>
6+
<style type="text/css">
7+
.test{
8+
width: 50;
9+
height: 50;
10+
background-image: url("data:image/png;base64,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");
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div class="test">
16+
</div>
17+
</br>
18+
<img width="200" height="600" src="data:image/png;base64,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">
19+
</body>
20+
21+
</html>

‎html&css练习/用css3写导航目录.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>用css3写导航目录</title>
7+
<script type="text/javascript">
8+
</script>
9+
<style type="text/css">
10+
.admin-sidebar-list>li input {
11+
position: absolute;
12+
width: 100%;
13+
height: 48px;
14+
z-index: 10;
15+
opacity: 0;
16+
}
17+
.admin-sidebar-list>li ul{
18+
margin: 0;
19+
list-style-type: none;
20+
padding-left: 20px;
21+
display: none;
22+
}
23+
.admin-sidebar-list>li input:checked ~ul{
24+
display: block;
25+
-webkit-animation-duration:1s;
26+
}
27+
.admin-sidebar-list>li ul li:hover{
28+
background-color: #eee;
29+
}
30+
31+
</style>
32+
</head>
33+
34+
<body>
35+
<div>
36+
<ul class="admin-sidebar-list">
37+
<li>
38+
<input type="checkbox" checked="checked">
39+
<a>目录一</a>
40+
<ul>
41+
<li><a href="#">子目录一</a></li>
42+
<li><a href="#">子目录二</a></li>
43+
</ul>
44+
</li>
45+
<li>
46+
<input type="checkbox">
47+
<a>目录二</a>
48+
<ul>
49+
<li><a href="#">子目录一</a></li>
50+
<li><a href="#">子目录二</a></li>
51+
</ul>
52+
</li>
53+
</ul>
54+
</div>
55+
</body>
56+
57+
</html>
58+
59+
60+
<!-- 参考地址：
61+
http://mp.weixin.qq.com/s?__biz=MjM5MDk5MzE2Mw%3D%3D&mid=2527293900&idx=1&sn=911c1111d4c3dd588ac388854265b946&mpshare=1&scene=1&srcid=11110a62QEqLreuWPco22bQg
62+
-->
63+

0 commit comments

Comments
 (0)