用css制作网页
基础结构与样式
HTML文件需包含<!DOCTYPE html>声明和基本结构。CSS可通过<style>标签内嵌或外链.css文件。外链方式示例：
<link rel="stylesheet" href="styles.css">布局与盒模型
使用display属性控制元素布局方式：
.container {
display: flex; /* 弹性布局 */
justify-content: center;
margin: 0 auto; /* 水平居中 */
max-width: 1200px;
}盒模型通过padding、border、margin调整间距：
.box {
padding: 20px;
border: 1px solid #ddd;
margin-bottom: 15px;
}响应式设计
媒体查询适配不同设备：
@media (max-width: 768px) {
.menu {
flex-direction: column;
}
}使用相对单位保持比例：
.header {
font-size: clamp(1rem, 2vw, 2rem);
}视觉增强技巧
渐变背景与阴影效果：
.button {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}过渡动画提升交互：
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}现代CSS特性
Grid布局创建复杂结构：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}变量维护主题色：
:root {
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
}性能优化
减少重绘操作：
/* 使用transform替代top/left动画 */
.animate {
will-change: transform;
}压缩CSS文件并启用缓存：
<link rel="stylesheet" href="styles.min.css?v=1.0">
