記錄一下這個單頁。
也就是一個簡單的頁面
實現的代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>愛酒界 · 即將啓航</title>
<style>
/* 全局重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(145deg, #f6f0ea 0%, #e8dfd7 100%);
padding: 20px;
}
.card {
max-width: 700px;
width: 100%;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 48px;
padding: 50px 40px 40px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
text-align: center;
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
}
.logo {
font-size: 56px;
margin-bottom: 8px;
letter-spacing: 2px;
}
h1 {
font-size: 36px;
font-weight: 700;
color: #2c1810;
letter-spacing: 4px;
margin-bottom: 6px;
}
.subtitle {
font-size: 16px;
color: #7a5f4e;
letter-spacing: 6px;
font-weight: 300;
margin-bottom: 28px;
}
.domain {
display: inline-block;
background: #f0e8e0;
padding: 8px 24px;
border-radius: 40px;
font-size: 18px;
font-weight: 500;
color: #3d291f;
letter-spacing: 2px;
margin-bottom: 30px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
background: #f8f3ee;
padding: 20px 24px;
border-radius: 28px;
margin-bottom: 32px;
text-align: left;
font-size: 14px;
color: #3d291f;
}
.info-grid .label {
color: #8a7364;
font-weight: 400;
letter-spacing: 1px;
}
.info-grid .value {
font-weight: 500;
word-break: break-all;
}
.info-grid .full-width {
grid-column: 1 / -1;
}
.beian {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(60, 40, 30, 0.12);
font-size: 14px;
}
.beian a {
color: #6b4f3c;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
letter-spacing: 1px;
}
.beian a:hover {
color: #2c1810;
text-decoration: underline;
}
.beian .extra {
display: block;
margin-top: 6px;
font-size: 12px;
color: #b19b8b;
letter-spacing: 2px;
}
.footer {
margin-top: 28px;
font-size: 13px;
color: #b8a494;
}
/* 響應式調整 */
@media (max-width: 480px) {
.card {
padding: 30px 20px 24px;
border-radius: 32px;
}
h1 {
font-size: 28px;
}
.info-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.domain {
font-size: 16px;
padding: 6px 18px;
}
}
</style>
</head>
<body>
<div class="card">
<!-- 裝飾圖標（可替換） -->
<div class="logo">🍷</div>
<h1>愛酒界</h1>
<div class="subtitle">· 品味時光 ·</div>
<div class="domain">🌐 i9j.cn</div>
<!-- 備案信息展示 -->
<div class="info-grid">
<span class="label">備案號</span>
<span class="value">蜀ICP備2020025518號-12</span>
<span class="label">首頁URL</span>
<span class="value">www.i9j.cn</span>
<span class="label">服務類型</span>
<span class="value">網站應用服務</span>
<span class="label full-width">內容分類</span>
<span class="value full-width" style="font-weight:400;">其他 · 個人網站</span>
</div>
<!-- 備案號鏈接（必須可點擊，指向工信部） -->
<div class="beian">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
蜀ICP備2020025518號-12
</a>
<span class="extra">工業和信息化部備案管理系統</span>
</div>
<div class="footer">網站正在建設中，敬請期待</div>
</div>
</body>
</html>
