基础网页项目练习

基础网页项目练习

一、项目创建与文件结构

  1. 新建项目
    • 项目名称：mySite
    • 存放路径：D:\mySite
  2. 新建样式文件
    • 文件名：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>
posted @ 2026-03-23 10:24  liu123wz  阅读(33)  评论(0)    收藏  举报