基础网页项目练习
一、项目创建与文件结构
- 新建项目
- 项目名称：
mySite - 存放路径：
D:\mySite
- 项目名称：
- 新建样式文件
- 文件名：
style.css - 作用：通过外部链接方式引入到主页中，实现样式与结构分离。
- 文件名：
二、主页（index.html）内容
页面结构
- 包含：
- 标题一（
<h1>） - 标题二（
<h2>） - 一个段落（
<p>）
- 标题一（
样式设置
- 页面背景色：淡蓝色（
lightblue） - 标题一、标题二文字颜色：橙色（
orange） - 段落文字颜色：红色（
red）
代码示例（index.html）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>我的网站</title><link rel="stylesheet" href="style.css">
</head>
<body><h1>欢迎来到我的网站</h1><h2>这里是二级标题</h2><p>这是一个示例段落，用于展示网页的基本结构和样式。</p>
</body>
</html>
三、样式文件（style.css）
样式内容
css
body {background-color: lightblue;
}h1, h2 {color: orange;
}p {color: red;
}
四、子页（subpage.html）内容
- 子页背景色与主页一致（淡蓝色）
- 可根据需要添加其他内容
代码示例（subpage.html）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>子页面</title><link rel="stylesheet" href="style.css">
</head>
<body><h1>子页面标题</h1><p>这是子页面的内容，背景色与主页相同。</p>
</body>
</html>