css制作静态网页
使用CSS制作静态网页的基本方法
HTML结构搭建
创建基本的HTML文件结构，包含<!DOCTYPE html>声明、<html>、<head>和<body>标签。在<head>中通过<link>标签引入外部CSS文件，或直接使用<style>标签编写内联样式。
<!DOCTYPE html>
<html>
<head>
<title>静态网页示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>页眉内容</header>
<main>主体内容</main>
<footer>页脚内容</footer>
</body>
</html>基础样式设置
在CSS文件中设置全局样式，包括字体、颜色和边距等。使用通用选择器*或针对特定元素设置默认样式。
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
}布局技术选择
根据需求选择合适的布局方式。传统浮动布局需配合clearfix，Flexbox适合一维布局，Grid适合复杂二维布局。
/* Flexbox示例 */
.container {
display: flex;
justify-content: space-between;
}
/* Grid示例 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}响应式设计实现 使用媒体查询适配不同设备屏幕尺寸。设置断点针对移动设备、平板和桌面等不同视口宽度。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.grid-container {
grid-template-columns: 1fr;
}
}组件样式设计
为按钮、导航栏、卡片等UI组件创建特定样式。使用伪类如:hover添加交互效果。
.button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}性能优化技巧 合并CSS文件减少HTTP请求，使用CSS精灵图减少图片请求，压缩最终CSS文件大小。
/* 精灵图示例 */
.icon {
background-image: url('sprites.png');
background-position: -20px -40px;
width: 20px;
height: 20px;
}浏览器兼容处理 针对不同浏览器添加前缀，使用特性检测或渐进增强策略确保兼容性。
.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
