不到100行代码，一键写出漂亮的个人简历网站！手把手教学！快来看看吧！

最新推荐文章于 2024-09-14 17:27:40 发布

大白百宝阁

最新推荐文章于 2024-09-14 17:27:40 发布

阅读量158

点赞数 4

分类专栏：工作文章标签：前端 html

本文链接：https://blog.csdn.net/m0_52177571/article/details/142028794

版权

工作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天要分享的是，个人简历网站的基础排版，效果如下：

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三 - 网页开发者和摄影爱好者的个人主页</title>
    <meta name="description" content="张三的个人主页。专业网页开发者，擅长HTML5、CSS3、JavaScript等技术。同时热爱摄影。">
    <meta name="keywords" content="张三, 网页开发, 前端开发, 摄影, HTML, CSS, JavaScript">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            text-align: center;
            margin-bottom: 40px;
        }
        h1, h2 {
            color: #2c3e50;
        }
        .section {
            margin-bottom: 30px;
        }
        .section h2 {
            color: #3498db;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .profile-img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            display: block;
            margin: 0 auto 20px;
        }
        a {
            color: #3498db;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <header>
        <img src="/src/user.png" alt="张三的个人头像" class="profile-img">
        <h1>张三</h1>
        <p>网页开发者 | 摄影爱好者</p>
    </header>

    <main>
        <section class="section">
            <h2>关于我</h2>
            <p>你好！我是张三，一名充满热情的网页开发者。我专注于创造直观、用户友好的网站，并在空闲时间探索摄影的魅力。我的目标是将技术与艺术完美融合，创造出独特的数字体验。</p>
        </section>

        <section class="section">
            <h2>专业技能</h2>
            <ul>
                <li>前端开发：HTML5, CSS3, JavaScript (ES6+)</li>
                <li>前端框架：React, Vue.js</li>
                <li>后端技术：Node.js, Express</li>
                <li>数据库：MongoDB, MySQL</li>
                <li>摄影：风景摄影、人像摄影</li>
                <li>图像处理：Adobe Photoshop, Lightroom</li>
            </ul>
        </section>

        <section class="section">
            <h2>联系方式</h2>
            <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
            <p>GitHub：<a href="https://github.com/zhangsan" target="_blank" rel="noopener noreferrer">github.com/zhangsan</a></p>
            <p>LinkedIn：<a href="https://www.linkedin.com/in/zhangsan" target="_blank" rel="noopener noreferrer">linkedin.com/in/zhangsan</a></p>
        </section>
    </main>

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

图片我放在同目录的src文件夹下面了，项目结构如下：