1. 传统两栏布局 + 响应式适配
文件名: traditional-two-column.html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>传统两栏布局示例</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}/* 导航栏 */.nav {background: #2c3e50;padding: 1rem;color: white;}/* 主体容器 */.container {overflow: hidden; /* 清除浮动 */}/* 侧边栏 */.sidebar {float: left;width: 240px;background: #34495e;color: white;padding: 1rem;min-height: calc(100vh - 56px);}.sidebar ul {list-style: none;}.sidebar li {padding: 0.8rem;border-radius: 4px;transition: background 0.3s;}.sidebar li:hover {background: #2c3e50;}/* 主内容区 */.main-content {margin-left: 240px;padding: 2rem;background: #ecf0f1;min-height: calc(100vh - 56px);}/* 响应式适配 */@media (max-width: 768px) {.sidebar {width: 100%;float: none;min-height: auto;}.main-content {margin-left: 0;}}</style>
</head>
<body><nav class="nav"><h1>企业管理系统</h1></nav><div class="container"><aside class="sidebar"><ul><li>仪表盘</li><li>用户管理</li><li>订单管理</li><li>数据分析</li></ul></aside><main class="main-content"><h2>今日统计</h2><div class="stats"><div class="stat-item"><h3>新增用户</h3><p>1,234</p></div><div class="stat-item"><h3>订单数量</h3><p>567</p></div></div></main></div>
</body>
</html>
2. 现代弹窗组件
文件名: modern-modal.html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>模态弹窗组件</title><style>/* 遮罩层 */.overlay {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);display: flex;justify-content: center;align-items: center;backdrop-filter: blur(3px);}/* 弹窗主体 */.modal {background: white;border-radius: 8px;width: min(90%, 600px);box-shadow: 0 4px 16px rgba(0,0,0,0.2);animation: slideIn 0.3s ease-out;}/* 弹窗头部 */.modal-header {padding: 1rem;border-bottom: 1px solid #ddd;display: flex;justify-content: space-between;align-items: center;}.close-btn {cursor: pointer;padding: 0.5rem;border-radius: 50%;transition: background 0.3s;}.close-btn:hover {background: #eee;}/* 弹窗内容 */.modal-body {padding: 2rem;}/* 表单样式 */.form-group {margin-bottom: 1rem;}input[type="text"] {width: 100%;padding: 0.8rem;border: 1px solid #ddd;border-radius: 4px;}/* 动画效果 */@keyframes slideIn {from {transform: translateY(-50px);opacit