移除CDN的纯原生CSS页面重构

为了彻底去除CDN依赖并减少臃肿的Class代码，我们改用原生CSS编写样式。以下是简化后的结构与切换逻辑：

1. CSS 样式 (放入 )

.container { max-width: 1000px; margin: 0 auto; padding: 20px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.btn-group { display: flex; background: #eee; border-radius: 8px; padding: 4px; }
.btn { padding: 8px 16px; border: none; cursor: pointer; border-radius: 6px; }
.btn.active { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.hidden { display: none; }

2. HTML 切换逻辑

<div class="btn-group">
    <button class="btn active" onclick="show('latest')">最新</button>
    <button class="btn" onclick="show('hot')">最热</button>
</div>

<div id="latest" class="card-grid">...最新列表内容...</div>
<div id="hot" class="card-grid hidden">...最热列表内容...</div>

<script>
function show(type) {
    document.getElementById('latest').classList.toggle('hidden', type !== 'latest');
    document.getElementById('hot').classList.toggle('hidden', type !== 'hot');
    // 切换按钮样式逻辑...
}
</script>

这种方案完全摆脱了外部CDN的请求，且代码逻辑更加清晰，便于后期针对性维护。