-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (62 loc) · 1.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;border: 0;padding: 0;}
input{
display: none;
}
label{
display: inline-block;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
}
.contens{
box-sizing: border-box;
width: 600px;
height: 480px;
border: 1px solid #000;
overflow: hidden;
position: relative;
}
.contens *{
width: 600px;
height: 480px;
}
#con1{background: pink;}
#con2{background: yellow;}
#con3{background: yellowgreen;}
#tab1:checked~#label1{background: pink;}
#tab2:checked~#label2{background: yellow;}
#tab3:checked~#label3{background: yellowgreen;}
#tab1:checked~.contens #con1{
position: relative;
top: 0px;}
#tab2:checked~.contens #con2
{position: relative;
top: -480px;}
#tab3:checked~.contens #con3{
position: relative;
top: -960px;}
</style>
</head>
<body>
<div class="tabs">
<input type="radio"checked="checked" id="tab1" name="tab"/>
<input type="radio" id="tab2" name="tab"/>
<input type="radio"id="tab3" name="tab"/>
<label for="tab1" id="label1">新闻</label>
<label for="tab2" id="label2">通知</label>
<label for="tab3" id="label3">公告</label>
<div class="contens">
<div id="con1" >新闻内容</div>
<div id="con2" >通知内容</div>
<div id="con3" >公告内容</div>
</div>
</div>
</body>
</html>