User:盐棋/Sandbox.css:修订间差异
小 (调整css) |
小 (初步css) |
||
第1行: | 第1行: | ||
. | .infotable { | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
第17行: | 第17行: | ||
/* 媒体查询 */ | /* 媒体查询 */ | ||
@media (min-width: 720px) { | @media (min-width: 720px) { | ||
. | .infotable { | ||
grid-template-areas: | grid-template-areas: | ||
"header header" | "header header" | ||
第25行: | 第25行: | ||
@media (max-width: 719px) { | @media (max-width: 719px) { | ||
. | .infotable { | ||
grid-template-areas: | grid-template-areas: | ||
"header" | "header" | ||
第40行: | 第40行: | ||
.main { | .main { | ||
grid-area: main; | grid-area: main; | ||
display: grid; | |||
grid-template-columns: 1fr repeat(3, 2fr); | |||
} | } | ||
第45行: | 第47行: | ||
grid-area: figure; | grid-area: figure; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | |||
.infotable.light .bg-c { | |||
background-color: lightskyblue; | |||
} | |||
.infotable.conflict .bg-c { | |||
background-color: #b99afd; | |||
} | |||
.infotable.colorless .bg-c { | |||
background-color: #f4d2f8; | |||
} | |||
.gc-1 { | |||
grid-column: 1/-1; | |||
} | |||
.gc-2 { | |||
grid-column: 2/-1; | |||
} | |||
.span-2 { | |||
grid-column: span 2; | |||
} | |||
.span-3 { | |||
grid-column: span 3; | |||
} | |||
.span-4 { | |||
grid-column: span 4; | |||
} | |||
.span-5 { | |||
grid-column: span 5; | |||
} | } |
2024年3月12日 (二) 23:18的版本
.infotable {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
text-align: center;
}
.header,
.main,
.figure {
width: 100%;
box-sizing: border-box;
}
/* 媒体查询 */
@media (min-width: 720px) {
.infotable {
grid-template-areas:
"header header"
"main figure";
}
}
@media (max-width: 719px) {
.infotable {
grid-template-areas:
"header"
"figure"
"main";
}
}
/* 设置 grid area */
.header {
grid-area: header;
}
.main {
grid-area: main;
display: grid;
grid-template-columns: 1fr repeat(3, 2fr);
}
.figure {
grid-area: figure;
margin: 0 auto;
}
.infotable.light .bg-c {
background-color: lightskyblue;
}
.infotable.conflict .bg-c {
background-color: #b99afd;
}
.infotable.colorless .bg-c {
background-color: #f4d2f8;
}
.gc-1 {
grid-column: 1/-1;
}
.gc-2 {
grid-column: 2/-1;
}
.span-2 {
grid-column: span 2;
}
.span-3 {
grid-column: span 3;
}
.span-4 {
grid-column: span 4;
}
.span-5 {
grid-column: span 5;
}