三、详细实现步骤
步骤1：创建基础文件
- 新建文件夹
lesson1/demo
- 在文件夹内创建两个文件：
index.html（页面结构）style.css（样式文件）
步骤2：编写HTML结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>导学实例 - 基础页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>网页设计与制作导学</h1>
<div class="card">
<img src="../../../images/1.jpg" alt="示例图片">
<p>前端开发核心：HTML（结构）+ CSS（样式）+ JS（交互）</p>
</div>
</div>
</body>
</html>
步骤3：编写CSS样式
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 800px;
margin: 50px auto;
padding: 20px;
border: 2px solid #333;
border-radius: 8px;
}
h1 {
color: #2c3e50;
margin-bottom: 30px;
text-align: center;
}
.card {
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background-color: #f9f9f9;
}
.card img {
display: block;
margin: 0 auto 15px;
border: 1px solid #ccc;
padding: 5px;
}
.card p {
font-size: 16px;
line-height: 1.6;
color: #666;
text-align: center;
}
步骤4：运行与验证
- 用浏览器打开
index.html 文件
- 验证效果：
- 页面整体居中，有边框和圆角
- 图片居中显示，带边框和内边距
- 文字居中，颜色和行高符合预期