原生CSS实现百科页面

针对你提到的 CDN 依赖臃肿和代码难以维护的问题，我为你重构了一个“原生 CSS”版本。该版本完全移除了 Tailwind，直接使用简洁的 <style> 样式，并加入了一个简单的 JS 切换函数。

1. HTML 与原生 CSS

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        body { font-family: sans-serif; background: #f8fafc; color: #1e293b; margin: 0; }
        .container { max-width: 900px; margin: 0 auto; padding: 20px; }
        .card { background: white; border: 1px solid #e2e8f0; padding: 20px; border-radius: 12px; margin-bottom: 15px; }
        .tab-btn { padding: 8px 16px; cursor: pointer; border: none; background: #e2e8f0; }
        .active { background: #4f46e5; color: white; }
        .hidden { display: none; }
    </style>
</head>
<body>
    <div class="container">
        <div style="margin-bottom: 20px;">
            <button class="tab-btn active" onclick="switchTab('new')">最新</button>
            <button class="tab-btn" onclick="switchTab('hot')">最热</button>
        </div>
        <div id="new-list">{{/* 这里渲染最新数据 */}}</div>
        <div id="hot-list" class="hidden">{{/* 这里渲染最热数据 */}}</div>
    </div>

    <script>
        function switchTab(type) {
            document.getElementById('new-list').classList.toggle('hidden', type !== 'new');
            document.getElementById('hot-list').classList.toggle('hidden', type !== 'hot');
        }
    </script>
</body>
</html>

2. 为什么这样写更稳？

零依赖： 不需要从网络加载任何外部 CSS 文件，页面打开速度更快，且在内网环境也能正常显示。
可维护： 样式写在 <style> 中，修改颜色或间距只需改动几行 CSS，不需要去修改数百个 class 名称。
逻辑分离： 最轻量化的 JS 切换逻辑，避免了复杂框架带来的性能损耗。

原生CSS实现百科页面

1. HTML 与 原生 CSS

2. 为什么这样写更稳？

1. HTML 与原生 CSS