打造个人网站，从简单的源码开始，简单的网站源码怎么做

欧气 2024年11月24日 19:21 0 0

本文目录导读：

HTML结构
CSS样式
JavaScript交互

在这个信息爆炸的时代，拥有一个个人网站已经成为越来越多人的需求，而要打造一个简单易用的个人网站，并不需要复杂的编程知识，只需掌握一些基本的HTML、CSS和JavaScript即可，本文将为你提供一个简单的网站源码，帮助你快速搭建一个属于自己的个人网站。

打造个人网站，从简单的源码开始，简单的网站源码怎么做

图片来源于网络，如有侵权联系删除

HTML结构

以下是一个简单的个人网站HTML结构示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的个人网站</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>我的个人网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#contact">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <section id="home">
        <h2>欢迎来到我的个人网站</h2>
        <p>这里是我分享生活、学习和工作的平台。</p>
    </section>
    <section id="about">
        <h2>关于我</h2>
        <p>我是一个热爱编程、喜欢挑战的人，热衷于探索各种新技术。</p>
    </section>
    <section id="contact">
        <h2>联系方式</h2>
        <p>邮箱：example@example.com</p>
        <p>微信：example</p>
    </section>
    <footer>
        <p>版权所有 &copy; 2021 我的个人网站</p>
    </footer>
</body>
</html>

CSS样式

我们需要为这个简单的网站添加一些CSS样式，使其看起来更加美观，以下是一个简单的CSS样式示例：

打造个人网站，从简单的源码开始，简单的网站源码怎么做

图片来源于网络，如有侵权联系删除

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
header h1 {
    margin: 0;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 20px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
}
section {
    padding: 40px;
    background-color: #fff;
    margin-bottom: 20px;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

JavaScript交互

为了使网站更加生动，我们可以添加一些简单的JavaScript交互效果，以下是一个简单的JavaScript代码示例：

window.onload = function() {
    var navItems = document.querySelectorAll('nav ul li a');
    for (var i = 0; i < navItems.length; i++) {
        navItems[i].addEventListener('click', function(e) {
            e.preventDefault();
            var sectionId = this.getAttribute('href').substring(1);
            var section = document.getElementById(sectionId);
            window.scrollTo({
                top: section.offsetTop,
                behavior: 'smooth'
            });
        });
    }
};

通过以上步骤，我们已经成功搭建了一个简单的个人网站，这只是一个基础版本，你可以根据自己的需求进行修改和扩展，希望这个简单的网站源码能帮助你快速入门，开启你的个人网站之旅！

打造个人网站，从简单的源码开始，简单的网站源码怎么做

图片来源于网络，如有侵权联系删除

标签： #简单的网站源码