230 lines
3.9 KiB
CSS
230 lines
3.9 KiB
CSS
/* 全局设置 */
|
||
|
||
*, a, p {
|
||
text-decoration : none;
|
||
transition : .3s;
|
||
color : #009800;
|
||
user-select : none;
|
||
font-family : 'MiSans', sans-serif;
|
||
}
|
||
|
||
a:hover {
|
||
color : #009800;
|
||
}
|
||
|
||
.cards {
|
||
transition : .5s;
|
||
}
|
||
|
||
.cards:hover {
|
||
transform : scale(1.01);
|
||
transition : .5s;
|
||
}
|
||
|
||
.cards:active {
|
||
transform : scale(.95);
|
||
transition : .5s;
|
||
}
|
||
|
||
.main {
|
||
width : 100%;
|
||
margin : 10px;
|
||
/*border : 1px solid black;*/
|
||
display : flex;
|
||
}
|
||
|
||
.left {
|
||
width : 20%;
|
||
min-width : 320px;
|
||
margin : 10px;
|
||
/*border : 1px solid black;*/
|
||
display : flex;
|
||
flex-direction : column;
|
||
}
|
||
|
||
.right {
|
||
width : 80%;
|
||
min-width : 500px;
|
||
margin : 10px;
|
||
/*border : 1px solid black;*/
|
||
display : flex;
|
||
background : rgba(0, 0, 0, 5%);
|
||
/*backdrop-filter : blur(10px);*/
|
||
padding : 0rem;
|
||
border-radius : 6px;
|
||
}
|
||
|
||
.father {
|
||
width : auto;
|
||
/*height: 500px;*/
|
||
margin : 0px;
|
||
/*border : 1px solid black;*/
|
||
padding : 0px;
|
||
display : flex;
|
||
flex-direction : column;
|
||
/* 主轴排列方向 */
|
||
/* flex-direction: row; */
|
||
/* flex-direction: row-reverse; */
|
||
/* flex-direction: column; */
|
||
/* flex-direction: column-reverse; */
|
||
/* 元素换行 */
|
||
/* flex-wrap : wrap; */
|
||
/* 在主轴上的对齐方式 */
|
||
/* 右对齐 */
|
||
/* justify-content: flex-end; */
|
||
/* 居中 */
|
||
/* justify-content: center; */
|
||
/* 左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。 */
|
||
/* justify-content: space-between; */
|
||
/* 项目之间间距为左右两侧项目到容器间距的2倍 */
|
||
/* justify-content: space-around; */
|
||
/* 项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。 */
|
||
/* justify-content: space-evenly; */
|
||
/* 轴 */
|
||
/* align-items: flex-end; */
|
||
/* align-items: center; */
|
||
/* align-items: baseline; */
|
||
}
|
||
|
||
|
||
/* 控制行，设置为弹性盒子 */
|
||
|
||
.son {
|
||
display : flex;
|
||
/* 设置主轴对齐方式 */
|
||
justify-content : space-around;
|
||
}
|
||
|
||
|
||
/* 控制图片和文字行 */
|
||
|
||
.second {
|
||
background : rgb(0 0 0 / 5%);
|
||
/*backdrop-filter : blur(10px);*/
|
||
padding : .5rem;
|
||
border-radius : 6px;
|
||
margin : 5px;
|
||
/* 设置每个格子比例大小 */
|
||
width : 25%;
|
||
/* 文字居中 */
|
||
text-align : center;
|
||
cursor : pointer;
|
||
}
|
||
|
||
.second:hover {
|
||
background-color : #009800;
|
||
color : #FFFFFF !important;
|
||
}
|
||
|
||
.second img {
|
||
width : 100%;
|
||
min-width : 60px;
|
||
}
|
||
|
||
.logo {
|
||
width : 100%;
|
||
text-align : center;
|
||
}
|
||
|
||
.logo img {
|
||
width : 100%;
|
||
min-width : 60px;
|
||
}
|
||
|
||
|
||
/*头像*/
|
||
|
||
.main-img {
|
||
display : flex;
|
||
align-items : center;
|
||
max-height : 200px;
|
||
}
|
||
|
||
.main-img img {
|
||
border-radius : 5%;
|
||
width : 120px;
|
||
}
|
||
|
||
.main-img img:hover {
|
||
transform : rotate(360deg);
|
||
}
|
||
|
||
.img-title {
|
||
width : 100%;
|
||
margin-left : 12px;
|
||
}
|
||
|
||
span.img-title {
|
||
font-size : 3rem;
|
||
color : #009800;
|
||
font-family : 'Pacifico-Regular' !important;
|
||
}
|
||
|
||
span.img-text {
|
||
font-size : 2rem;
|
||
font-family : 'Pacifico-Regular' !important;
|
||
}
|
||
|
||
.message {
|
||
background : rgb(0 0 0 / 5%);
|
||
backdrop-filter : blur(10px);
|
||
/*margin: 0.5rem;*/
|
||
padding : 1rem;
|
||
border-radius : 6px;
|
||
/*margin-top : 3.5rem;*/
|
||
width : auto;
|
||
cursor : pointer;
|
||
}
|
||
|
||
|
||
/*自适应*/
|
||
|
||
|
||
/*小于1200px时*/
|
||
|
||
@media (max-width: 1200px) {
|
||
}
|
||
|
||
|
||
/*小于1000px时*/
|
||
|
||
@media (max-width: 1000px) {
|
||
.main {
|
||
width : 100%;
|
||
margin : 10px;
|
||
/*border : 1px solid black;*/
|
||
display : flex;
|
||
flex-direction : column;
|
||
}
|
||
.left {
|
||
width : auto;
|
||
min-width : 500px;
|
||
margin : 10px;
|
||
/*border : 1px solid black;*/
|
||
display : flex;
|
||
flex-direction : column;
|
||
}
|
||
.right {
|
||
width : auto;
|
||
min-width : 500px;
|
||
margin : 10px;
|
||
/*border : 1px solid black;*/
|
||
display : flex;
|
||
}
|
||
.main-img {
|
||
width : 100%;
|
||
display : flex;
|
||
align-items : center;
|
||
max-height : 200px;
|
||
}
|
||
.message {
|
||
background : rgb(0 0 0 / 5%);
|
||
backdrop-filter : blur(10px);
|
||
/*margin: 0.5rem;*/
|
||
padding : 1rem;
|
||
border-radius : 6px;
|
||
width : auto;
|
||
cursor : pointer;
|
||
}
|
||
}
|