明星网页案例代码如何用HTML制作？-网页设计-锦华智联科技

这个案例将包含以下几个核心部分,以展示一个现代化的明星个人主页：

响应式导航栏：在桌面端显示完整菜单，在移动端显示汉堡菜单。
个人简介/英雄区域：展示明星的大图、姓名、简介和社交媒体链接。
作品集展示：使用标签页形式展示影视作品、音乐专辑等。
最新动态/新闻：展示明星的最新资讯。
粉丝留言板：一个简单的互动区域，让访客可以留言。
页脚：包含版权信息和更多链接。

最终效果预览

桌面端布局:
移动端布局 (响应式):

文件结构

为了方便管理,我们将代码分为三个文件：

star-website/
├── index.html      # 网页的结构
├── style.css       # 网页的样式
└── script.js       # 网页的交互逻辑

第 1 步: HTML 结构 (`index.html`)

这是网页的骨架,我们使用语义化的 HTML5 标签（如 <header>, <main>, <section>, <footer>）来构建页面结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">李明 - 官方网站</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <a href="#" class="logo">LM</a>
            <nav class="nav-menu">
                <a href="#home">首页</a>
                <a href="#portfolio">作品</a>
                <a href="#news">动态</a>
                <a href="#gallery">图库</a>
                <a href="#contact">留言</a>
            </nav>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </header>
    <main>
        <!-- 个人简介/英雄区域 -->
        <section id="home" class="hero">
            <div class="hero-content container">
                <h1>李明</h1>
                <p class="tagline">演员 | 歌手 | 舞者</p>
                <p class="description">一位充满激情与才华的艺术家，致力于用作品传递爱与希望。</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
        </section>
        <!-- 作品集展示 -->
        <section id="portfolio" class="portfolio">
            <div class="container">
                <h2>作品集</h2>
                <div class="tab-container">
                    <div class="tabs">
                        <button class="tab-btn active" data-tab="movies">影视作品</button>
                        <button class="tab-btn" data-tab="music">音乐专辑</button>
                    </div>
                    <div class="tab-content">
                        <div id="movies" class="tab-pane active">
                            <div class="work-grid">
                                <div class="work-item">
                                    <img src="https://via.placeholder.com/300x400" alt="电影海报">
                                    <h3>《追光者》</h3>
                                    <p>饰演：男主角 - 林风</p>
                                </div>
                                <div class="work-item">
                                    <img src="https://via.placeholder.com/300x400" alt="电影海报">
                                    <h3>《城市边缘》</h3>
                                    <p>饰演：配角 - 阿杰</p>
                                </div>
                                <div class="work-item">
                                    <img src="https://via.placeholder.com/300x400" alt="电视剧海报">
                                    <h3>《青春纪事》</h3>
                                    <p>饰演：男主角 - 陈默</p>
                                </div>
                            </div>
                        </div>
                        <div id="music" class="tab-pane">
                            <div class="work-grid">
                                <div class="work-item">
                                    <img src="https://via.placeholder.com/300x300" alt="专辑封面">
                                    <h3>专辑《心之所向》</h3>
                                    <p>发行日期：2025年10月</p>
                                </div>
                                <div class="work-item">
                                    <img src="https://via.placeholder.com/300x300" alt="专辑封面">
                                    <h3>单曲《梦的翅膀》</h3>
                                    <p>发行日期：2025年05月</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 最新动态 -->
        <section id="news" class="news">
            <div class="container">
                <h2>最新动态</h2>
                <div class="news-list">
                    <article class="news-item">
                        <div class="news-date">2025年12月15日</div>
                        <h3>新电影《追光者》票房破亿，感谢所有影迷的支持！</h3>
                        <p>新电影《追光者》上映首周票房便突破一亿大关，创下年度票房新纪录，感谢每一位走进影院支持我们的朋友...</p>
                    </article>
                    <article class="news-item">
                        <div class="news-date">2025年11月20日</div>
                        <h3>参加“年度风尚人物”颁奖典礼，荣获“最具影响力艺人”奖</h3>
                        <p>在昨晚的“年度风尚人物”颁奖典礼上，我有幸荣获“最具影响力艺人”奖，这个奖项属于所有支持我的人...</p>
                    </article>
                    <article class="news-item">
                        <div class="news-date">2025年10月05日</div>
                        <h3>全新专辑《心之所向》正式上线</h3>
                        <p>历时两年筹备，我的第三张个人专辑《心之所向》今天正式在各大音乐平台上线，希望这张专辑能带给你温暖和力量...</p>
                    </article>
                </div>
            </div>
        </section>
        <!-- 粉丝留言板 -->
        <section id="contact" class="contact">
            <div class="container">
                <h2>粉丝留言</h2>
                <form id="comment-form">
                    <input type="text" id="name-input" placeholder="你的名字" required>
                    <textarea id="comment-input" placeholder="写下你想对TA说的话..." required></textarea>
                    <button type="submit">发送留言</button>
                </form>
                <div id="comments-display" class="comments-list">
                    <!-- 留言将在这里动态显示 -->
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 李明官方网站. All Rights Reserved.</p>
        </div>
    </footer>
    <script src="script.js"></script>
</body>
</html>

第 2 步: CSS 样式 (`style.css`)

这是网页的“外衣”，负责页面的视觉呈现，包括颜色、字体、布局和动画效果，这里使用了 Flexbox 和 Grid 布局，并确保了响应式设计。

/* --- 全局样式 --- */
@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;
    --font-family: 'Noto Sans SC', sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    background-color: #f9f9f9;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
}
h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    color: var(--dark-color);
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* --- 导航栏 --- */
header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}
.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}
.nav-menu a {
    font-weight: 500;
    transition: color 0.3s ease;
}
.nav-menu a:hover {
    color: var(--primary-color);
}
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}
.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--dark-color);
    margin: 3px 0;
    transition: 0.3s;
}
/* --- 英雄区域 --- */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1920x1080') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    margin-top: 60px; /* 为固定导航栏留出空间 */
}
.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}
.tagline {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}
.description {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}
.social-links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}
.social-links a {
    color: #fff;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}
.social-links a:hover {
    transform: scale(1.2);
}
/* --- 作品集 --- */
.portfolio {
    padding: 5rem 0;
    background-color: #fff;
}
.tab-container {
    margin-top: 2rem;
}
.tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.tab-btn {
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    font-weight: 500;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
}
.tab-btn.active,
.tab-btn:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.work-item {
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
.work-item:hover {
    transform: translateY(-10px);
}
.work-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.work-item h3 {
    padding: 1rem;
    font-size: 1.2rem;
}
.work-item p {
    padding: 0 1rem 1rem;
    color: #777;
}
/* --- 最新动态 --- */
.news {
    padding: 5rem 0;
    background-color: #f9f9f9;
}
.news-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.news-item {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.news-date {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.news-item h3 {
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}
/* --- 留言板 --- */
.contact {
    padding: 5rem 0;
    background-color: #fff;
}
#comment-form {
    max-width: 600px;
    margin: 0 auto 3rem;
}
#comment-form input,
#comment-form textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: var(--font-family);
}
#comment-form button {
    display: block;
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#comment-form button:hover {
    background-color: #ff5252;
}
.comments-list {
    max-width: 800px;
    margin: 0 auto;
}
.comment-item {
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}
.comment-author {
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
/* --- 页脚 --- */
footer {
    background-color: var(--dark-color);
    color: #fff;
    text-align: center;
    padding: 2rem 0;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
    }
    .nav-menu.active {
        left: 0;
    }
    .hamburger {
        display: flex;
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .tagline {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 2rem;
    }
}

第 3 步: JavaScript 交互 (`script.js`)

这是网页的“大脑”，负责处理用户的交互，比如移动端菜单的开关、作品集标签页的切换和留言板的功能。

// 等待整个文档加载完成后再执行脚本
document.addEventListener('DOMContentLoaded', () => {
    // --- 移动端导航菜单 ---
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');
    hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('active');
        navMenu.classList.toggle('active');
    });
    // 点击导航链接后关闭菜单
    document.querySelectorAll('.nav-menu a').forEach(n => n.addEventListener('click', () => {
        hamburger.classList.remove('active');
        navMenu.classList.remove('active');
    }));
    // --- 作品集标签页切换 ---
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabPanes = document.querySelectorAll('.tab-pane');
    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // 移除所有按钮和面板的 'active' 类
            tabBtns.forEach(b => b.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));
            // 为当前点击的按钮和对应的面板添加 'active' 类
            btn.classList.add('active');
            const tabId = btn.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');
        });
    });
    // --- 粉丝留言板功能 ---
    const commentForm = document.getElementById('comment-form');
    const nameInput = document.getElementById('name-input');
    const commentInput = document.getElementById('comment-input');
    const commentsDisplay = document.getElementById('comments-display');
    // 从 localStorage 加载已保存的留言
    const savedComments = JSON.parse(localStorage.getItem('starComments')) || [];
    savedComments.forEach(comment => displayComment(comment));
    commentForm.addEventListener('submit', (e) => {
        e.preventDefault(); // 阻止表单默认提交行为
        const name = nameInput.value.trim();
        const text = commentInput.value.trim();
        if (name && text) {
            const comment = {
                name: name,
                text: text,
                date: new Date().toLocaleString('zh-CN')
            };
            // 将新留言添加到数组开头
            savedComments.unshift(comment);
            // 保存到 localStorage
            localStorage.setItem('starComments', JSON.stringify(savedComments));
            // 显示新留言
            displayComment(comment);
            // 清空输入框
            nameInput.value = '';
            commentInput.value = '';
        }
    });
    // 辅助函数：用于显示单条留言
    function displayComment(comment) {
        const commentElement = document.createElement('div');
        commentElement.classList.add('comment-item');
        commentElement.innerHTML = `
            <div class="comment-author">${comment.name} - ${comment.date}</div>
            <div class="comment-text">${comment.text}</div>
        `;
        commentsDisplay.insertBefore(commentElement, commentsDisplay.firstChild);
    }
});

如何使用

创建文件夹：在你的电脑上创建一个名为 star-website 的文件夹。
创建文件：在 star-website 文件夹内，创建 index.html、style.css 和 script.js 三个文件。
复制代码：将上面提供的代码分别复制到对应的文件中。
替换图片：你可以将代码中的 https://via.placeholder.com/... 替换成你自己的图片链接或本地图片路径。
打开网页：用浏览器打开 index.html 文件，你就可以看到这个明星网页了。

这个案例涵盖了网页开发中前端技术的核心要素,并且具有良好的用户体验和视觉效果，非常适合作为学习和实践的参考。

明星网页案例代码如何用HTML制作？

最终效果预览

文件结构

第 1 步: HTML 结构 (index.html)

第 2 步: CSS 样式 (style.css)

第 3 步: JavaScript 交互 (script.js)

如何使用

第 1 步: HTML 结构 (`index.html`)

第 2 步: CSS 样式 (`style.css`)

第 3 步: JavaScript 交互 (`script.js`)