【html期末作业网页设计】
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
<!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
: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
// 引入页面内容
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
<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
<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
<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图片自己添加
网站样图
相关文章：
【html期末作业网页设计】
html期末作业网页设计 作者有话说项目功能介绍 网站结构完整代码网站样图 作者有话说 目前，我们的项目已经搭建了各页面的基本框架，但内容填充还不完善，各页面之间的跳转逻辑也还需要进一步优化。 我们深知，一个好的项目需要不断…...
ComfyUI AnimeDiff动画参数总结
ComfyUI AnimeDiff动画参数总结 一、动画生成核心参数 参数名称建议值/范围作用说明备注步数（Steps）15-25控制AI计算迭代次数，越高细节越精细，但耗时更长推荐20步，显存不足可降至15步CFG值7.0-8.5提示词对画面的控制…...
基于Three.js的多视图3D Tiles同步可视化技术解析
文章目录 基于Three.js的多视图3D Tiles同步可视化技术解析一、技术背景与价值二、核心实现原理2.1 视口分割算法2.2 视角同步机制三、关键代码解析3.1 渲染管线优化3.2 3D Tiles加载四、交互系统实现4.1 多视图事件分发4.2 射线拾取优化五、性能优化方案5.1 渲染性能指标5.2 W…...
7、什么是死锁，如何避免死锁？【高频】
（1）什么是死锁： 死锁 是指在两个或多个进程的执行时，每个进程都持有资源，并都在等待其他进程 释放 它所需的资源，如果此时所有的进程一直占有资源而不释放，就导致了死锁。 死锁只有同时满足 四…...
自动化学习-使用git进行版本管理
目录 一、为什么要学习git 二、git是什么 三、git如何使用 1、git的下载安装和配置 2、git常用的命令 3、gitee远程仓库的使用 （1）注册 （2）创建仓库 （3）配置公钥（建立电脑和git…...
前端大文件上传
一、切片上传技术原理 切片上传是把大文件分割成多个较小的切片，分别上传这些切片，最后在服务器端将它们合并成完整文件。这种方式能有效应对网络不稳定导致的上传失败问题，还可利用多线程并行上传，提升上传效率。 二、前端实现…...
【网络】实现电脑与笔记本电脑之间的直接网络连接
要实现电脑与笔记本电脑之间的直接网络连接，可以通过有线或无线两种方式。以下是详细的步骤指南： 一、有线直连（通过网线） 1. 准备工具 网线：使用交叉网线（适用于旧设备）或普通直连网线&#…...
“深入浅出”系列之音视频开发：（12）使用FFmpeg实现倍速播放：技术细节与优化思路
一、前言 在音视频处理领域，倍速播放是一个常见的需求，尤其是在视频播放器、在线教育平台等场景中，用户常常需要以不同的速度播放视频内容。然而，实现一个高质量的倍速播放功能并不容易，尤其是在处理音频时࿰…...
qt作业day2
1：在注册登录的练习里面，追加一个QListWidget 项目列表 要求：点击注册之后，将账号显示到 listWidget上面去 以及，在listWidget中双击某个账号的时候，将该账号删除 .h #ifndef WIDGET_H #define WIDGET_H …...
Qt：day1
一、作业 写1个Widget窗口，窗口里面放1个按钮，按钮随便叫什么； 创建2个Widget对象： Widget w1, w2; w1.show(); w2不管； 要求： 点击 w1.btn，w1隐藏，w2显示； 点击 w2.btn&…...
基于微信小程序的停车场管理系统的设计与实现
第1章 绪论 1.1 课题背景 随着移动互联形式的不断发展，各行各业都在摸索移动互联对本行业的改变，不断的尝试开发出适合于本行业或者本公司的APP。但是这样一来用户的手机上就需要安装各种软件，但是APP作为一个只为某个公司服务的一个软件&a…...
详细Linux基础知识（不断完善）
终端类型分类 1. 物理终端 直接连接到计算机的硬件设备2. 虚拟终端 通过快捷键切换的文本模式界面： Ctrl + Alt + F1 # 登录窗口 Ctrl + Alt + F2 # 当前图形界面 Ctrl + Alt + F3 # 虚拟命令终端 Ctrl + Alt + F4-F6 # 备用虚拟终端3. 图形终端 模拟终端：图形环境中的…...
类和对象-继承-C++
1.定义 面向对象的三大特征之一，为了减少重复的代码 2.语法 class 子类 ：继承方式 父类 （子类也叫派生类，父类也称为基类） 例：class age：public person； #include<iostrea…...
初阶数据结构（C语言实现）——3顺序表和链表（1）
目录 【本节目标】1. 线性表2.顺序表2.1概念及结构2.2 接口实现2.2.0 动态顺序表2.2.1 顺序表初始化SLInit（）2.2.2 销毁和打印2.2.3 尾插SLPushBack（）2.2.4 尾删SLPopBack（）2.2.5 头插2.2.6 头删2.2.7 插入…...
nuxt常用组件库html-validator、@nuxtjs/i18n、@nuxt/image、@unocss/nuxt使用解析
html-validator 主要用于自动验证nuxt服务器呈现的HTML(SSR和SSG)，以检测可能导致水合错误的HTML常见问题，有助于减少水合错误，检测常见的可访问性错误。 安装 npx nuxilatest module add html-validator配置 若自动更新nuxt.config.ts配置文…...
4G工业路由器在公交充电桩中的应用与优势
随着电动公交车的普及，公交充电桩的稳定运行和高效管理是交通营运部门最关心的问题。4G工业路由器凭借其卓越的数据采集和通讯能力，成为实现充电桩智能化管理的关键。 公交充电桩运维管理需求概述： 1.实时性：实时监控充电状态、剩…...
matlab 四维数据可视化（已解决）
虽然这不是传统意义上的“4维可视化”，但你可以通过在三维空间中表示两个维度来间接展示4维数据。例如，你可以使用颜色来表示第四个维度。 clc clear close all% 假设X, Y, Z为你的三维数据，C为第四维数据 X rand(100, 1); Y rand(100, 1);…...
歌曲分类和流行度预测
1. 项目介绍 本项目从kaggle平台上下载了数据集，该数据集包含了3万多首来自Spotify API 的歌曲，共有23个特征。首先对数据集进行预处理，如重复行、缺失值、标准化处理等。再对预处理后的数据进行探索性分析，观察各变量的分布情况&…...
经验分享：用一张表解决并发冲突！数据库事务锁的核心实现逻辑
背景 对于一些内部使用的管理系统来说，可能没有引入Redis，又想基于现有的基础设施处理并发问题，而数据库是每个应用都避不开的基础设施之一，因此分享个我曾经维护过的一个系统中，使用数据库表来实现事务锁的方式。 之…...
oracle decode
1. 基本语法 DECODE(expression, search1, result1, search2, result2, ..., default_result) expression ：需要比较的表达式或列。search1, search2, ... ：要匹配的值。result1, result2, ... ：当 expression 等于 search 时返回的结果。def…...
让后台界面布局更灵活：在GrapesJS中复刻Java的五区式布局
当你想要在可视化编辑器中做一个类似Java BorderLayout 的五区布局，却发现市面上大多只能“简单拼接”而难以自由扩展时，你或许就需要一个更灵活的布局管理器来帮忙。本篇文章就从这个痛点开始，带你一步步揭秘如何用 GrapesJS 自定义并实现一…...
【网络安全 | 漏洞挖掘】分享21个基础漏洞案例
未经许可，不得转载。 文章目录 案例1：绕过500状态码案例2：修改前端实现任意文件上传案例3：Nmap扫描端口命令案例4：绕过限制实现任意文件读取案例5：删除任意目录文件案例6：锁定任意账户案例7：重置任意用户密码案例8：接管任意账户方法一方法二案例9：功能校验机制绕过案…...
期权适合什么类型的投资者交易？
财顺小编本文主要介绍期权适合什么类型的投资者交易？期权适合的投资者类型需结合其风险偏好、投资目标及市场判断能力综合评估。 期权适合什么类型的投资者交易？ 1. 风险管理型投资者（稳健型） 适用场景：持有股票、大…...
浅谈C++/C命名冲突
前言 在这里我会简要地介绍产生命名冲突的原因，和C中处理命名冲突的方法，同时和C语言的解决办法进行比较。 相信你在阅读完之后一定会有收获。对于我们来说，了解编译器的编译链接过程才能更好的理解编译器是如何报错的，更能让我们…...
【星云 Orbit • STM32F4】08. 用判断数据头来接收据的串口通用程序框架
【星云 Orbit • STM32F4】08. 用判断数据头来接收据的串口通用程序框架 1. 引言 本教程旨在帮助嵌入式开发小白从零开始，学习如何在STM32F407微控制器上实现一个基于串口的数据接收程序。该程序能够通过判断数据头来接收一串数据，并将其存储到缓冲区中…...
C# OnnxRuntime部署DAMO-YOLO香烟检测
目录 说明 效果 模型信息 项目 代码 下载 参考 说明 效果 模型信息 Model Properties ------------------------- --------------------------------------------------------------- Inputs ------------------------- name：input tensor：Floa…...
探索Elasticsearch:索引的CRUD
在企业环境中，Elasticsearch的索引CRUD（创建Create、读取Read、更新Update、删除Delete）操作是非常基础且频繁使用的功能。这些操作对于管理和维护数据至关重要，尤其是在处理大规模数据集和需要实时搜索与分析的应用场景中。 目录…...
C++：多态与虚函数
1.虚函数，在函数前加virtual即可。有虚函数时，父类指针指向父类对象时就会使用父类的成员，指向子类对象时就可以使用子类成员，进而我们引入了多态的概念。 2.多态：父类指针指向子类的对象，通过父类指针调用…...
【Python 数据结构 2.时间复杂度和空间复杂度】
Life is a journey —— 25.2.28 一、引例：穷举法 1.单层循环 所谓穷举法，就是我们通常所说的枚举，就是把所有情况都遍历了的意思。 例：给定n（n ≤ 1000）个元素ai，求其中奇数有多少个 判断一…...
)
【Qt QML】QML鼠标事件(MouseArea)
QML鼠标事件全面解析 一、MouseArea基础概念 在 QML 中，鼠标事件是处理用户与界面元素交互的重要部分。QML 提供了多种方式来处理鼠标事件，MouseArea 是 QML 中用于处理鼠标事件的核心元素，它可以覆盖在其他元素之上，捕获鼠标操作并触发相应的信号。 1、基本用法 import …...
医脉云枢：中医药典籍知识图谱与非遗传承多维可视化系统
核心优势： "医脉"直击主题，"云枢"体现技术前瞻性 "非遗传承"呼应二十大文化政策 "多维"涵盖3D模型、时间轴、地图等多种可视化形式 技术栈：Vue Flask Element UI ECharts MySQL 同时参考了…...
vue 和 react 底层采用的 diff 算法的区别
Vue 3 和 React 在底层 Diff 算法上的实现确实有一些区别，主要体现在设计理念、性能优化策略以及具体实现方式上。以下是对两者 Diff 算法差异的详细分析： 1. 总体设计理念 Vue 3 的 Diff 算法 Vue 3 的虚拟 DOM Diff 算法基于“双端比较”思想ÿ…...
养老小程序方案详解居家养老小程序系统
养老小程序，上门居家养老小程序，用户端护工端小程序，管理后台。php开发语言，可源码搭建，二次开发或者定制开发。 一 用户端：小程序 核心功能模块：用户完善个人健康档案，在线选择服…...
Tauri跨平台开发问题及解决方案深度解析（React版）
Tauri跨平台开发问题及解决方案深度解析（React版） 一、环境配置与项目初始化难题（React适配） 1.1 React项目初始化 推荐模板： # 使用ReactTypeScript模板 npm create tauri-applatest -- --template react-ts# 项目…...
【OMCI实践】omci.lua脚本文件（独家分享）
引言 omci.lua文件是Wireshark的OMCI协议解析插件的核心组件。它配合BinDecHex.lua，可以解析OMCI协议的数据包，提取出消息类型、受管实体标识、受管实体属性等关键信息，并以人类可读的形式显示在Wireshark的解码视图中，方便研发人…...
React高级内容探索
flushSync确保了DOM立即更新 flushSync让你强制React同步刷新提供回调中的任何更新，这确保了DOM立即更新 flushSync是DOM更新之后的，像vue中的nextTick： import { useState,useRef} from "react" import { flushSync} from &quo…...
前端水印实现方式
一、简介 简单来说，前端水印就是在网页或应用程序的前端界面上添加的一种标记，通常是文本、图标或图案等形式。它就像给你的数字内容贴上了一个独特的 “标签”，用于标识内容的归属、防止未经授权的使用和传播。比如，一些在线图片…...
【新手入门】SQL注入之getshell（木马）
木马介绍 木马其实就是一段程序，这个程序运行到目标主机上时，主要可以对目标进行远程控制、盗取信息等功能，一般不会破坏目标主机，当然，这也看黑客是否想要搞破坏。 按照功能分类:远控型、破坏型、流氓软件型、盗取信…...
Git操作指南：分支合并、回退及其他重要操作
在软件开发的协作过程中，Git 作为一款强大的版本控制系统，能帮助开发者高效管理代码的各个版本和分支。本文将详细介绍 Git 中常见的分支合并、取消本地修改、回退操作等，并提供通俗易懂的解释和步骤指南。 一、分支合并 分支合并是 Git 工…...
Vue 3 引入全局状态管理 pinia
什么是全局状态管理? 所有页面全局共享的变量，而不是局限在某一个页面中。适合作为全局状态的数据: 已登录用户信息 (每个页面几乎都要用) Pinia 是一个主流的状态管理库，相比于 Vuex 来说使用更简单，可参考 入门文档 开始 | Pinia 进行引…...
SQL 中为什么参数多了not in 比 in 慢多了，怎么优化
开发工作中，我发现一个现象，比喻下面的两个语句： select * from shangpin where spdm in (1,2,3,...); select * from shangpin where spdm not in (1,2,3,...); 当参数比较少的时候还看不出来什么，但是遇到参数上了几百几千&am…...
[密码学实战]Java生成SM2根证书及用户证书
前言 在国密算法体系中，SM2是基于椭圆曲线密码（ECC）的非对称加密算法，广泛应用于数字证书、签名验签等场景。本文将结合代码实现，详细讲解如何通过Java生成SM2根证书及用户证书，并深入分析其核心原理。 一、证书验证 1.代码运行结果 2.根证书验证 3.用户证书验证 二、…...
API接口：企业名称、注册号、统一社会信用代码、企业类型、成立日期和法定代表人等数据 API 接口使用指南
API接口：企业名称、注册号、统一社会信用代码、企业类型、成立日期和法定代表人等数据 API 接口使用指南 本文详细介绍一种基于 Web 搜索方式实现的企业信息查询接口，适用于数据补全、企业资质验证、信息查询等场景。文章内容涵盖接口功能、请求参数、返…...
版图自动化连接算法开发 00004 ------ 给定一个点，添加一个中间点实现 Manhattan 方式连接两个给定的坐标点
版图自动化连接算法开发 00004 ------ 给定一个点，添加一个中间点实现 Manhattan 方式连接两个给定的坐标点 引言正文引言 必读文章 ------ 版图自动化连接算法开发 00001 ------ 直接连接两个给定的坐标点。 此处，我们对给定点的坐标进行一下限制，因为是只添加一个点，因…...
医疗行业电脑终端如何防病毒——火绒企业版杀毒软件
医疗物联网技术广泛应用，使得医院网络空间中增加了诸多新型终端设备。这些设备类型多样、型号各异，风险暴露面积大。火绒安全对医疗机构终端安全出现的问题、不足、需求等，提出整体解决方案。 医疗行业终端安全防护痛点 系统老旧 医院、区…...
【入门Web安全之前端学习的侧重点和针对性的建议】
入门Web安全之前端学习的侧重点和针对性的建议 一、HTML：理解攻击载荷的载体二、CSS：次要但需警惕点击劫持三、JavaScript：渗透测试的核心重点四、浏览器工具：渗透测试的实战武器五、学习建议与资源六、总结：渗透测试者…...
2024年中国城市统计年鉴（PDF+excel）
2024年中国城市统计年鉴（PDFexcel） 说明：包括地级县级市 格式：PDFEXCEL 《中国城市统计年鉴》是一部全面反映中国城市发展状况的官方统计出版物，包括各级城市的详细统计数据。这部年鉴自1985年开始出版，…...
详解DeepSeek模型底层原理及和ChatGPT区别点
一、DeepSeek大模型原理 架构基础 DeepSeek基于Transformer架构，Transformer架构主要由编码器和解码器组成，在自然语言处理任务中，通常使用的是Transformer的解码器部分。它的核心是自注意力机制（Self - Attention），这个机制允许模型在处理输入序列时，关注序列中不同位…...
Github 2025-03-03 开源项目周报Top14
根据Github Trendings的统计，本周(2025-03-03统计)共有14个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Python项目5TypeScript项目4Jupyter Notebook项目3Go项目2JavaScript项目2C++项目2Vue项目1Rust项目1Dify.AI: 开源的LLM应用程序开发平台 创建…...
探秘基带算法：从原理到5G时代的通信变革【二】Viterbi解码
文章目录 二、关键算法原理剖析2.1 Viterbi 解码2.1.1 卷积码与网格图基础**卷积码****网格图****生成多项式****理想情况下解码过程** 2.1.2 Viterbi 算法核心思想2.1.3 路径度量与状态转移机制2.1.4 算法流程与关键步骤详解2.1.5 译码算法举例与复杂度分析2.1.6 算法代码示例…...