超硬核，写一个基础的个人网站

大家好，欢迎来到IT知识分享网。

网站结构

主页 (index.html)
关于我 (about.html)
项目 (projects.html)
联系 (contact.html)

1. 创建文件结构

首先，创建一个文件夹来存放你的个人网站项目。文件结构如下：

personal_website/
│
├── index.html
├── about.html
├── projects.html
├── contact.html
└── styles.css

2. 编写 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="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网站</h1>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="projects.html">项目</a></li>
                <li><a href="contact.html">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>我的简介</h2>
            <p>这是我的个人网站，欢迎了解我的工作和项目！</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 你的名字</p>
    </footer>
</body>
</html>

`about.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="styles.css">
</head>
<body>
    <header>
        <h1>关于我</h1>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="projects.html">项目</a></li>
                <li><a href="contact.html">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>我的背景</h2>
            <p>这里是关于我的一些信息，比如我的教育背景、工作经历等。</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 你的名字</p>
    </footer>
</body>
</html>

`projects.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="styles.css">
</head>
<body>
    <header>
        <h1>我的项目</h1>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="projects.html">项目</a></li>
                <li><a href="contact.html">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>项目列表</h2>
            <ul>
                <li>项目 1 - 描述</li>
                <li>项目 2 - 描述</li>
                <li>项目 3 - 描述</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 你的名字</p>
    </footer>
</body>
</html>

`contact.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="styles.css">
</head>
<body>
    <header>
        <h1>联系我</h1>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="projects.html">项目</a></li>
                <li><a href="contact.html">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>联系方式</h2>
            <p>你可以通过以下方式联系我：</p>
            <ul>
                <li>邮箱: your.email@example.com</li>
                <li>电话: 123-456-7890</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 你的名字</p>
    </footer>
</body>
</html>

3. 编写 CSS 文件

`styles.css`

body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; } header { background: #333; color: #fff; padding: 10px 0; text-align: center; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin: 0 15px; } nav ul li a { color: #fff; text-decoration: none; } main { padding: 20px; } footer { text-align: center; padding: 10px 0; background: #333; color: #fff; position: relative; bottom: 0; width: 100%; }

4. 运行网站

将上述文件保存到你的项目文件夹中，然后用浏览器打开 index.html 文件，你就可以看到你的个人网站了。

5. 自定义内容

你可以根据自己的需要修改每个页面的内容、样式和项目列表。可以添加更多的样式、图片和功能，使网站更加个性化。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/137425.html

超硬核，写一个基础的个人网站

网站结构

1. 创建文件结构

2. 编写 HTML 文件

index.html

about.html

projects.html

contact.html