用css制作网页
使用CSS制作网页的基本方法
创建HTML文件结构
新建一个HTML文件(如index.html),包含基本结构如<!DOCTYPE html>、<html>、<head>和<body>标签。在<head>内通过<link>引入CSS文件。
链接外部CSS文件
在项目文件夹中创建style.css文件,通过以下代码链接到HTML:
<link rel="stylesheet" href="style.css">
编写CSS基础样式 在CSS文件中定义全局样式,例如重置边距和设置默认字体:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
布局与盒模型 使用Flexbox或Grid实现页面布局:
.container {
display: flex;
justify-content: space-between;
}
.grid-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
样式化文本与颜色 设置文本样式和颜色方案:
h1 {
color: #333;
font-size: 2rem;
margin-bottom: 1rem;
}
p {
color: #666;
font-size: 1rem;
}
响应式设计 通过媒体查询适配不同设备:
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.grid-layout {
grid-template-columns: 1fr;
}
}
交互效果 添加悬停和过渡效果:

.button {
background: #007bff;
transition: background 0.3s ease;
}
.button:hover {
background: #0056b3;
}
调试与优化 使用浏览器开发者工具检查元素,确保样式按预期渲染。验证CSS通过W3C验证器,并压缩生产环境的CSS文件。





