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