【html期末作业网页设计】

努力的小好2025-03-05 11:00

html期末作业网页设计

作者有话说

目前，我们的项目已经搭建了各页面的基本框架，但内容填充还不完善，各页面之间的跳转逻辑也还需要进一步优化。

我们深知，一个好的项目需要不断迭代和完善，因此非常欢迎各位朋友提出宝贵的意见和建议。无论是关于页面内容的填充，还是页面跳转流程的改进，我们都非常期待听到您的想法。

如果您有任何想法或建议，欢迎留言交流，共同推动项目的进步。

项目功能介绍

页面结构与导航

导航栏：页面顶部有固定的导航栏，包含网站 logo "Alex" 以及三个导航链接："首页"、"标签" 和 "关于"。导航栏具有背景模糊效果和阴影，在滚动页面时会根据滚动位置调整阴影。

多页面布局：网站包含三个主要页面，分别是首页、标签页和关于页，通过导航链接可以平滑滚动切换页面。每个页面初始时透明度为 0 且有向下偏移，激活时会有淡入和向上移动的动画效果。

内容加载

异步加载：使用 fetch API 异步加载各个页面的内容，首页、标签页和关于页的具体内容分别存放在 pages 文件夹下的 home.html、tags.html 和 about.html 文件中。

首页内容

标题与简介：展示 "创意开发者" 的标题和一段关于开发者的简介，强调将想法转化为数字体验，追求卓越用户体验。

技能展示：以网格形式展示开发者的四项技能，包括前端开发、UI 设计、后端开发和数据库管理，每个技能项有简要描述。

** 标签页内容**

标签切换：提供 "全部"、"前端"、"设计" 和 "生活" 四个标签，点击标签可以切换显示不同类别的内容。

内容分类：每个标签对应不同的内容板块，分别展示前端技术、设计灵感、生活趣事等相关信息。

网站结构

personal-website/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── placeholder.jpg
└── pages/
    ├── home.html
    ├── tags.html
    └── about.html

完整代码

index.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex的个人空间</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
    <nav class="nav">
        <div class="nav-container">
            <a href="#" class="logo">Alex</a>
            <div class="nav-links">
                <a href="#home" class="nav-link active">首页</a>
                <a href="#tags" class="nav-link">标签</a>
                <a href="#about" class="nav-link">关于</a>
            </div>
            <button id="dark-mode-toggle"><i class="fas fa-moon"></i></button>
        </div>
    </nav>

    <main id="page-container">
        <!-- 首页 -->
        <section id="home" class="page active">
            <!-- 首页内容将通过 home.html 引入 -->
        </section>

        <!-- 标签页 -->
        <section id="tags" class="page">
            <!-- 标签页内容将通过 tags.html 引入 -->
        </section>

        <!-- 关于页 -->
        <section id="about" class="page">
            <!-- 关于页内容将通过 about.html 引入 -->
        </section>
    </main>

    <script src="js/script.js"></script>
</body>

</html>

css/style.css

html 复制代码 
:root {
    --primary: #2A2A2A;
    --accent: #FF6B6B;
    --light: #F4F4F4;
    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.dark-mode {
    --primary: #F4F4F4;
    --light: #2A2A2A;
    background: linear-gradient(135deg, #1e2022 0%, #3a4750 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: var(--primary);
    transition: var(--transition);
}

/* 导航栏 */
.nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

body.dark-mode .nav {
    background: rgba(0, 0, 0, 0.95);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition);
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--primary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: var(--transition);
}

.nav-link:hover {
    background: rgba(255, 107, 107, 0.1);
    transform: translateY(-2px);
}

#dark-mode-toggle {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

#dark-mode-toggle:hover {
    transform: scale(1.1);
}

/* 页面容器 */
.page {
    min-height: 100vh;
    padding: 3rem 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 垂直居中内容 */
    align-items: center;
    /* 水平居中内容 */
}

.page.active {
    opacity: 1;
    transform: translateY(0);
}

/* 不同屏幕宽度下调整 padding-top */
@media (min-width: 1920px) {
    .page {
        padding-top: 1.5rem;
    }
}

/* 首页样式 */
.hero {
    text-align: center;
    max-width: 800px;
    width: 100%;
    /* 确保宽度占满可用空间 */
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, var(--accent), #ff8e53);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    width: 100%;
    /* 确保宽度占满可用空间 */
}

.skill-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

body.dark-mode .skill-card {
    background: #3a4750;
}

.skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* 标签页样式 */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 1000px;
    width: 100%;
    /* 确保宽度占满可用空间 */
    margin: 0 auto;
    justify-content: center;
    /* 水平居中标签 */
}

.tag {
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .tag {
    background: #3a4750;
    color: var(--light);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tag.active {
    background: var(--accent);
    color: white;
}

.tag-content {
    margin-top: 2rem;
    max-width: 1000px;
    width: 100%;
    /* 确保宽度占满可用空间 */
    margin: 2rem auto;
}

.content {
    display: none;
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

body.dark-mode .content {
    background: #3a4750;
}

.content.active {
    display: block;
}

/* 关于页样式 */
.about {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}

.avatar {
    width: 100%;
    border-radius: 0;
    /* 修改为 0，使头像变为正方形 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
    /* 水平居中社交链接 */
}

.social-links a {
    color: var(--primary);
    font-size: rem;
    transition: var(--transition);
}

.social-links a:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .about {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* 加载动画样式 */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.loader::after {
    content: "";
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 美化留言框 */
#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Segoe UI', system-ui;
}

#contact-form textarea {
    resize: vertical;
    /* 允许垂直调整大小 */
    min-height: 150px;
}

#contact-form button {
    background-color: var(--accent);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: var(--transition);
}

#contact-form button:hover {
    background-color: #ff5252;
    /* 鼠标悬停时的颜色 */
}

js/script.js

html 复制代码 
// 引入页面内容
const pages = ['home', 'tags', 'about'];
pages.forEach(page => {
    const section = document.getElementById(page);
    fetch(`pages/${page}.html`)
        .then(response => response.text())
        .then(data => {
            section.innerHTML = data;
            // 标签页切换逻辑
            if (page === 'tags') {
                const tags = document.querySelectorAll('.tag');
                const contents = document.querySelectorAll('.content');
                tags.forEach(tag => {
                    tag.addEventListener('click', () => {
                        document.querySelector('.tag.active').classList.remove('active');
                        tag.classList.add('active');
                        const targetClass = tag.textContent.toLowerCase().replace(/ /g, '-');
                        contents.forEach(content => {
                            content.classList.remove('active');
                            if (content.classList.contains(targetClass) || targetClass === 'all') {
                                content.classList.add('active');
                            }
                        });
                    });
                });
            }
        });
});

// 页面切换逻辑
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const targetId = link.getAttribute('href');

        // 切换active状态
        document.querySelector('.nav-link.active').classList.remove('active');
        link.classList.add('active');

        // 切换页面
        document.querySelector('.page.active').classList.remove('active');
        document.querySelector(targetId).classList.add('active');
    });
});

// 滚动监听
window.addEventListener('scroll', () => {
    const nav = document.querySelector('.nav');
    if (window.scrollY > 100) {
        nav.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.1)';
    } else {
        nav.style.boxShadow = 'none';
    }
});

// 视差效果
document.addEventListener('mousemove', (e) => {
    const cards = document.querySelectorAll('.skill-card');
    cards.forEach(card => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        card.style.transform = `perspective(1000px) rotateX(${(y - rect.height / 2) / 20}deg) rotateY(${-(x - rect.width / 2) / 20}deg)`;
    });
});

// 夜间模式切换
const darkModeToggle = document.getElementById('dark-mode-toggle');
darkModeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    if (document.body.classList.contains('dark-mode')) {
        darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
    } else {
        darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
    }
});


// 页面加载完成后隐藏加载动画
window.addEventListener('load', () => {
    const loader = document.createElement('div');
    loader.classList.add('loader');
    document.body.appendChild(loader);

    setTimeout(() => {
        loader.style.display = 'none';
    }, 1000);
});

// 页面切换逻辑
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const targetId = link.getAttribute('href');
        const targetElement = document.querySelector(targetId);

        // 切换active状态
        document.querySelector('.nav-link.active').classList.remove('active');
        link.classList.add('active');

        // 平滑滚动到目标位置
        window.scrollTo({
            top: targetElement.offsetTop - document.querySelector('.nav').offsetHeight,
            behavior: 'smooth'
        });

        // 切换页面
        document.querySelector('.page.active').classList.remove('active');
        targetElement.classList.add('active');
    });
});

pages/tags.html

html 复制代码 
<div class="tags-container">
    <div class="tag active">全部</div>
    <div class="tag">前端</div>
    <div class="tag">设计</div>
    <div class="tag">生活</div>
</div>
<div class="tag-content">
    <div class="content all active">
        <h2>全部内容</h2>
        <p>这里展示所有相关的内容，涵盖前端技术、设计灵感和生活趣事。在前端领域，我会分享最新的框架和技术趋势；设计方面，探索各种创意和风格；生活中，记录旅行、美食等点滴美好。</p>
    </div>
    <div class="content front-end">
        <h2>前端技术</h2>
        <p>关注最新的前端框架和技术趋势，如 React 的 Hooks 特性、Vue 3 的 Composition API。分享实战经验，包括性能优化、代码结构设计等方面的技巧。同时，探讨前端工程化和自动化测试的重要性。
        </p>
    </div>
    <div class="content design">
        <h2>设计灵感</h2>
        <p>探索各种设计风格和创意，如简约主义、扁平化设计、拟物设计等。分享优秀的设计案例和设计原则，为你的项目提供灵感源泉。学习如何运用色彩理论和排版技巧提升设计品质。</p>
    </div>
    <div class="content life">
        <h2>生活趣事</h2>
        <p>记录生活中的点滴美好，分享旅行中的所见所闻，如美丽的风景、独特的文化。介绍各地的美食特色，分享烹饪心得。还会分享一些兴趣爱好，如摄影、阅读等。</p>
    </div>
</div>

pages/about.html

html 复制代码 
<div class="about">
    <img src="img/placeholder.jpg" alt="头像" class="avatar">
    <div class="about-content">
        <h2>关于我</h2>
        <p>我是 Alex，一名全栈开发者，拥有 5 年的行业经验。我热衷于将设计思维与技术实现相结合，致力于打造出用户体验优秀的数字产品。我热爱开源社区，经常参与开源项目，不断学习和探索 Web 开发的前沿技术。</p>
        <p>在工作之余，我喜欢旅行，体验不同的文化和风景；也喜欢摄影，用镜头记录生活中的美好瞬间。我相信生活中的灵感可以融入到工作中，让作品更具生命力。</p>
        <div class="social-links">
            <a href="https://github.com" target="_blank"><i class="fab fa-github"></i></a>
            <a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a>
            <a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
            <a href="https://weibo.com" target="_blank"><i class="fab fa-weibo"></i></a>
        </div>
        <h2>留下你的足迹</h2>
        <form id="contact-form">
            <input type="text" placeholder="姓名" required>
            <input type="email" placeholder="邮箱" required>
            <textarea placeholder="留言" required></textarea>
            <button type="submit">发送</button>
        </form>
    </div>
</div>

pages/about.html

html 复制代码 
<div class="hero">
    <h1>创意开发者</h1>
    <p>将想法转化为数字体验，探索无限可能！我热衷于使用前沿技术打造创新的 web 应用，追求卓越的用户体验。</p>
    <div class="skill-grid">
        <div class="skill-card">
            <h3>前端开发</h3>
            <p>熟练运用 React/Vue 等现代框架，结合 HTML、CSS、JavaScript 打造高性能、响应式的用户界面。掌握前端工程化流程，如 Webpack、Babel 等工具的使用。</p>
        </div>
        <div class="skill-card">
            <h3>UI设计</h3>
            <p>以用户体验为核心，运用 Sketch、Adobe XD 等设计工具，设计简洁美观、易用的界面。注重色彩搭配、排版布局和交互设计，提升产品竞争力。</p>
        </div>
        <div class="skill-card">
            <h3>后端开发</h3>
            <p>掌握 Node.js、Python（Flask、Django）等后端技术，构建稳定可靠的服务器端应用。熟悉数据库设计和开发，如 MySQL、MongoDB 等。</p>
        </div>
        <div class="skill-card">
            <h3>数据库管理</h3>
            <p>精通 MySQL、MongoDB 等数据库，能够进行数据库设计、优化数据存储和查询性能。掌握数据库备份、恢复和安全管理等操作。</p>
        </div>
    </div>
</div>

img/placeholder.jpg图片自己添加

网站样图


相关推荐
@HNUSTer5 小时前
基于 HTML、CSS 和 JavaScript 的五子棋游戏
前端·javascript·css·游戏·html
百锦再5 小时前
Vue核心知识：动态路由实现完整方案
前端·javascript·vue.js·前端框架·vue·路由·动态
aloha_6 小时前
江口村青年爱心基金会管理制度 - 暂定
前端
拉不动的猪6 小时前
刷刷题24
前端·javascript·面试
aloha_6 小时前
关于成立江口村青年爱心基金会的倡议
前端
Smile_Gently6 小时前
v-code-diff 配置
前端·javascript·vue.js
werch6 小时前
兼容移动端ios,安卓，web端底部软键盘弹出，输入框被遮挡问题
android·前端·ios
成功助力英语中国话6 小时前
visual studio 2022中如何添加项目到解决方案中
前端·ide·visual studio
互联网动态分析7 小时前
Tomcat：Java Web应用的强大支撑
java·前端·tomcat
敲代码中7 小时前
CSS_复合选择器
前端·javascript·html
热门推荐
01DeepSeek各版本说明与优缺点分析02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03如何在WPS和Word/Excel中直接使用DeepSeek功能04Windows 11 安装 Dify 完整指南 非docker环境05DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具06DeepSeek本地部署详细指南07npm install 报错解决方案全记录08本地部署DeepSeek教程（Mac版本）09在Windows下安装Ollama并体验DeepSeek r1大模型10WPF 复杂页面布局及漂亮 UI 界面设计全解析