在这个教程中，我们将一步步教你如何创建一个基本的 HTML 和 CSS 博客项目。无论是初学者还是有一定基础的开发者，都能通过这个项目加深对前端开发的理解。

项目概览

  • HTML: 用于构建网页的结构。
  • CSS: 用于美化网页的样式。
  • Markdown: 用于编写博客内容。

准备工作

在开始之前，请确保你已经安装了以下工具：

  • 文本编辑器：如 Visual Studio Code 或 Atom。
  • HTML 和 CSS 编辑器：如 Sublime Text 或 Atom。
  • 浏览器：如 Google Chrome 或 Firefox。

创建项目结构

首先，我们需要创建项目的基本结构：

/blog-project
|-- index.html
|-- style.css
|-- about.md

创建 HTML 文件

在 index.html 文件中，我们将编写以下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>我的博客</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>我的第一篇博客</h2>
            <p>这里是博客内容...</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2023 我的博客</p>
    </footer>
</body>
</html>

创建 CSS 文件

在 style.css 文件中，我们将编写以下代码：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px;
}

header h1 {
    margin: 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

main {
    margin: 20px;
}

article {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

创建 Markdown 文件

在 about.md 文件中，我们将编写以下代码：

# 关于我

我是一个热爱前端开发的技术爱好者，致力于分享我的学习和开发经验。

## 技能

- HTML
- CSS
- JavaScript
- React

链接扩展阅读

想了解更多关于 HTML 和 CSS 的知识？请访问我们的前端基础教程。

图片

前端开发 是一项充满挑战和乐趣的技能。让我们一起学习，共同进步！

前端开发