制作页面css
CSS 页面布局基础
使用 display: flex 或 display: grid 创建灵活的页面结构。Flexbox 适合一维布局（行或列），Grid 适合二维布局（行列组合）。设置 width: 100% 和 max-width 控制页面宽度。
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}响应式设计实现
通过媒体查询适配不同设备屏幕。设置断点（如 768px）调整布局、字体大小或隐藏元素。使用相对单位（vw, %, rem）替代固定像素值。
@media (max-width: 768px) {
.sidebar {
display: none;
}
.main-content {
grid-column: 1 / -1;
}
}字体与排版控制
选择 web-safe 字体或通过 @font-face 引入自定义字体。设置 line-height 改善可读性，使用 text-align 调整对齐方式。rem 单位基于根元素字体大小，适合缩放。
body {
font-family: 'Helvetica Neue', sans-serif;
line-height: 1.6;
font-size: 1rem;
}颜色与视觉效果
使用 CSS 变量（--primary-color）统一主题色。rgba() 设置透明度，box-shadow 添加投影。渐变背景通过 linear-gradient() 实现。
:root {
--primary-color: #3498db;
}
.button {
background: linear-gradient(to right, var(--primary-color), #2ecc71);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}交互元素样式
为链接和按钮添加 :hover 和 :active 状态。过渡效果使用 transition，动画用 @keyframes。禁用文本选择通过 user-select: none。
.button {
transition: transform 0.3s ease;
}
.button:hover {
transform: translateY(-2px);
}浏览器兼容性处理
使用前缀确保特性兼容（如 -webkit-）。检测旧浏览器支持情况，必要时提供回退方案。Modernizr 工具可帮助检测功能支持。
.element {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
