个人网站搭建源码-资源分享

个人网站源码通常包含多个部分，用于构建一个完整的网页，展示个人信息、作品集、联系方式等。以下是一个典型个人网站的源码结构和内容：

1. HTML 结构（index.html）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>张三</h1>
        <nav>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#portfolio">作品集</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
        </nav>
    </header>

    <section id="about">
        <h2>关于我</h2>
        <p>我是一名前端开发者，热爱编程和设计。</p>
    </section>

    <section id="portfolio">
        <h2>作品集</h2>
        <div class="project">
            <h3>项目一：响应式网站</h3>
            <p>使用HTML5和CSS3开发的响应式网站。</p>
        </div>
        <div class="project">
            <h3>项目二：博客系统</h3>
            <p>基于Node.js和MongoDB的博客系统。</p>
        </div>
    </section>

    <section id="contact">
        <h2>联系我</h2>
        <form action="submit.php" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name"><br><br>

            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email"><br><br>

            <label for="message">留言：</label>
            <textarea id="message" name="message"></textarea><br><br>

            <input type="submit" value="发送">
        </form>
    </section>

    <footer>
        <p>&copy; 2025 张三. 保留所有权利。</p>
    </footer>
</body>
</html>

2. CSS 样式（style.css）

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

section {
    padding: 40px 20px;
    max-width: 960px;
    margin: auto;
}

#portfolio .project {
    margin-bottom: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    margin-top: 40px;
}

3. JavaScript 功能（script.js）（可选）

document.addEventListener("DOMContentLoaded", function () {
    // 可以在这里添加交互功能，例如表单验证、动态加载内容等
});

4. 后端处理（submit.php）（如果需要）

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    // 处理数据，例如发送邮件或保存到数据库
    // 示例：发送邮件
    $to = "[email protected]";
    $subject = "新联系信息";
    $body = "姓名: $name\n邮箱: $email\n留言: $message";

    if (mail($to, $subject, $body)) {
        echo "感谢您的留言！";
    } else {
        echo "发送失败，请稍后再试。";
    }
}
?>

5. 文件结构说明


/personal-site/
│
├── index.html
├── style.css
├── script.js
├── submit.php
└── images/

本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法、侵权等任何非法活动，否则后果自负。

本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

如有侵权请邮件与我们联系处理。敬请谅解！
邮件：[email protected]

客服打赏举报

价格说明 1、划线价格：商品的专柜价、吊牌价、正品零售价、并非原价，仅供参考。
2、未划线价格：商品的实际标价，不因表述的差异改变性质。具体成交价格最终以订单结算页价格为准。
3、特别提示：商家详情页以图片或文字形式标注的一口价、促销价、优惠价等价格，具体请以结算页面的价格标价为准。
4、资源密码：本站所有资源的密码都是：pangseng.com/ziyuan/

THE END