1基础网页项目练习

基础网页项目练习（二）—— 添加导航与列表

一、项目扩展

1. 项目名称：mySite
2. 项目路径：D:\mySite
3. 新增文件：
   • about.html：关于页面
   • style.css：继续使用原有样式文件

---

二、主页（index.html）新增内容

页面结构

在原有结构基础上，添加：

• 导航栏（<nav>），包含两个链接：首页、关于页面
• 一个无序列表（<ul>），展示三项内容

代码示例（index.html）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <a href="index.html">首页</a> |
        <a href="about.html">关于</a>
    </nav>

    <h1>欢迎来到我的网站</h1>
    <h2>网站介绍</h2>
    <p>这是一个示例网站，展示了网页的基本结构和样式。</p>

    <h2>学习内容</h2>
    <ul>
        <li>HTML 基础结构</li>
        <li>CSS 样式应用</li>
        <li>页面导航与链接</li>
    </ul>
</body>
</html>

---

三、关于页面（about.html）内容

页面结构

• 导航栏（与主页一致）
• 标题一（<h1>）
• 一个段落（<p>）
• 一张图片（<img>，使用占位图片链接）

代码示例（about.html）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>关于我们</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <a href="index.html">首页</a> |
        <a href="about.html">关于</a>
    </nav>

    <h1>关于我们</h1>
    <p>本网站用于学习网页开发的基础知识，包括HTML和CSS的使用。</p>
    <img src="https://picsum.photos/400/200" alt="示例图片">
</body>
</html>

---

四、样式文件（style.css）扩展

在原有样式基础上，增加：

• 导航栏样式（文字颜色、间距、下划线去除）
• 列表样式（圆点颜色、内边距）
• 图片样式（圆角、阴影）

代码示例（style.css）

css

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
    padding: 20px;
}

h1, h2 {
    color: orange;
}

p {
    color: red;
}

nav {
    margin-bottom: 20px;
}

nav a {
    color: darkblue;
    text-decoration: none;
    margin-right: 10px;
}

nav a:hover {
    text-decoration: underline;
}

ul {
    background-color: #f0f0f0;
    padding: 10px 20px;
    border-radius: 8px;
}

li {
    color: darkgreen;
}

img {
    border-radius: 12px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    margin-top: 10px;
}

---

五、学习要点总结

• 外部样式表：通过 <link> 实现样式与结构分离
• 页面导航：使用 <a> 标签和相对路径实现页面跳转
• 列表与图片：增强页面内容表现力
• CSS 扩展：掌握标签选择器、伪类选择器（如 :hover）、盒模型属性（padding、margin、border-radius）