init: sxbh.ltd 官网初始提交
- nginx 安全加固 (CSP, HSTS, 缓存策略) - 共享 style.css - 138个页面全部接入 Co-authored-by: Hermes AI <agent@hermes>
This commit is contained in:
Hermes CI Fix
Hermes AI
@@ -0,0 +1,265 @@
|
||||
<!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 { background: #f5f0e8; font-family: -apple-system, "PingFang SC", "Noto Serif SC", "KaiTi", "SimSun", serif; padding: 30px 0; }
|
||||
.container { max-width: 780px; margin: 0 auto; }
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 50%, #2c1810 100%);
|
||||
color: #d4c5a9; padding: 60px 40px 40px; border-radius: 12px 12px 0 0;
|
||||
position: relative; overflow: hidden; text-align: center;
|
||||
}
|
||||
.header::before {
|
||||
content: '☰'; position: absolute; left: 20px; top: 20px;
|
||||
font-size: 60px; opacity: 0.06;
|
||||
}
|
||||
.header::after {
|
||||
content: '☷'; position: absolute; right: 20px; bottom: 10px;
|
||||
font-size: 60px; opacity: 0.06;
|
||||
}
|
||||
.header .badge {
|
||||
display: inline-block; border: 1px solid rgba(212,197,169,0.25);
|
||||
padding: 4px 16px; font-size: 12px; letter-spacing: 3px;
|
||||
color: rgba(212,197,169,0.6); margin-bottom: 24px;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 30px; color: #e8d5b0; font-weight: 400;
|
||||
line-height: 1.5; margin-bottom: 16px;
|
||||
letter-spacing: 6px;
|
||||
}
|
||||
.header h1 em {
|
||||
font-style: normal; font-size: 34px; font-weight: 700;
|
||||
background: linear-gradient(135deg, #e8d5b0, #c9a96e);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.header .sub {
|
||||
font-size: 15px; color: rgba(212,197,169,0.5);
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #fcf9f5; padding: 50px 48px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
font-family: "Noto Serif SC", "KaiTi", "SimSun", serif;
|
||||
}
|
||||
|
||||
.section { margin-bottom: 30px; }
|
||||
|
||||
.section-title {
|
||||
font-size: 22px; color: #2c1810; font-weight: 600;
|
||||
text-align: center; margin-bottom: 20px;
|
||||
letter-spacing: 4px; position: relative;
|
||||
}
|
||||
.section-title::after {
|
||||
content: ''; display: block; width: 40px; height: 1px;
|
||||
background: #c9a96e; margin: 12px auto 0;
|
||||
}
|
||||
|
||||
p { font-size: 16px; line-height: 2; color: #3d3229; margin-bottom: 16px; text-indent: 2em; }
|
||||
p strong { color: #2c1810; }
|
||||
|
||||
.quote-block {
|
||||
background: #f5efe4; border-left: 3px solid #c9a96e;
|
||||
padding: 18px 22px; margin: 20px 0;
|
||||
font-size: 15px; line-height: 2; color: #5a4a3a; text-indent: 2em;
|
||||
}
|
||||
|
||||
.highlight-block {
|
||||
background: linear-gradient(135deg, #fcf9f5, #f5efe4);
|
||||
border: 1px solid #e0d5c5; border-radius: 6px;
|
||||
padding: 24px 28px; margin: 20px 0; text-align: center;
|
||||
}
|
||||
.highlight-block .main-text {
|
||||
font-size: 20px; color: #2c1810; font-weight: 700;
|
||||
letter-spacing: 3px; margin-bottom: 6px;
|
||||
}
|
||||
.highlight-block .sub-text {
|
||||
font-size: 14px; color: #8a7a6a; letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
text-align: center; color: #c9a96e; font-size: 16px;
|
||||
margin: 30px 0; letter-spacing: 8px;
|
||||
}
|
||||
|
||||
/* 八卦图式 */
|
||||
.bagua-container {
|
||||
display: flex; justify-content: center; gap: 24px;
|
||||
margin: 24px 0; flex-wrap: wrap;
|
||||
}
|
||||
.bagua-item {
|
||||
text-align: center; width: 64px;
|
||||
}
|
||||
.bagua-item .symbol {
|
||||
font-size: 36px; color: #2c1810;
|
||||
background: #f5efe4; border-radius: 50%;
|
||||
width: 64px; height: 64px; line-height: 64px;
|
||||
display: block; margin-bottom: 6px;
|
||||
border: 1px solid #e0d5c5;
|
||||
}
|
||||
.bagua-item .name {
|
||||
font-size: 13px; color: #6a5a4a;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #2c1810; color: rgba(212,197,169,0.5);
|
||||
padding: 24px 40px; border-radius: 0 0 12px 12px;
|
||||
font-size: 12px; text-align: center; line-height: 1.6;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: #f5efe4; color: #6a5a4a;
|
||||
padding: 2px 12px; border-radius: 2px;
|
||||
font-size: 12px; margin-right: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.content { padding: 24px 20px; }
|
||||
.header { padding: 36px 20px 28px; }
|
||||
.header h1 { font-size: 24px; }
|
||||
.bagua-container { gap: 12px; }
|
||||
.bagua-item { width: 48px; }
|
||||
.bagua-item .symbol { width: 48px; height: 48px; line-height: 48px; font-size: 28px; }
|
||||
p { font-size: 15px; }
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="header">
|
||||
<div class="badge">易 经 · 八 卦</div>
|
||||
<h1>
|
||||
<em>先天为体</em>，贵在"忘形"<br>
|
||||
<em>后天为用</em>，贵在"执器"
|
||||
</h1>
|
||||
<div class="sub">—— 善《易》者不卜</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<!-- 开篇 -->
|
||||
<div class="section">
|
||||
<p>先天八卦不需要死记位置。</p>
|
||||
<p>它的本质是一个揭示宇宙根本规律的<strong>数学模型</strong>，其方位是"相对"和"约定俗成"的，而非绝对的地理方位。</p>
|
||||
<p>只要掌握三把钥匙——<strong>阴阳对立统一</strong>（相对放置）、<strong>宇宙生成序列</strong>（易有太极，太极生两仪，两仪生四象，四象生八卦）、<strong>各卦象与数理</strong>（一生二，二生三，三生万物）——便可按规律自行推导出八卦，任意摆放，与绝对方位无关。</p>
|
||||
<p>它只代表宇宙规律。</p>
|
||||
</div>
|
||||
|
||||
<div class="divider">◆ ◆ ◆</div>
|
||||
|
||||
<!-- 核心观念 -->
|
||||
<div class="section">
|
||||
<div class="section-title">忘形：得其意，忘其象</div>
|
||||
|
||||
<p>古贤仰观天文、俯察地理后，为这个抽象模型找到了一个最贴切的"象"的注解。因为<strong>"乾（天）南坤（地）北"</strong>，才有了<strong>"离（日）东坎（月）西"</strong>及其他四隅的安置。</p>
|
||||
|
||||
<p>然而，<strong>"得易可以忘象，得象可以忘言"。</strong></p>
|
||||
|
||||
<p>忘言，即不要死记它的位置。<strong>知其本，而不被其形所困。</strong></p>
|
||||
|
||||
<div class="quote-block">
|
||||
学"易"的要义，不在记住八卦摆在哪里，而在理解它为什么摆在那里。<br>
|
||||
形是手段，意是目的。得意忘形，方入其门。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider">◆ ◆ ◆</div>
|
||||
|
||||
<!-- 八卦 -->
|
||||
<div class="section">
|
||||
<div class="section-title">八卦卦象</div>
|
||||
|
||||
<div class="bagua-container">
|
||||
<div class="bagua-item">
|
||||
<div class="symbol">☰</div>
|
||||
<div class="name">乾 · 天</div>
|
||||
</div>
|
||||
<div class="bagua-item">
|
||||
<div class="symbol">☱</div>
|
||||
<div class="name">兑 · 泽</div>
|
||||
</div>
|
||||
<div class="bagua-item">
|
||||
<div class="symbol">☲</div>
|
||||
<div class="name">离 · 火</div>
|
||||
</div>
|
||||
<div class="bagua-item">
|
||||
<div class="symbol">☳</div>
|
||||
<div class="name">震 · 雷</div>
|
||||
</div>
|
||||
<div class="bagua-item">
|
||||
<div class="symbol">☴</div>
|
||||
<div class="name">巽 · 风</div>
|
||||
</div>
|
||||
<div class="bagua-item">
|
||||
<div class="symbol">☵</div>
|
||||
<div class="name">坎 · 水</div>
|
||||
</div>
|
||||
<div class="bagua-item">
|
||||
<div class="symbol">☶</div>
|
||||
<div class="name">艮 · 山</div>
|
||||
</div>
|
||||
<div class="bagua-item">
|
||||
<div class="symbol">☷</div>
|
||||
<div class="name">坤 · 地</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider">◆ ◆ ◆</div>
|
||||
|
||||
<!-- 不卜 -->
|
||||
<div class="section">
|
||||
<div class="section-title">善《易》者不卜</div>
|
||||
|
||||
<p><strong>"善《易》者不卜"</strong>——这是一种境界。</p>
|
||||
|
||||
<p>当深刻理解了世界运行的根本模型（先天八卦所揭示的宇宙规律），那么对于具体事件（后天八卦所应对的）的吉凶趋势，便能有一种<strong>直指本心的洞察</strong>。</p>
|
||||
|
||||
<p>当这个框架内化于心，再看"后天为用"（需记住后天八卦位置）的方位、五行、生克等具体术数时，便能洞悉其背后的原理，而非机械套用。</p>
|
||||
|
||||
<div class="highlight-block">
|
||||
<div class="main-text">所谓"不卜"</div>
|
||||
<div class="sub-text">并非放弃预测，而是超越了对单一技术或固定公式的依赖</div>
|
||||
<div class="sub-text" style="margin-top:8px;">从事物发展的根本逻辑出发</div>
|
||||
<div class="sub-text">——阴阳平衡、物极必反——</div>
|
||||
<div class="sub-text">进行更深刻、更灵活的洞察与推演</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider">◆ ◆ ◆</div>
|
||||
|
||||
<!-- 总结 -->
|
||||
<div class="section">
|
||||
<div class="section-title">体用之间</div>
|
||||
|
||||
<p><strong>先天为体，贵在"忘形"</strong>——把握根本规律，不拘泥于外在形式。八卦方位可以变化，但阴阳对立统一、宇宙生成序列的底层逻辑不变。得其意，忘其象，才是真懂。</p>
|
||||
|
||||
<p><strong>后天为用，贵在"执器"</strong>——进入应用层面，必须记住方位、五行、生克等具体工具。器是手段，没有器，体无所附。但执器而不滞于器，知其然更知其所以然。</p>
|
||||
|
||||
<div class="quote-block">
|
||||
体用一源，显微无间。<br>
|
||||
忘形不是弃形，执器不是滞器。<br>
|
||||
知体达用，方是《易》道。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
一切皆如 · 原创 | 研学 整理优化<br>
|
||||
先天八卦 · 宇宙规律的数学模型
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user