50projects50days/index/css/style.css
2024-06-09 15:18:01 +08:00

230 lines
3.9 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* 全局设置 */
*, 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;
}
}