css制作后台页面
布局设计
采用Flexbox或Grid布局实现响应式设计。Flexbox适合一维布局，Grid适合二维复杂布局。通过媒体查询适配不同屏幕尺寸，确保在移动端和桌面端均有良好显示效果。
.container {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}配色方案
选择深色系作为主色调，如#1a1a2e搭配#16213e。关键操作按钮使用高对比色，如#f95959。文字采用#e6e6e6提高可读性，辅助信息使用#aaaaaa。
:root {
--primary-bg: #1a1a2e;
--secondary-bg: #16213e;
--accent: #f95959;
--text-main: #e6e6e6;
}导航菜单
侧边栏固定宽度240px，使用position: sticky保持定位。菜单项设置hover效果，当前选中项添加左侧边框标识。图标与文字间距保持8px，使用rem单位保证缩放一致性。
.sidebar {
width: 240px;
background: var(--secondary-bg);
padding-top: 20px;
}
.menu-item {
padding: 12px 16px;
border-left: 3px solid transparent;
}
.menu-item.active {
border-left-color: var(--accent);
}数据表格
表格设置border-collapse: collapse消除间隙。表头固定背景色，行间使用nth-child(even)交替配色。添加overflow-x: auto容器应对窄屏情况，单元格文本溢出显示省略号。
.table-container {
overflow-x: auto;
}
.data-table td {
padding: 12px;
max-width: 200px;
text-overflow: ellipsis;
}
.data-table tr:nth-child(even) {
background: rgba(255,255,255,0.03);
}表单控件
输入框设置background: rgba(255,255,255,0.1)保持半透明效果。聚焦状态添加box-shadow发光效果，错误状态边框变红。标签与输入框垂直排列，使用margin-bottom: 8px控制间距。
.form-group {
margin-bottom: 16px;
}
.input-field {
background: rgba(255,255,255,0.1);
border: 1px solid #444;
}
.input-field:focus {
box-shadow: 0 0 0 2px rgba(249,89,89,0.3);
}交互元素
按钮设置transition: all 0.2s实现平滑动画。主要操作按钮使用较大圆角，次要按钮采用扁平化设计。加载状态添加旋转动画，使用@keyframes定义旋转效果。
.primary-btn {
background: var(--accent);
border-radius: 8px;
transition: all 0.2s;
}
.loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}响应式处理
通过媒体查询在768px断点调整布局，侧边栏改为浮动模式。表格转为卡片式展示，表单元素宽度变为100%。隐藏非必要装饰元素，优先保证功能可用性。
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
.sidebar {
width: 100%;
position: static;
}
}
