HTML+CSS+JS个人主页

最新推荐文章于 2024-08-13 20:57:25 发布

睿智的海鸥

最新推荐文章于 2024-08-13 20:57:25 发布

阅读量322

点赞数 8

分类专栏：网页模板文章标签： html css 前端 javascript css3

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140464652

版权

网页模板专栏收录该内容

1 篇文章 0 订阅

订阅专栏

功能介绍源代码在文章最后面

1.界面有：个人简介、项目作品、技能列表（带柱状图）、联系方式、社交媒体链接

2.界面最后有留言板块，可向服务器发送留言数据。

效果展示

源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid #ddd;
        }
        header h1 {
            margin: 0;
            color: #007bff;
        }
        section {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
            border: 1px solid #ddd;
        }
        h2 {
            color: #007bff;
        }
        .skills {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .skill-chart {
            width: 100%;
            max-width: 600px;
            height: 400px;
        }
        .contact-info, .social-links {
            list-style: none;
            padding: 0;
        }
        .contact-info li, .social-links li {
            margin-bottom: 10px;
        }
        .button {
            display: inline-block;
            padding: 10px 20px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #0056b3;
        }
        .contact-form {
            display: flex;
            flex-direction: column;
        }
        .contact-form input, .contact-form textarea {
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>我的个人主页</h1>
        </header>
        <section>
            <h2>个人简介</h2>
            <p>这里是我的个人简介。</p>
        </section>
        <section>
            <h2>项目作品</h2>
            <div class="project">
                <h3>项目 1</h3>
                <p>项目 1 的描述。</p>
            </div>
            <div class="project">
                <h3>项目 2</h3>
                <p>项目 2 的描述。</p>
            </div>
        </section>
        <section>
            <h2>技能列表</h2>
            <div class="skills">
                <canvas id="skillsChart" class="skill-chart"></canvas>
            </div>
        </section>
        <section>
            <h2>联系方式</h2>
            <ul class="contact-info">
                <li>电子邮件：example@example.com</li>
                <li>电话：123-456-7890</li>
            </ul>
        </section>
        <section>
            <h2>社交媒体链接</h2>
            <ul class="social-links">
                <li><a href="https://twitter.com/yourprofile" target="_blank">Twitter</a></li>
                <li><a href="https://linkedin.com/in/yourprofile" target="_blank">LinkedIn</a></li>
            </ul>
        </section>
        <section>
            <h2>留言</h2>
            <form class="contact-form" onsubmit="sendMessage(event)">
                <input type="text" name="name" placeholder="你的名字" required>
                <input type="email" name="email" placeholder="你的电子邮件" required>
                <textarea name="message" rows="5" placeholder="你的留言" required></textarea>
                <button type="submit" class="button">发送留言</button>
            </form>
        </section>
    </div>
    <script>
        function sendMessage(event) {
            event.preventDefault();
            const form = event.target;
            const data = {
                name: form.name.value,
                email: form.email.value,
                message: form.message.value
            };

            fetch('http://38.14.250.184', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
                alert('留言发送成功！');
        }

        document.addEventListener('DOMContentLoaded', function () {
            const ctx = document.getElementById('skillsChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['JavaScript', 'C++', 'Java'],
                    datasets: [
                        {
                            label: '已掌握',
                            data: [70, 60, 80],
                            backgroundColor: '#007bff',
                            borderColor: '#007bff',
                            borderWidth: 1,
                            borderRadius: 10 // 圆角半径
                        },
                        {
                            label: '未掌握',
                            data: [30, 40, 20],
                            backgroundColor: '#ddd',
                            borderColor: '#ddd',
                            borderWidth: 1,
                            borderRadius: 10 // 圆角半径
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            stacked: true
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true,
                            max: 100
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        }
                    },
                    layout: {
                        padding: 10
                    }
                }
            });
        });
    </script>
</body>
</html>