查看“测试:卡片测试”的源代码

<!-- Nav -->
<div class="home-grid home-button">
<div class="nav-card nav-card--button">
<div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=易什春秋]]</div>
<div class="nav-card__foreground nav-card__navimgtext">了解我们</div>
</div>
<div class="nav-card nav-card--button">
<div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=游戏列表]]</div>
<div class="nav-card__foreground nav-card__navimgtext">游戏列表</div>
</div>
<div class="nav-card nav-card--button">
<div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=Category:玩家攻略]]</div>
<div class="nav-card__foreground nav-card__navimgtext">玩家攻略</div>
</div>
<div class="nav-card nav-card--button">
<div class="nav-card__background">[[文件:Cardbg.jpg|300px|link=EaseCation_Wiki:人文关怀]]</div>
<div class="nav-card__foreground nav-card__navimgtext">人文关怀</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;
}

#home-nav .nav-card__background:after {
	position: absolute;
	pointer-events: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: linear-gradient( to right,transparent,#000);
    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);
	}
	
		.card-button {
		background: var( --color-base );
		border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
		transition: opacity 0.2s ease;
	}
	
	.card-button:hover {
		opacity: 0.8;
	}
	
	.card-button a {
		display: block;
		padding: 0.6rem;
		/* Cancel out a styles */
		background: none !important;
		color: #fff!important;
		font-size: 0.875rem;
		font-weight: 600;
		letter-spacing: 0.25px;
		text-align: center;
		transition: background 0.2s ease, color 0.2s ease;
	}
	
/* 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;
	}
}}