用html和css制作个人网页：用HTML和CSS制作个人网页

来源：网络作者：日期：2025-10-27 00:29:57

在互联网时代,拥有一个个人网页已经成为展示自己、分享兴趣和建立专业形象的重要方式，无论是学生、教师、设计师还是自由职业者，个人网页都是一个展示个人技能、作品和想法的绝佳平台，本文将介绍如何使用HTML和CSS这两种基础的网页技术来制作一个简单而专业的个人网页。

什么是HTML和CSS？

HTML（HyperText Markup Language）是网页的标准标记语言，用于创建网页的结构和内容，它定义了网页中的文本、图片、链接、表格等元素。

CSS（Cascading Style Sheets）是一种样式表语言，用于描述网页的呈现方式，如布局、颜色、字体等，CSS可以让网页更加美观、专业，并且可以实现响应式设计，使网页在不同设备上都能良好显示。

准备工作

在开始编写代码之前,我们需要准备一个文本编辑器（如记事本、VS Code等）和一个浏览器（如Chrome、Firefox等）来查看和测试我们的网页。

创建基本网页结构

我们创建一个HTML文件,通常以.html为扩展名，在文本编辑器中输入以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网页</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#about">关于我</a></li>
            <li><a href="#projects">项目</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>
    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>这里可以写一些关于自己的介绍，比如教育背景、工作经验、兴趣爱好等。</p>
        </section>
        <section id="projects">
            <h2>项目</h2>
            <p>展示自己的项目，可以是个人作品、课程设计、开源项目等。</p>
        </section>
        <section id="contact">
            <h2>联系方式</h2>
            <p>提供联系方式，如邮箱、电话、社交媒体链接等。</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 我的个人网页</p>
    </footer>
</body>
</html>

添加CSS样式

我们创建一个名为styles.css的文件，并在其中添加样式，以下是一个简单的样式示例：

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}
header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
nav ul {
    list-style: none;
    background-color: #444;
    padding: 0.5rem 0;
}
nav ul li {
    display: inline;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
}
nav ul li a:hover {
    background-color: #555;
}
main {
    padding: 20px;
}
section {
    margin-bottom: 20px;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}