HTML明星个人简介模板代码如何获取与使用？-网页设计-锦华智联科技

模板特点

响应式设计：自适应不同屏幕尺寸。
现代美观：使用了渐变色、卡片式布局和阴影效果。
功能完整：包含了头部导航、个人介绍、作品展示、社交媒体链接和联系表单等常见模块。
易于定制：使用注释清晰地标明了需要修改的部分。
交互效果：包含了平滑滚动、悬停效果和动态加载的动画。

最终效果预览

第一步：HTML 代码 (`index.html`)

这是网页的结构和内容,您可以直接复制下面的代码到一个名为 index.html 的文件中。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">张艺兴 - 个人官方网站</title>
    <!-- 引入字体图标库 (Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入自定义CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <nav class="navbar">
            <a href="#" class="logo">张艺兴</a>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我</a></li>
                <li><a href="#works">作品</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
            <!-- 移动端菜单按钮 -->
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>
    <main>
        <!-- 首页横幅/英雄区 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>你好，我是 <span class="highlight">张艺兴</span></h1>
                <p class="subtitle">歌手、制作人、演员</p>
                <p class="description">用音乐与舞蹈，创造无限可能，探索我的世界，感受艺术的魅力。</p>
                <div class="hero-buttons">
                    <a href="#works" class="btn primary">查看作品</a>
                    <a href="#contact" class="btn secondary">联系我</a>
                </div>
            </div>
            <div class="hero-image">
                <img src="https://via.placeholder.com/500x600" alt="张艺兴">
            </div>
        </section>
        <!-- 关于我 -->
        <section id="about" class="about">
            <div class="container">
                <h2 class="section-title">关于我</h2>
                <div class="about-content">
                    <div class="about-text">
                        <p>张艺兴（Lay Zhang），1991年10月7日出生于湖南省长沙市，中国内地男歌手、音乐制作人、演员。</p>
                        <p>作为EXO及中国分队EXO-M成员正式出道，凭借出色的舞蹈实力和音乐创作能力备受瞩目，2025年起，他开始在中国发展，并创立个人工作室。</p>
                        <p>他不仅在音乐领域不断探索，推出多张个人专辑，还积极涉足影视圈，参演了《老九门》、《扫黑风暴》等多部热门影视剧，展现了多面的才华与魅力。</p>
                        <p>秉持着“努力努力再努力”的信念，张艺兴在艺术的道路上不断突破自我，成为了一个全方位发展的艺人。</p>
                    </div>
                    <div class="about-skills">
                        <h3>专业技能</h3>
                        <div class="skill-item">
                            <span class="skill-name">音乐制作</span>
                            <div class="skill-bar">
                                <div class="skill-percentage" style="width: 95%;"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <span class="skill-name">舞蹈</span>
                            <div class="skill-bar">
                                <div class="skill-percentage" style="width: 98%;"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <span class="skill-name">表演</span>
                            <div class="skill-bar">
                                <div class="skill-percentage" style="width: 85%;"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <span class="skill-name">演唱</span>
                            <div class="skill-bar">
                                <div class="skill-percentage" style="width: 90%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 作品展示 -->
        <section id="works" class="works">
            <div class="container">
                <h2 class="section-title">我的作品</h2>
                <div class="work-filters">
                    <button class="filter-btn active" data-filter="all">全部</button>
                    <button class="filter-btn" data-filter="music">音乐</button>
                    <button class="filter-btn" data-filter="film">影视</button>
                </div>
                <div class="work-grid">
                    <!-- 音乐作品 -->
                    <div class="work-card" data-category="music">
                        <img src="https://via.placeholder.com/400x300" alt="专辑封面">
                        <div class="work-info">
                            <h3>《莲》</h3>
                            <p>2025年专辑</p>
                        </div>
                    </div>
                    <div class="work-card" data-category="music">
                        <img src="https://via.placeholder.com/400x300" alt="专辑封面">
                        <div class="work-info">
                            <h3>《梦不落雨林》</h3>
                            <p>2025年专辑</p>
                        </div>
                    </div>
                    <!-- 影视作品 -->
                    <div class="work-card" data-category="film">
                        <img src="https://via.placeholder.com/400x300" alt="电影海报">
                        <div class="work-info">
                            <h3>《孤注一掷》</h3>
                            <p>2025年电影</p>
                        </div>
                    </div>
                    <div class="work-card" data-category="film">
                        <img src="https://via.placeholder.com/400x300" alt="电视剧海报">
                        <div class="work-info">
                            <h3>《扫黑风暴》</h3>
                            <p>2025年电视剧</p>
                        </div>
                    </div>
                    <div class="work-card" data-category="music">
                        <img src="https://via.placeholder.com/400x300" alt="专辑封面">
                        <div class="work-info">
                            <h3>《西》</h3>
                            <p>2025年专辑</p>
                        </div>
                    </div>
                    <div class="work-card" data-category="film">
                        <img src="https://via.placeholder.com/400x300" alt="电视剧海报">
                        <div class="work-info">
                            <h3>《老九门》</h3>
                            <p>2025年电视剧</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 社交媒体 -->
        <section class="social">
            <div class="container">
                <h2>关注我</h2>
                <div class="social-links">
                    <a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-spotify"></i></a>
                </div>
            </div>
        </section>
        <!-- 联系表单 -->
        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title">联系我</h2>
                <form class="contact-form">
                    <div class="form-group">
                        <input type="text" id="name" name="name" placeholder="您的姓名" required>
                    </div>
                    <div class="form-group">
                        <input type="email" id="email" name="email" placeholder="您的邮箱" required>
                    </div>
                    <div class="form-group">
                        <textarea id="message" name="message" rows="5" placeholder="留言内容" required></textarea>
                    </div>
                    <button type="submit" class="btn primary">发送消息</button>
                </form>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 张艺兴官方网站. All rights reserved.</p>
        </div>
    </footer>
    <!-- 引入自定义JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>

第二步：CSS 代码 (`style.css`)

这是网页的样式表,负责美化页面，创建一个名为 style.css 的文件，并将以下代码粘贴进去。

/* --- 全局样式 --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
:root {
    --primary-color: #ff6b6b;
    --secondary-color: #4ecdc4;
    --dark-color: #2c3e50;
    --light-color: #ecf0f1;
    --text-color: #333;
    --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Noto Sans SC', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #f8f9fa;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
}
h2.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--dark-color);
}
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}
.btn.primary {
    background: var(--gradient);
    color: white;
}
.btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.btn.secondary {
    background: transparent;
    color: var(--dark-color);
    border: 2px solid var(--dark-color);
}
.btn.secondary:hover {
    background: var(--dark-color);
    color: white;
}
/* --- 导航栏 --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
.navbar .logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-color);
    text-decoration: none;
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}
.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
}
.nav-links a:hover {
    color: var(--primary-color);
}
.hamburger {
    display: none;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--dark-color);
    margin: 5px 0;
    transition: 0.3s;
}
/* --- 首页横幅 --- */
.hero {
    padding: 120px 5% 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.hero-content {
    flex: 1;
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: var(--dark-color);
}
.highlight {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
{
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 500;
}
.description {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 2rem;
}
.hero-buttons {
    display: flex;
    gap: 1rem;
}
.hero-image {
    flex: 1;
    text-align: center;
}
.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
/* --- 关于我 --- */
.about {
    padding: 80px 0;
    background: white;
}
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.about-text p {
    margin-bottom: 1rem;
    color: #555;
}
.about-skills h3 {
    margin-bottom: 1.5rem;
    color: var(--dark-color);
}
.skill-item {
    margin-bottom: 1.5rem;
}
.skill-name {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.skill-bar {
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}
.skill-percentage {
    height: 100%;
    background: var(--gradient);
    border-radius: 5px;
    width: 0;
    animation: fillBar 2s ease-out forwards;
}
@keyframes fillBar {
    to { width: var(--width, 0%); }
}
/* --- 作品展示 --- */
.works {
    padding: 80px 0;
    background: #f8f9fa;
}
.work-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}
.filter-btn {
    padding: 10px 20px;
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}
.filter-btn.active,
.filter-btn:hover {
    background: var(--primary-color);
    color: white;
}
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.work-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.work-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.work-info {
    padding: 1.5rem;
}
.work-info h3 {
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}
.work-info p {
    color: #777;
    font-size: 0.9rem;
}
/* --- 社交媒体 --- */
.social {
    padding: 60px 0;
    background: white;
    text-align: center;
}
.social h2 {
    margin-bottom: 2rem;
    color: var(--dark-color);
}
.social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--gradient);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}
.social-link:hover {
    transform: scale(1.1);
}
/* --- 联系表单 --- */
.contact {
    padding: 80px 0;
    background: #f8f9fa;
}
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.form-group {
    margin-bottom: 1.5rem;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}
/* --- 页脚 --- */
footer {
    background: var(--dark-color);
    color: white;
    text-align: center;
    padding: 20px 0;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }
    .nav-links {
        position: fixed;
        top: 70px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: white;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: 50px;
        transition: right 0.3s ease;
    }
    .nav-links.active {
        right: 0;
    }
    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 100px;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-buttons {
        justify-content: center;
    }
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .work-filters {
        flex-wrap: wrap;
    }
}

第三步：JavaScript 代码 (`script.js`)

这是网页的交互脚本,用于实现移动端菜单切换、作品筛选和表单提交等功能，创建一个名为 script.js 的文件，并将以下代码粘贴进去。

// 等待整个文档加载完成
document.addEventListener('DOMContentLoaded', () => {
    // --- 移动端菜单切换 ---
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');
    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
        // 添加动画效果到汉堡图标
        hamburger.classList.toggle('active');
    });
    // 点击菜单链接后关闭移动端菜单
    document.querySelectorAll('.nav-links a').forEach(link => {
        link.addEventListener('click', () => {
            navLinks.classList.remove('active');
            hamburger.classList.remove('active');
        });
    });
    // --- 作品筛选功能 ---
    const filterBtns = document.querySelectorAll('.filter-btn');
    const workCards = document.querySelectorAll('.work-card');
    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // 移除所有按钮的 'active' 类
            filterBtns.forEach(b => b.classList.remove('active'));
            // 为当前点击的按钮添加 'active' 类
            btn.classList.add('active');
            const filterValue = btn.getAttribute('data-filter');
            workCards.forEach(card => {
                if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
                    card.style.display = 'block';
                    // 添加淡入动画
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'scale(1)';
                    }, 10);
                } else {
                    card.style.opacity = '0';
                    card.style.transform = 'scale(0.8)';
                    // 等待动画完成后隐藏元素
                    setTimeout(() => {
                        card.style.display = 'none';
                    }, 300);
                }
            });
        });
    });
    // --- 联系表单提交 ---
    const contactForm = document.querySelector('.contact-form');
    contactForm.addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
        // 在实际应用中，这里应该使用 AJAX 或 Fetch API 将表单数据发送到服务器
        // 这里我们只做一个简单的模拟提示
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const message = document.getElementById('message').value;
        if (name && email && message) {
            alert(`感谢您的留言，${name}！我们会尽快回复您，`);
            contactForm.reset(); // 清空表单
        } else {
            alert('请填写所有必填项。');
        }
    });
    // --- 技能条动画 ---
    // 使用 Intersection Observer API 在技能条进入视口时触发动画
    const skillBars = document.querySelectorAll('.skill-percentage');
    const observerOptions = {
        threshold: 0.5 // 当元素50%可见时触发
    };
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const bar = entry.target;
                const width = bar.style.width;
                bar.style.setProperty('--width', width);
                bar.style.width = '0'; // 先重置宽度，以便动画可以重新播放
                setTimeout(() => {
                    bar.style.width = width;
                }, 100);
                observer.unobserve(bar); // 动画播放后停止观察
            }
        });
    }, observerOptions);
    skillBars.forEach(bar => {
        observer.observe(bar);
    });
});

如何使用

创建文件：在同一目录下创建三个文件：index.html、style.css 和 script.js。
粘贴代码：将上面提供的代码分别粘贴到对应的文件中。
替换图片：在 index.html 中，找到所有 src="https://via.placeholder.com/..." 的地方，替换为您自己的明星照片、专辑封面或海报链接。
修改文本：直接在 index.html 文件中修改文本内容，如姓名、简介、作品列表等。
打开网页：用浏览器打开 index.html 文件，即可看到效果。

这个模板为您提供了一个坚实的基础,您可以根据自己的需求进行进一步的修改和扩展，例如添加视频播放器、粉丝社区、最新动态等模块。

（图片来源网络，侵删）

HTML明星个人简介模板代码如何获取与使用？

模板特点

最终效果预览

第一步：HTML 代码 (index.html)

第二步：CSS 代码 (style.css)

第三步：JavaScript 代码 (script.js)

如何使用

第一步：HTML 代码 (`index.html`)

第二步：CSS 代码 (`style.css`)

第三步：JavaScript 代码 (`script.js`)