-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
137 lines (136 loc) · 3.36 KB
/
style.css
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
main{
display:flex; flex-wrap:wrap;
justify-content:center;
align-items:stretch;
background-color:#cccccc;
}
main>.box
{ flex:auto;
background-color:#ffcccc;
text-align:center;
}
nav>.logo{
flex:auto;
background-color:#ffcccc;
text-align:center;
}
nav>.user{
flex:auto;
background-color:#ccffcc;
text-align:center;
}
nav>.menu{
flex:auto;
background-color:#ccccff;
text-align:center;
}
nav>.box{
flex:auto;border-radius: 10px;;
background-color:#ffcccc;
text-align:center;
}
nav>.clicker{
flex:none;width:320px;
background-color:blue;
text-align:right;
}<!--标签名称选择器。-->
body{
font-size:16px;font-family:"微软黑体";background-color:#00B315;
}
h1{
border-radius:10px;background-color:#003344;color:white;font-weight:bold;font-size:30px;
text-align:center;padding:10px;margin:0px;
}
h3{
padding:5px;font-size:16px;text-decoration:underline;
text-align:center;padding:10px;
}
table{
text-align:center;
width:400px;margin-left:auto;margin-right:auto;border-bottom:1px solid #888888;
border-collapse:collapse;
}
td{
border-bottom:1px solid #888888;padding:10px;
}
<!--表格中的第一对 tr -->
tr:nth-child(1){
background-color:#7788aa;color:#ffffff;
}
/* 表格中的第偶数对 tr */
tr:nth-child(even){
background-color:#e8e8e8;
}
/* class 选择器。*/
.head{
background-color:#003344;
}
div.keyword{
color:red
}
ul{
background-color:rgb(6, 253, 109);text-align:left;padding:10px;border-radius: 10px;;
}
.content{
background-color:greenyellow;text-align:center;padding:10px;
width:1000px;margin-left:auto;margin-right:auto;
}
div.box{
border-radius:10px;width:400px;padding:10px;margin:10px;background-color:white;
display:inline-block;vertical-align:top;overflow:auto;
}
.title{
font-weight:bold;font-size:16px;
text-align:center;padding:10px;
}
.button{
backgroud-color：#f44336 /*red */
border: none; color:white; padding；15px 32px;
text-align:center; display:inline-block;font-size:16px;
cursor:pointer;box-shadow:0 8px 16px 0 rgba(0,0,0,2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.dialog{
position:fixed; top:100px;left:50%；transform(-100px,0px);width:200px;
padding:10px;border:1px solid #888888;
background-color:#eeeeee; box-shadow:0px 0px 10px #000000;
display:none;
}
.dialog>.close{
position:absolute;top:2px;right:2px;cursor:pointer;
}
footer{
padding:5px;font-size:16px;text-decoration:none;
background-color:#003344;color:white;font-weight:bold;font-size:18px;
text-align:center;padding:10px;text-align:center;
}
<!--id 选择器。-->
#btn{
border:1px solid #888888;cursor:pointer;
background-color:#4CAF50;padding:5px;;margin-left:auto;margin-right:auto;
}
<!--虚拟选择器：搭配其他选择器使用。-->
<!-- :hover 虚拟选择器：鼠标移到目标上时，调用一组设定 -->
#btn:hover{
background-color:#888888;
}
<!-- :focus 虚拟选择器：当目标取得焦点时，调用一组设定 -->
input:focus{
border:2px solid #ff0000;
}
<!-- 阶层式选择器：搭配其他选择器使用
ul.favorite a{
color:#0000ff;text-align:left;
}
ul.demo a{
color:#008800;text-align:left;
}
ul.music a{
color:#0088ee;text-align:left;
}
@media screen and (max-width:500px){
.head{font-size:24px;}
.content{width:100%;text-align:center;
main>.box{
width:90%
}
}