webserver/style.css at main · hellowack/webserver · GitHub

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
* {
    margin: 0px;/*设置四周边距都为0*/
    box-sizing: border-box;/*宽高的设置值包括border等*/
}

body {
    background: url("./background.jpg");//*设置背景图片*/
    background-repeat: no-repeat;
    background-attachment: fixed;/*设置背景图不随网页滑动而改变*/
    background-size: cover;
}
.content {
    perspective: 400px;
    width: 100%;
    height: 620px;
    position: relative;
}
/* 顶部导航条 */
.top {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
}
.top a {
  float: left;
  display: block;/*将链接变为块元素*/
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;/*去掉链接的下划线*/
 }

/* 链接颜色修改 */
.top a:hover {
  background-color: #ddd;
  color: black;
}

/*正中间的字*/
.avr{
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 300px;
    margin: auto;
    bottom: 0;
    color: #fff;
    font-size: 70px;
    font-weight: 500;
}

audio {
    position: fixed;
    bottom: 50px;
    right: 0;
}
/* 创建三列 本来是想做三列的，后来没做也懒得改了 */
/* center column */
.leftcolumn {
    float: left;
    width: 10%;
}

.centercolumn {
    margin: auto;
    width: 80%;
    height:1000px;
    padding: 10px;

}
.rightcolumn {
    float: left;
    width: 10%;
}

/* 文章卡片 */
.card {
    background-color:rgba(255,255,255,0.5);
    padding: 20px;
    margin-top: 20px;
    border-radius: 50px;

}
#biaoti {
    text-align: center;
}
#qita {
    text-align: right;
}
/* 列后面清除浮动 */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/*旋转的音符效果*/
.music {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 40px;
    height: 30px;
    animation: muscis 5s linear infinite;
}
@keyframes muscis {
    from {
        transform: rotate (0deg);
        opacity: .6;
    }

    to {
        transform: rotate(360deg);
        opacity: .8;
    }
}

.yinyue {
    display: flex;
    justify-content: space-between;
    padding: 0 400px;
    box-sizing: border-box;
    overflow: hidden;
}


/* 底部 */
.footer {
    background-image: linear-gradient(rgba(211, 104, 29, 0.80),rgba(5,72,99,0.80));

    text-align: center;
    margin-top: 50px;
}

/*中间的字效果*/
.btn {
    width: 18%;
    height: 60px;
    position: absolute;
    top: 65%;
    left: 41%;
    background-image: linear-gradient(rgba(211, 104, 29, 0.95),rgba(5,72,99,0.95));
    border-radius: 40px;
    border-color: dodgerblue;
}

.btn p{
        line-height: 60px;
        font-size: 22px;
        color: black;
    }
.bt {
    cursor: pointer; /*使鼠标放上边显示手指形状*/
    width: 25%; /*设置宽*/
    height: 50px; /*设置高*/
    display: block; /*行内元素设置宽高不生效，使用display:block;可以将行内元素设置为块集元素 */
    text-align: center; /*文字在容器中横向居中*/
    line-height: 40px; /*当数值与height一样的时候文字垂直居中*/
    text-decoration: none; /*将文字下划线去除*/
    background-image: linear-gradient(rgba(211, 104, 29, 0.95),rgba(5,72,99,0.95)); /*设置元素背景颜色：渐变*/
    color: rgba(0, 0, 0, 0.60); /*设置文字颜色*/
    border: none;  /*去除边框*/
    margin-bottom: 10px; /*下部外边框距离10像素*/
    margin: auto;  /*使按钮居中*/
    font-size: 20px; /*设置字体大小*/
}