当前位置： 首页 > news >正文

六十天前端强化训练之第一天到第七天——综合案例：响应式个人博客项目

news 来源：原创 2025/8/30 3:50:01

=====欢迎来到编程星辰海的博客讲解======

目录

前言回顾

HTML5与CSS3基础

一、知识讲解

1. 项目架构设计（语义化HTML）

2. 响应式布局系统（Flex + Grid）

3. 样式优先级与组件化设计

4. 完整响应式工作流

二、核心代码示例

完整HTML结构

Sass样式实现

三、实现效果展示

四、学习要点总结

五、扩展阅读推荐

前言回顾

HTML5与CSS3基础

  1. HTML5语义化标签
    案例：使用article/section/nav等标签搭建博客结构
  2. CSS选择器与盒模型
    案例：实现不同选择器优先级样式覆盖效果
  3. Flex布局实战
    案例：实现响应式导航栏布局
  4. Grid布局入门
    案例：创建杂志风格的多列布局
  5. 响应式设计原理
    案例：使用媒体查询实现移动端适配
  6. CSS过渡与动画
    案例：制作按钮悬停动画效果
  7. CSS预处理器（Sass）
    案例：使用变量和嵌套编写样式表

这几天给大家讲解了HTML5与CSS3基础，可能不止七天，因为这段时间有点忙，我准备刷一下六级分数，所有在准备六级，一方面是蓝桥杯比赛，其次是竞选上了班长，有点累，希望大家体谅体谅，后面争取给大家每天更新。

大家可以先不看下面的内容，想想这几天学了什么，哪些知识点自己掌握了，哪些忘了。

一、知识讲解

1. 项目架构设计（语义化HTML）

HTML

<!-- 使用HTML5语义标签构建骨架 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>技术博客 | 前端之旅</title><link rel="stylesheet" href="styles/main.css">
</head>
<body><nav class="main-nav">...</nav><header class="page-header">...</header><main class="content-area"><article class="blog-post">...</article><section class="related-posts">...</section></main><aside class="sidebar">...</aside><footer class="page-footer">...</footer>
</body>
</html>

设计要点：

  • 使用<article>包裹独立博文内容
  • <section>划分内容区块
  • <nav>包含主导航链接
  • 通过<main>与<aside>实现主内容/侧边栏分离

2. 响应式布局系统（Flex + Grid）

SCSS

// Sass变量定义
$breakpoints: (mobile: 480px,tablet: 768px,desktop: 1200px
);.content-area {display: grid;grid-template-columns: 1fr;gap: 2rem;@media (min-width: map-get($breakpoints, tablet)) {grid-template-columns: 3fr 1fr;}
}.main-nav {display: flex;flex-wrap: wrap;justify-content: space-between;@media (max-width: map-get($breakpoints, mobile)) {flex-direction: column;}
}

布局系统解析：

  • 移动优先原则：基础布局为单列，逐步增强为大屏布局
  • 使用Grid创建自适应内容区（主内容+侧边栏）
  • Flex实现导航栏的弹性布局
  • 通过Sass变量管理断点值

3. 样式优先级与组件化设计

SCSS

// 使用BEM命名规范
.card {// 基础盒模型padding: 1.5rem;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);&__title {// 选择器特异性控制color: var(--primary-color) !important;}// 状态变化&:hover {transform: translateY(-3px);transition: transform 0.3s ease;}
}

样式设计原则：

  • 通过嵌套选择器控制作用域
  • 使用CSS变量实现主题化管理
  • !important的正确使用场景
  • 组件状态动画设计

4. 完整响应式工作流

  1. 视口meta标签配置
  2. 流体图像处理：

CSS

img {max-width: 100%;height: auto;
}

  1. 媒体查询断点设置
  2. 使用<picture>元素实现响应式图片
  3. 使用rem单位保持比例关系

二、核心代码示例

完整HTML结构

HTML

<body><nav class="main-nav"><ul class="nav-list"><li class="nav-item"><a href="#">首页</a></li><li class="nav-item"><a href="#">归档</a></li><li class="nav-item"><a href="#">关于</a></li></ul><div class="nav-toggle">☰</div></nav><main class="content-area"><article class="blog-post"><header><h1>Flex布局深度解析</h1><time datetime="2024-03-01">2024年3月1日</time></header><section class="post-content"><p>Flex布局是现代Web开发的核心技术之一...</p><div class="demo-box"><div class="box"></div><div class="box"></div><div class="box"></div></div></section></article><aside class="sidebar"><div class="card"><h2 class="card__title">最新文章</h2><ul class="post-list"><li>Grid布局入门指南</li><li>CSS动画原理</li></ul></div></aside></main>
</body>

Sass样式实现

SCSS

// variables.scss
$primary-color: #2c3e50;
$secondary-color: #3498db;:root {--primary-color: #{$primary-color};--secondary-color: #{$secondary-color};
}// mixins.scss
@mixin flex-center {display: flex;justify-content: center;align-items: center;
}// main.scss
.main-nav {background: lighten($primary-color, 70%);padding: 1rem;@include flex-center;.nav-list {display: flex;gap: 2rem;@media (max-width: 480px) {display: none;&.active { display: flex; }}}
}.blog-post {background: white;padding: 2rem;border-radius: 8px;box-shadow: 0 2px 6px rgba(0,0,0,0.1);header {border-bottom: 2px solid $secondary-color;margin-bottom: 1.5rem;}
}.demo-box {display: flex;justify-content: space-around;.box {width: 80px;height: 80px;background: $secondary-color;transition: transform 0.3s;&:hover {transform: rotate(15deg);}}
}

三、实现效果展示

  • 桌面端：两栏布局，导航栏水平排列，卡片带有阴影和悬停动效

  • 移动端：导航折叠为汉堡菜单，内容转为单列布局
  • 交互效果：按钮悬停旋转动画，导航栏滑动出现
  • 响应式图片：根据屏幕尺寸加载合适图片

这是移动端效果，用电脑显示而已

四、学习要点总结

  1. 语义化结构：合理使用HTML5标签增强可访问性
  2. 布局系统：Flex处理一维布局，Grid应对二维复杂布局
  3. 响应式策略：移动优先 + 渐进增强
  4. 样式管理：Sass变量/嵌套提升代码可维护性
  5. 动画原则：使用transition实现平滑状态变化
  6. 调试技巧：浏览器开发者工具审查布局

五、扩展阅读推荐

  1. 官方文档：

    • MDN HTML元素参考
    • Sass官方文档
    • CSS Grid规范

  2. 优质文章：

    • 现代CSS解决方案
    • Flex布局完全指南
    • 响应式图片最佳实践

  3. 工具推荐：

    • Autoprefixer自动补全CSS
    • Grid布局生成器
    • Sass在线编译器

建议在Codepen创建项目实际演练。

相关文章：

六十天前端强化训练之第一天到第七天——综合案例：响应式个人博客项目

欢迎来到编程星辰海的博客讲解 目录 前言回顾 HTML5与CSS3基础 一、知识讲解 1. 项目架构设计&#xff08;语义化HTML&#xff09; 2. 响应式布局系统&#xff08;Flex Grid&#xff09; 3. 样式优先级与组件化设计 4. 完整响应式工作流 二、核心代码示例 完整HTML结…...

编程日记 2025/8/30 3:50:01

java数据结构_再谈String_10

目录 字符串常量池 1. 创建对象的思考 2. 字符串常量池&#xff08;StringTable&#xff09; 3. 再谈String对象创建 字符串常量池 1. 创建对象的思考 下面两种创建String对象的方式相同吗&#xff1f; public static void main(String[] args) {String s1 "hello&…...

编程日记 2025/8/22 6:52:53

MCP：重塑AI与数据交互的新标准

MCP&#xff1a;重塑AI与数据交互的新标准 前言 在人工智能领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;的应用日益广泛&#xff0c;但其与外部数据源和工具的集成却一直面临复杂性和碎片化的挑战。 Anthropic提出的MCP&#xff08;Model Context Protocol&…...

编程日记 2025/8/30 3:33:55

Cursor+Claude3.7实现从原型到app开发

最近在X上看到了一些人在用Claude 3.7 Sonnet生成 app原型图的尝试&#xff0c;受到启发&#xff0c;发现这么先生成不同界面的原型图再让Cursor基于原型图开发app会是很好的尝试。尤其是&#xff0c;你也可以不两步直接生成&#xff0c;而是在过程中更可视化地思考你要生产的原…...

编程日记 2025/8/29 8:17:01

洛谷P1334

题目如下 思路&#xff1a; 每次选择最短的两块木板进行合并&#xff0c;直到只剩下一块木板。使用最小堆&#xff08;优先队列&#xff09;来实现这一过程。使用最小堆&#xff1a; 将所有木板的长度放入最小堆&#xff08;优先队列&#xff09; 每次从堆中取出两块最短的木…...

编程日记 2025/8/29 16:07:37

使用wifi连接手机adb进行调试|不使用数据线adb调试手机|找应用错误日志和操作日志

手机在开发者选项里要开启无线调试 在手机设置中查看WiFi的IP地址 设置 -> WLAN -> 已连接的WiFi -> IP地址 使用手机的IP地址连接 adb connect 192.168.1.12:xxxxx 检查连接状态 adb devices 断开特定设备 adb disconnect 192.168.x.x:xxxxx 断开所有设备 …...

编程日记 2025/8/25 16:53:19

大语言模型中温度参数（Temperature）的核心原理

大语言模型中温度参数&#xff08;Temperature&#xff09;的核心原理是通过调整模型输出的概率分布&#xff0c;控制生成结果的随机性和多样性。以下是其原理的详细说明&#xff1a; 一、定义与核心作用 温度参数是生成式模型&#xff08;如GPT系列&#xff09;中的一个超参数…...

编程日记 2025/8/30 3:44:50

【AIGC】通义万相 2.1 与蓝耘智算：共绘 AIGC 未来绚丽蓝图

一、引言 在人工智能技术迅猛发展的今天&#xff0c;AIGC&#xff08;生成式人工智能内容生成&#xff09;领域正以惊人的速度改变着我们的生活和工作方式。从艺术创作到影视制作&#xff0c;从广告设计到智能客服&#xff0c;AIGC 技术的应用越来越广泛。通义万相 2.1 作为一…...

编程日记 2025/8/29 16:49:58

在Ubuntu上搭建Samba服务，实现与windows之间的文件共享

1.安装samba 首先切换为root账户&#xff0c;就是带#符号的表示当前登录的是root超级用户&#xff1b; su - 如果忘记密码&#xff0c;就输入以下命令修改密码 sudo passwd root 再切换为超级用户 然后进行更新软件列表 sudo apt update sudo apt install samba安装 whe…...

编程日记 2025/8/30 3:35:10

Labview培训案例3： 输出正弦波并采集显示

本案例介绍如何从板卡&#xff08;USB6008&#xff09;的模拟量输出端口输出一个正弦波&#xff0c;然后模拟量输入模块进行采样&#xff0c;然后显示到vi画面的‘波形图’中。 详细代码在&#xff1a;Labview课程3&#xff1a;正弦波输出&采集数据&显示资源-CSDN文库 …...

编程日记 2025/8/30 3:37:29

使用 Deepseek + kimi 快速生成PPT

前言 最近看到好多文章和视频都在说&#xff0c;使用 Deepseek 和 kimi 能快速生成精美的 ppt&#xff0c;毕竟那都是别人说的&#xff0c;只有自己尝试一次才知道结果。 具体操作 第一步&#xff1a;访问 deepseek 我们访问 deepseek &#xff0c;把我们想要输入的内容告诉…...

编程日记 2025/8/19 6:35:15

图解MOE大模型的7个核心问题并探讨DeepSeekMoE的专家机制创新

原文地址:https://newsletter.maartengrootendorst.com/p/a-visual-guide-to-mixture-of-experts #mermaid-svg-FU7YUSIfuXO6EVHa {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-FU7YUSIfuXO6EVHa .error-icon{fill…...

编程日记 2025/8/28 18:00:50

青训营：简易分布式爬虫

一、项目介绍 该项目是一个简易分布式爬虫系统&#xff0c;以分布式思想为基础&#xff0c;通过多节点协作的方式&#xff0c;将大规模的网页抓取任务分解&#xff0c;从而高效、快速地获取网络数据 。 项目地址&#xff1a;https://github.com/yanchengsi/distributed_crawle…...

编程日记 2025/8/29 4:08:13

Scala（Array,List,Set,Map,Tuple,字符串 使用的简单介绍）

目录 Array 不可变数组 ArrayBuffer可变数组 List 不可变列表 ListBuffer 可变列表 Set 集合&#xff08;可变不可变&#xff09; Map映射(可变不可变)(键值对) Tuple 元组 字符串 Array 不可变数组 // Array 数组// scala 中的数组下标是()// scala 中的数组是值…...

编程日记 2025/8/29 5:41:54

fmql之Linux WDT

正点原子第52章。 基础知识 正点原子教程 fmql-dts 代码 APP代码&#xff08;不需要编写驱动代码&#xff09; static int dw_wdt_drv_probe(struct platform_device *pdev) {struct device *dev &pdev->dev;struct watchdog_device *wdd;struct dw_wdt *dw_wdt; …...

编程日记 2025/8/29 6:16:58

IntelliJ IDEA集成MarsCode AI

IntelliJ IDEA集成MarsCode AI IDEA中安装插件 安装完毕之后登录自己的账号 点击链接&#xff0c;注册账号 https://www.marscode.cn/events/s/i5DRGqqo/ 可以选择不同的模型...

编程日记 2025/8/29 12:21:24

python-leetcode-打家劫舍 III

337. 打家劫舍 III - 力扣（LeetCode） 这个问题可以通过动态规划解决。可以通过递归的方式来解决每个房子的最大偷窃金额，递归过程中，我们会记录每个房子是否偷或不偷时能够获得的最大金额。 思路： 对于每个房子，我们有两种选择： 偷这个房子，那么它的直接相邻（父亲和孩…...

编程日记 2025/8/29 23:00:42

数据结构——队列

1. 概念与结构 队列&#xff08;Queue&#xff09;是一种先进先出&#xff08;FIFO, First In First Out&#xff09;的数据结构&#xff0c;即最先被插入队列的数据会最先被删除。队列广泛应用于计算机科学中&#xff0c;特别是在任务调度、缓冲区管理、网络数据传输等领域。…...

编程日记 2025/8/29 9:47:49

GaussianCity：实时生成城市级数字孪生基底的技术突破

在空间智能领域，如何高效、大规模地生成高质量的3D城市模型一直是一个重大挑战。传统方法如NeRF和3D高斯溅射技术（3D-GS）在效率和规模上存在显著瓶颈。GaussianCity通过创新性的技术方案，成功突破了这些限制，为城市级数字孪生的构建提供了全新路径。 一、核心创新：突破传…...

编程日记 2025/8/29 20:08:18

【AGI】智谱开源2025：一场AI技术民主化的革命正在到来

智谱开源2025&#xff1a;一场AI技术民主化的革命正在到来 引言&#xff1a;开源&#xff0c;一场技术平权的革命一、CogView4&#xff1a;中文AI生成的里程碑1. 破解汉字生成的“AI魔咒”2. 开源协议与生态赋能 二、AutoGLM&#xff1a;人机交互的范式跃迁1. 自然语言驱动的跨…...

编程日记 2025/8/28 21:05:39

【算法学习之路】5.贪心算法

贪心算法 前言一.什么是贪心算法二.例题1.合并果子2.跳跳&#xff01;3. 老鼠和奶酪 前言 我会将一些常用的算法以及对应的题单给写完&#xff0c;形成一套完整的算法体系&#xff0c;以及大量的各个难度的题目&#xff0c;目前算法也写了几篇&#xff0c;题单正在更新&#xf…...

编程日记 2025/8/29 7:00:57

C++11中的右值引用和完美转发

C11中的右值引用和完美转发 右值引用 右值引用是 C11 引入的一种新的引用类型&#xff0c;用 && 表示。它主要用于区分左值和右值&#xff0c;并且可以实现移动语义&#xff0c;避免不必要的深拷贝&#xff0c;提高程序的性能。左值通常是可以取地址的表达式&#xf…...

编程日记 2025/8/29 8:34:19

Leetcode 1477. 找两个和为目标值且不重叠的子数组 前缀和+DP

原题链接&#xff1a; Leetcode 1477. 找两个和为目标值且不重叠的子数组 class Solution { public:int minSumOfLengths(vector<int>& arr, int target) {int narr.size();int sum0;int maxnINT_MAX;vector<int> dp(n,maxn);//dp[i]表示以索引i之前的满足要求…...

编程日记 2025/8/30 3:42:29

koa-session设置Cookie后获取不到

在谷歌浏览器中请求获取不到cookie问题之一&#xff08;谷歌安全策略&#xff09; 场景 前端使用 axios 请求&#xff0c;项目地址&#xff1a;http://192.168.8.1:5173 import axios from axiosconst request axios.create({baseURL: http://127.0.0.1:3001/,timeout: 60000,…...

编程日记 2025/8/30 3:37:30

Linux三种网络方式

前言 发现运维啥都得会&#xff0c;这周就遇到了网络问题自己无法解决&#xff0c;因此痛定思痛学一下。 参考文献 你管这破玩意叫网络&#xff1f; 桥接模式、NAT模式、仅主机模式&#xff0c;原来是这样工作的 交换机 构成局域网&#xff0c;实现所有设备之间的通信。 …...

编程日记 2025/8/29 23:24:04

android_viewtracker 原理

一、说明 我们业务中大部分场景是用 RecyclerView 实现的列表&#xff0c;而 View 的曝光通常是直接写在 adapter 的 onBindViewHolder 中&#xff0c;这样就会导致 item 还没显示出来的时候就会触发曝光。最近业务提出需要实现根据 View 显示在屏幕上面积大于 80% 才算曝光。…...

编程日记 2025/8/30 1:04:55

Object.defineProperty()

**Object.defineProperty()** 方法会直接在一个对象上定义一个新属性&#xff0c;或者修改一个对象的现有属性&#xff0c;并返回此对象。 plain const object1 {}; Object.defineProperty(object1, ‘property1’, { value: 42, writable: false }); object1.property1 77…...

编程日记 2025/8/29 13:32:48

大模型+知识图谱：重塑企业制度标准管理

在数字化转型的浪潮中&#xff0c;制度标准管理领域正迎来一场革命性的变革。借助大模型和知识图谱等前沿人工智能技术&#xff0c;制度标准管理不再仅仅是简单的文档存储和检索&#xff0c;而是演变为一个智能化、高效化、精准化的管理体系。 1.关键技术 我们的制度标准管理…...

编程日记 2025/8/30 0:21:25

ubuntu20系统下conda虚拟环境下安装文件存储位置

在 Conda 虚拟环境中执行 pip install 安装软件后&#xff0c;安装的文件会存储在该虚拟环境专属的 site-packages 目录中。具体路径取决于你激活的 Conda 环境路径。以下是定位步骤&#xff1a; 1. 确认 Conda 虚拟环境的安装路径 查看所有环境&#xff1a; conda info --env…...

编程日记 2025/8/30 3:40:00

深度学习编译器（整理某survey）

一、深度学习框架 TensorFlow PyTorch MXNet ONNX:定义了一个统一的表示&#xff0c;DL models的格式方便不同框架之间的转换模型 二、深度学习硬件 通用硬件&#xff08;CPU、GPU&#xff09;&#xff1a;通过硬件和软件优化支持深度学习工作负载 GPU:通过多核架构实现高…...

编程日记 2025/8/28 22:33:57

Python学习第八天

查看函数参数 操作之前给大家讲一个小技巧&#xff1a;如何查看函数的参数&#xff08;因为python的底层源码是C语言并且不是开放的&#xff0c;也一直困扰着刚学习的我&#xff0c;这个参数叫什么名之类的看doc又总是需要翻译挺麻烦的&#xff09;。 比如我们下面要说到的op…...

编程日记 2025/8/29 2:58:01

SpringBoot为什么默认使用CGLIB?

大家好&#xff0c;我是锋哥。今天分享关于【SpringBoot为什么默认使用CGLIB?】面试题。希望对大家有帮助&#xff1b; SpringBoot为什么默认使用CGLIB? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Spring Boot 默认使用 CGLIB&#xff08;Code Generation Li…...

编程日记 2025/8/30 3:42:44

【消息队列】数据库的数据管理

1. 数据库的选择 对于当前实现消息队列这样的一个中间件来说&#xff0c;具体要使用哪个数据库&#xff0c;是需要稍作考虑的&#xff0c;如果直接使用 MySQL 数据库也是能实现正常的功能&#xff0c;但是 MySQL 也是一个客户端服务器程序&#xff0c;也就意味着如果想在其他服…...

编程日记 2025/8/28 5:02:20

pytest中pytest.ini文件的使用

pytest.ini 是 pytest 测试框架的配置文件，它允许你自定义 pytest 的行为。通过在 pytest.ini 中设置各种选项，可以改变测试用例的发现规则、输出格式、插件行为等。以下详细介绍 pytest.ini 文件的使用。 1. 文件位置 pytest.ini 文件通常位于项目的根目录下，pytest 在运…...

编程日记 2025/8/29 1:27:35

docker学习笔记（1）从安装docker到使用Portainer部署容器

docker学习笔记第一课 先交代背景 docker宿主机系统&#xff1a;阿里云ubuntu22.04 开发机系统&#xff1a;win11 docker镜像仓库&#xff1a;阿里云&#xff0c;此阿里云与宿主机系统没有关系&#xff0c;是阿里云提供的一个免费的docker仓库 代码托管平台&#xff1a;github&…...

编程日记 2025/8/29 20:01:40

Vue.js侦听器

侦听器​ 基本示例​ 计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。 在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数： …...

编程日记 2025/8/26 19:42:42

【C++学习篇】智能指针

目录 1. 智能指针的使用场景分析 2. RAII和智能指针的设计思路 3. C标准库智能指针的使用 4.shared_ptr和weak_ptr 4.1shared_ptr的循环引用问题 4.2 weak_ptr 1. 智能指针的使用场景分析 下⾯程序中我们可以看到&#xff0c;new了以后&#xff0c;我们也delete了&#xff0c…...

编程日记 2025/8/29 2:42:58

数字电子技术基础（二十四）——TTL门电路的高、低电平的输出特性曲线

目录 1 TTL门电路的特性曲线 1.1 高电平输出特性 1.1.2 高电平输出特性的实验过程 1.1.2 TTL门电路的输出特性的实验结果 1.2 低电平的输出特性 1 TTL门电路的特性曲线 1.1 高电平输出特性 1.1.2 高电平输出特性的实验过程 现在想要测试TTL门电路的输出特性&#xff0c…...

编程日记 2025/8/29 17:19:49

linux进程通信之共享内存

在 Linux 系统中&#xff0c;共享内存&#xff08;Shared Memory&#xff09; 是一种高效的进程间通信&#xff08;IPC&#xff09;方式&#xff0c;允许多个进程直接访问同一块物理内存区域。以下是关于 Linux 共享内存的详细讲解&#xff1a; 一、共享内存的核心特点 高速通信…...

编程日记 2025/8/28 16:36:05

学习第十一天-树

一、树的基础概念 1. 定义 树是一种非线性数据结构&#xff0c;由 n 个有限节点组成层次关系集合。特点&#xff1a; 有且仅有一个根节点其余节点分为若干互不相交的子树节点间通过父子关系连接 2. 关键术语 术语定义节点包含数据和子节点引用的单元根节点树的起始节点&#…...

编程日记 2025/8/28 0:34:38

场景题：10亿QQ用户，如何统计在线人数？

现在卷的环境下&#xff0c;面试除了八股文算法项目外&#xff0c;场景题也是问的越来越多了。一方面是就业市场竞争者较多所带来的必然结果&#xff1b;另一方面是公司对于应聘者的技术要求也越来越高了。 今天继续介绍Java面试常见的场景题&#xff1a;在线人数统计 现在用户…...

编程日记 2025/8/29 11:38:35

学习工具的一天之（burp）

第一呢一定是先下载 【Java环境】&#xff1a;Java Downloads | Oracle 下来是burp的下载 Download Burp Suite Community Edition - PortSwigger 【下载方法二】关注的一个博主 【BurpSuite 安装激活使用详细上手教程 web安全测试工具】https://www.bilibili.com/video/BV…...

编程日记 2025/8/29 3:17:50

归并排序：分治哲学的完美演绎与时空平衡的艺术

引言&#xff1a;跨越世纪的算法明珠 在计算机科学的璀璨星河中&#xff0c;归并排序犹如一颗恒久闪耀的明星。1945年&#xff0c;现代计算机之父冯诺伊曼在EDVAC计算机的研发过程中首次系统性地提出了这一算法&#xff0c;其精妙的分治思想不仅奠定了现代排序算法的理论基础&…...

编程日记 2025/8/28 1:43:56

蓝桥杯4T平台（串口打印电压值）

知识点&#xff1a;串口(单片机发送数据)按键ADC 题目 配置 代码 adc.c uint16_t getadc2(void) {uint16_t adc0;HAL_ADC_Start(&hadc2);adcHAL_ADC_GetValue(&hadc2);return adc; } adc.h uint16_t getadc2(void); main.c #include "lcd.h" #include…...

编程日记 2025/8/28 10:23:37

Stable Diffusion Prompt编写规范详解

Stable Diffusion Prompt编写规范详解 一、语法结构规范 &#xff08;一&#xff09;基础模板框架 [质量强化] [主体特征] [环境氛围] [风格控制] [镜头参数]质量强化&#xff1a;best quality, ultra detailed, 8k resolution‌主体特征&#xff1a;(1girl:1.3), long …...

编程日记 2025/8/20 8:39:39

es6常见知识点

官方文档&#xff1a;[https://es6.ruanyifeng.com/](https://es6.ruanyifeng.com/) 一、Class 1、Class Class只是一个语法糖,其功能用es5也能实现,但是比es5更符合类的期待 定义: constructor代表构造方法,而this指向new 生成的实例 定义类方法时,可以不使用function 注…...

编程日记 2025/8/27 12:28:19

leetcode1 两数之和 哈希表

什么时候使用哈希法&#xff0c;当我们需要查询一个元素是否出现过&#xff0c;或者一个元素是否在集合里的时候&#xff0c;就要第一时间想到哈希法。 242. 有效的字母异位词 (opens new window)这道题目是用数组作为哈希表来解决哈希问题&#xff0c;349. 两个数组的交集 (o…...

编程日记 2025/8/29 18:37:31

Java中lombok的@Data注解【布尔类型】字段定义方式

文章目录 背景第一步、场景复现第二步、分析问题第三步、实现方案总结 背景 在Data注解的bean中添加Boolean字段时&#xff0c;set方法正常&#xff0c;get方法无法获取。 第一步、场景复现 在OrderInfo的实体中&#xff0c;新增布尔类型的字段&#xff1a;支付过【hasPaid】…...

编程日记 2025/8/29 1:00:17

理解数学概念——稠密性(density)

目录 1. 定义 2. 等价定义 3. 直观理解 1. 定义 在拓扑学(topology)和数学相关领域中&#xff0c;对于一个拓扑空间 X 的一个子集 A&#xff0c;若 X的每一个点要么属于A &#xff0c;要么无限“接近”X的某个成员&#xff0c;则称这个子集 A 是稠密的(dense)或称A具有稠密性…...

编程日记 2025/8/28 20:55:17

【Spring AOP】_切点类的切点表达式

目录 1. 根据方法签名匹配编写切点表达式 1.1 具体语法 1.2 通配符表达规范 2. 根据注解匹配编写切点表达式 2.1 实现步骤 2.2 元注解及其常用取值含义 2.3 使用自定义注解 2.3.1 编写自定义注解MyAspect 2.3.2 编写切面类MyAspectDemo 2.3.3 编写测试类及测试方法 在…...

编程日记 2025/8/28 21:43:28