MediaWiki:Common.css:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 标签:advanced mobile edit mobile web edit mobile edit |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
# | /* Hero 区域 */ | ||
.hero { | |||
width: 100%; | |||
padding: 60px 20px; | |||
background: linear-gradient(135deg, #9ac6ff, #c7e8ff); | |||
border-radius: 20px; | |||
margin-bottom: 30px; | |||
text-align: center; | |||
} | } | ||
.hero h1 { | |||
font-size: 36px; | |||
. | margin: 0; | ||
} | } | ||
.hero p { | |||
font-size: 18px; | |||
margin-top: 10px; | |||
} | } | ||
. | /* 卡片布局 */ | ||
.card-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 20px; | |||
justify-content: space-between; | |||
margin-bottom: 40px; | |||
} | } | ||
.card { | |||
flex: 1 1 calc(50% - 20px); | |||
background: white; | |||
padding: 20px; | |||
border-radius: 16px; | |||
box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |||
transition: transform 0.2s, box-shadow 0.2s; | |||
} | } | ||
.card:hover { | |||
transform: translateY(-4px); | |||
box-shadow: 0 6px 16px rgba(0,0,0,0.12); | |||
} | } | ||
.card h2 { | |||
margin-top: 0; | |||
} | } | ||
@media (max-width: | /* 手机适配 */ | ||
@media (max-width: 700px) { | |||
.card-grid { | |||
flex-direction: column; | |||
} | |||
.card { | |||
flex: 1 1 100%; | |||
} | |||
} | } | ||
2025年11月23日 (日) 23:00的版本
/* Hero 区域 */
.hero {
width: 100%;
padding: 60px 20px;
background: linear-gradient(135deg, #9ac6ff, #c7e8ff);
border-radius: 20px;
margin-bottom: 30px;
text-align: center;
}
.hero h1 {
font-size: 36px;
margin: 0;
}
.hero p {
font-size: 18px;
margin-top: 10px;
}
/* 卡片布局 */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
margin-bottom: 40px;
}
.card {
flex: 1 1 calc(50% - 20px);
background: white;
padding: 20px;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.card h2 {
margin-top: 0;
}
/* 手机适配 */
@media (max-width: 700px) {
.card-grid {
flex-direction: column;
}
.card {
flex: 1 1 100%;
}
}