无编辑摘要 标签：   |
|||
| （未显示1个用户的13个中间版本） | |||
| 第1行： | 第1行： | ||
<!-- Nav --> | |||
<div class="home-grid home-button"> | <div class="home-grid home-button"> | ||
<div class=" | <div class="nav-card nav-card--button"> | ||
<div class=" | <div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=易什春秋]]</div> | ||
<div class=" | <div class="nav-card__foreground nav-card__navimgtext">了解我们</div> | ||
</div> | </div> | ||
<div class=" | <div class="nav-card nav-card--button"> | ||
<div class=" | <div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=游戏列表]]</div> | ||
<div class=" | <div class="nav-card__foreground nav-card__navimgtext">游戏列表</div> | ||
</div> | </div> | ||
<div class=" | <div class="nav-card nav-card--button"> | ||
<div class=" | <div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=Category:玩家攻略]]</div> | ||
<div class=" | <div class="nav-card__foreground nav-card__navimgtext">玩家攻略</div> | ||
</div> | </div> | ||
<div class=" | <div class="nav-card nav-card--button"> | ||
<div class=" | <div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=EaseCation_Wiki:人文关怀]]</div> | ||
<div class=" | <div class="nav-card__foreground nav-card__navimgtext">人文关怀</div> | ||
</div> | </div> | ||
</div>< | </div> | ||
<!-- CSS --> | |||
{{#CSS: | |||
.nav-card { | |||
position: relative; | |||
padding: 15px; | |||
/*margin-bottom: 10px;*/ | |||
background: var( --color-surface-1 ); | |||
border-radius: 15px; | |||
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); | |||
font-size: 0.875rem; | |||
} | |||
#home-nav { | |||
margin-top: 0.8rem; | |||
} | |||
.nav-card__background:after { | |||
position: absolute; | |||
pointer-events: none; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
display: block; | |||
background: linear-gradient(to right,#000,transparent); | |||
content: ""; | |||
} | |||
#home-nav .nav-card__foreground { | |||
pointer-events: none; | |||
height: 100%; | |||
width: 100%; | |||
display: flex; | |||
align-items: center; | |||
padding: 0 15px; | |||
color: #fff; | |||
font-weight: 500; | |||
} | |||
.nav-card__navimgtext { | |||
pointer-events: none; | |||
height: 100%; | |||
width: 100%; | |||
display: flex; | |||
align-items: center; | |||
padding: 0 15px; | |||
color: #fff; | |||
font-weight: 500; | |||
} | |||
.nav-card__background { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
background: #242a31; | |||
border-radius: 15px; | |||
} | |||
.nav-card__background img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
object-position: center; | |||
} | |||
.nav-card__foreground { | |||
position: absolute; | |||
} | |||
.nav-card p { | |||
margin-top: 0.2rem; | |||
font-size: 0.875rem; | |||
} | |||
.nav-card.nav-card--button { | |||
overflow: hidden; | |||
padding: 0; | |||
background: #242a31; | |||
} | |||
.nav-card--button a { | |||
display: flex; | |||
height: 100%; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0 15px; | |||
background: transparent; | |||
color: #fff; | |||
font-weight: 500; | |||
} | |||
.nav-card--button .nav-card__background a { | |||
padding: 0; | |||
} | |||
.nav-card--button img { | |||
transition: transform 0.3s ease; | |||
} | |||
.nav-card--button:hover img { | |||
transform: scale(1.05); | |||
} | |||
/* grid 排版 */ | |||
.home-grid { | |||
display: grid; | |||
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) ); | |||
grid-auto-rows: minmax( 3rem, auto ); | |||
grid-gap: 0.625rem; | |||
margin-top: 10px; | |||
} | |||
.home-grid a.external { | |||
background-image: none; | |||
} | |||
}} | |||
2024年4月6日 (六) 00:41的最新版本
