48 lines
1.4 KiB
HTML
48 lines
1.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>厚德善能 益邦惠民</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
/* 页面背景透明 + 居中布局 */
|
|||
|
|
body {
|
|||
|
|
background: #6A9EC3;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
/* 如需深色背景预览，可临时替换为：background: #333; */
|
|||
|
|
}
|
|||
|
|
/* 双列容器 */
|
|||
|
|
.text-container {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 60px; /* 两列文字间距 */
|
|||
|
|
}
|
|||
|
|
/* 单列文字样式 */
|
|||
|
|
.text-item {
|
|||
|
|
/* 竖排文字核心属性 */
|
|||
|
|
writing-mode: vertical-rl;
|
|||
|
|
text-orientation: upright;
|
|||
|
|
/* 字体&尺寸&颜色 */
|
|||
|
|
font-size: 100px;
|
|||
|
|
color: #00FF00;
|
|||
|
|
font-weight: 900;
|
|||
|
|
/* 瘦金体（优先系统瘦金体，无则 fallback 仿宋/楷体） */
|
|||
|
|
font-family: "瘦金体", "瘦金体简", "STKaiti", "FangSong", serif;
|
|||
|
|
/* 文字间距优化 */
|
|||
|
|
letter-spacing: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="text-container">
|
|||
|
|
<div class="text-item">厚德善能</div>
|
|||
|
|
<div class="text-item">益邦惠民</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|