网页设计个人网站代码

admin 2024年02月10日 13:26 35 0

创建一个个人网站需要多种技术和工具，包括HTML、CSS、JavaScript等前端技术，以及可能的服务器端语言如Python、PHP等，以下是一个简单的HTML和CSS代码示例，用于创建一个基本的个人网站。

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>我的个人网站</title>
    <link rel="stylesheet" type="text/css" href="style.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>

    <section id="about">
        <h2>关于我</h2>
        <p>在这里写一些关于你的内容...</p>
    </section>

    <section id="projects">
        <h2>项目</h2>
        <ul>
            <li>项目1</li>
            <li>项目2</li>
            <li>项目3</li>
        </ul>
    </section>

    <section id="contact">
        <h2>联系我</h2>
        <form action="mailto:example@example.com" method="post">
            <label for="name">姓名:</label><br>
            <input type="text" id="name" name="name"><br>
            <label for="email">邮箱:</label><br>
            <input type="email" id="email" name="email"><br>
            <input type="submit" value="提交">
        </form>
    </section>
</body>
</html>

CSS (style.css):

body {
    font-family: Arial, sans-serif;
}
header {
    background-color: #f8f9fa;
    text-align: center;
    padding: 20px;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav li {
    display: inline;
    margin-right: 10px;
}
section {
    padding: 20px;
}

这只是一个非常基础的示例，实际的个人网站可能会包含更多的功能和更复杂的布局，你可能还需要学习如何使用JavaScript来添加交互性，以及如何使用服务器端语言来处理用户提交的数据。