前端校内实训 2D转换 课堂笔记

vsoperator vsoperator 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 100+累计阅读 136平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄7年
关注
原创 最新推荐文章于 2026-11-09 20:43:22 发布 136 阅读 AI 写同款· GEO 优化 ›
软件工程毕业设计选题指南：50个实战项目与四维评估法 毕业设计是软件工程专业学生将理论知识转化为工程实践能力的关键环节。其核心在于通过一个完整的项目周期，系统性地应用软件工程方法，解决实际问题。从技术原理上看，一个成功的项目通常需要平衡创新性、可行性、实用性与技术深度，这构成了项目评估的基本框架。在技术价值层面，毕业设计不仅是学术成果，更是求职时展示技术栈掌握度、系统设计能力和解决问题思维的硬核凭证。当前，结合人工智能、物联网、微服务架构等前沿技术的项目，更能体现技术敏感性与工程实践的结合。应用场景广泛，从经典的电商平台、管理系统，到新兴的智能识别、数据推荐系 阅读详情

transform
transition
rotate
transformX
transformY

标签
#css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CSS 弹性盒布局：flex-wrap 换行与多行交叉轴对齐 默认情况下，弹性容器（flex container）会把所有子项（flex item）挤在一行里，哪怕空间不够也只会压缩子项，而不会换行。浏览器会依次把子项放进当前行，当剩余空间不足以容纳下一个子项的基础尺寸时，就开启新的一行。一旦允许换行，容器里就会出现多条「弹性行（flex line）」，此时交叉轴对齐的行为也会从「单行对齐」变成「多行对齐」，是默认值：当子项没有设置固定高度时，行会被拉伸，子项随之变高，看起来像是「撑满了容器」。上面这段代码中，每个子项固定 200px 宽，容器宽度决定每行能放几个。 阅读详情

相关推荐

python爬取淘宝数据

python爬取淘宝数据淘宝评论 淘宝评论 打开淘宝，选择打开需要爬取的商品的评论。在谷歌浏览器选择开发者工具，选择network，找到list_detail_rate.htm?itemId=624466733121，点击headers、previews，可以看见相应的评论数据。 爬取一页屏评论代码如下 import re import requests headers = { 'Referer': '在headers中', 'User-Agent': '在

qq_36333776的博客 5797

一次前端实习笔试后感想

在学习CSS、HTML、JS的同时也要学习C、C++、算法、数据结构等。

江湖见 1775

告别U盘！在Ubuntu 22.04上从零搭建PXE网络装机服务器（支持UEFI/Legacy双启动）

本文详细介绍了在Ubuntu 22.04上搭建PXE网络装机服务器的完整流程，支持UEFI/Legacy双启动模式。通过配置DHCP、TFTP和HTTP服务，实现无需U盘的高效批量系统部署，解决传统安装方式的介质依赖、版本控制和时间成本问题，显著提升机房维护和设备部署效率。

weixin_42569329的博客 248

分享几个前端实习or全职求职网站

1. 看准网-查工资|聊面试|评公司|搜职位|中国领先的职场信息平台              http://www.kanzhun.com/           经常用这个网站查询公司，能得到一些关于公司的评价和福利情况。     2. 大街网_年轻人专属的社交招聘平台！           http://www.dajie.com         大街网经常会推送

无媛无故 4327

AFSim 2.9实战指南：从入门到精通的中文教程

本文是AFSim 2.9的实战中文教程，旨在帮助用户从零开始掌握这一先进的仿真框架。内容涵盖从环境安装、运行第一个“Hello World”仿真，到深入理解实体、组件、想定编辑器等核心概念，并进阶探讨动力学建模、传感器仿真与红蓝对抗想定构建。最后，指南还提供了效能分析与实战排错技巧，帮助用户将仿真结果转化为有价值的量化数据，适用于军事、航空航天等领域的复杂系统行为模拟研究。

weixin_29294395的博客 355

Doris StreamLoad任务报错Connection reset

背景 Spark程序扫一张Hive表（大小3-7G），然后用http协议的streamLoad任务提交给Doris集群，在Doris集群从0.13.15升级到0.14.12后spark程序报错streamLoad时突然会Connection reset 分析 enable_http_server_v2 这个参数可以参考FE中文配置中查看到，作用是对于Doris界面是否开启新风格的界面，但是实际上他的作用远不止如此，请接着看 新老版本对于enable_http_server_v2参数默认值是不同的 在0.13

gaofeng的博客 3307

CSS 盒子模型与背景渐变、文字渐变实战

content（内容区）：文字、图片等实际内容占据的区域padding（内边距）：内容与边框之间的空白border（边框）：盒子的边界margin（外边距）：盒子与其他盒子之间的间距fill:#333;important;important;fill:none;color:#333;color:#333;important;fill:none;fill:#333;height:1em;margin 外边距border 边框padding 内边距content 内容区。

2601_96876853的博客 238

别再盲调PID了！手把手教你用VOFA+实时可视化电机速度曲线（附STM32F4源码）

本文详细介绍了如何使用VOFA+工具实现PID参数的可视化调试，帮助开发者从盲调转向精准调优。通过实时可视化电机速度曲线，结合STM32F4源码示例，展示了如何高效调试Kp、Ki、Kd参数，解决响应慢、超调等常见问题，大幅提升电机控制系统的性能。

weixin_28366475的博客 128

CSS 弹性盒布局：子项目 flex 伸缩与 gap 间隙详解

flex-grow决定剩余空间如何分配，决定空间不足时如何压缩，flex-basis决定伸缩基准；日常优先使用flex简写，理解flex: 1与flex: auto的差异；项目间距优先使用gap，避免margin带来的首尾处理问题；注意与这两个高频细节。

2601_96876853的博客 323

游戏战斗系统架构设计的演绎之路——从一坨意大利面条到一座精密钟表

摘要：游戏战斗系统架构设计的演进之路 本文系统梳理了游戏战斗系统从早期街机到现代3A大作的架构发展历程。70-80年代的街机游戏采用基础碰撞盒判定（如《街头霸王》）；90年代实现动画融合与状态机架构（《最终幻想》《拳皇》）；2000年后MMO引入服务器验证与同步技术（《魔兽世界》）；3D时代融合物理引擎与智能AI（《GTA5》《只狼》）；移动端则发展出轻量化架构与云端判定（《王者荣耀》）。现代战斗系统已实现模块化、数据驱动和热更新，未来趋势是AI裁判与云战斗系统。这一演进过程展现了技术与创意的完美结合，数百

本博客聚焦游戏开发技巧、创业实战心得及大学热门课程干货。这里既有技术深度，也有思维广度，无论你是开发者、创业者还是高校学子，都能在这里找到适合自己的成长之路！ 800

Spring AI Alibaba实战训练营-16 NL2SQL （自然语言转 SQL）应用开发指南

本文介绍了一个基于AI的智能BI应用开发项目，主要实现自然语言转SQL(NL2SQL)功能，包含对话模块、MCP模块、向量数据管理模块。项目采用Spring AI Alibaba框架，集成通义千问大模型，支持内存向量库和AnalyticDB向量数据库两种存储方案。重点展示了chat模块的三个控制器实现：AnalyticNl2SqlController用于生产环境，SimpleChatController适用于开发测试，Nl2sqlForGraphController支持基于图的复杂对话流程。系统通过将业务知

program哲学 1585

CSS 定位布局：相对定位与绝对定位详解

父元素 relative + 子元素 absolute」是 CSS 中最常用的定位组合，几乎所有的角标、下拉菜单、tooltip 都基于它实现。它决定了元素在页面中的定位方式，也是实现悬浮按钮、下拉菜单、遮罩层、角标等常见 UI 效果的核心手段。的偏移只是视觉位移，不会改变元素在文档流中的占位，因此不会引起其他元素重排。在视觉上向右移动 30px、向下移动 20px，但它原本占据的空间依然保留，后面的元素不会补上来。再大也无法跳出父元素的层级。，不再占据原来的空间，其他元素会像它不存在一样重新排列。

2601_96876853的博客 240

干货｜C#上位机与西门子PLC的Profinet协议通信开发（工控机版）

文章摘要： Profinet是西门子主导的工业以太网协议，支持实时通信（RT/IRT），广泛应用于PLC与工控机通信。本文聚焦C#上位机通过S7协议（集成于Profinet接口）高效访问西门子PLC（S7-1200/1500等），提供完整开发方案： 协议基础：解析Profinet三层架构（TCP/IP层、实时层、应用层），对比S7协议优势（开发便捷、跨平台）； 开发实践：基于S7NetPlus/Snap7库实现数据读写，涵盖DB块、I/O点等地址规则； 环境配置：工控机（Windows/Linux/统信UO

这里只有干货：从 Modbus 通信到 MES 对接，从 YOLO 训练到工控机部署，带你搞定工业软件开发全流程。 1213

CSS 三种引入方式与选择器全解

div p。

2401_89953644的博客 224

android 蓝牙通讯demo

android 下蓝牙通讯demo，实现了发现蓝牙，使能蓝牙，通过蓝牙发送消息。

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

CSS2DObject 名称标签最小示例

在三维场景中实现随模型移动的名称标签，纯 DOM + CSS2DObject 方案兼具低实现成本、高样式与交互灵活性及良好性能。通过 document.createElement 组装带图标和文字的标签，利用 CSS2DObject 挂载并跟随模型，配合命名约定与 removeLabel 精准管理生命周期，支持点击、悬停、省略号等原生行为，避免内存泄漏，是中等规模标签场景的理想选择。

weixin_44242600的博客 283

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

CSS 仿写页面

拿到设计稿先别写代码。这篇文章先讲「怎么把一张图拆成 DOM 结构」，再把颜色表示、五种尺寸单位、background的六个子属性、文字排版属性逐个落地，最后说明opacity和rgba到底差在哪。

2401_89953644的博客 195

css注意事项一

button {}踩坑场景：你写的分页按钮 hover 变色不生效，大概率是别的选择器优先级更高，把你的样式覆盖了。规避：不要随便写!important，实在要提升优先级，叠加 class，比如。不要东写一条宽、下面突然写颜色、再回头写 padding，乱序后期改样式头大。

2603_96589670的博客 419

CSS 元素类型、盒模型与 Flex 布局

想让单独设置的某条边生效，必须写在通用。

2401_89953644的博客 596

使用HTML+CSS+JavaScript实现文件上传弹窗

使用HTML+CSS+JavaScript实现文件上传弹窗

bjzhang75的博客 196

HTML与CSS基础第九课—HTML的列表

ul是没有顺序的一组：顺序换一换，意思不变，例如一门课会用到的几样东西。ol是有顺序的一组：步骤、名次、操作先后。选哪一个，先问「把两条对调，意思变不变」。li是其中一条，必须放在ul或ol里面。ul和ol的直接子内容就是这些li。ulol他们的子元素一定是li。li中，也可以包裹一组列表。但是必须放在li内部。某一条下面还可以再套一层列表。内层的ul或ol写在那一条li里面，不要写在li的外面、和别的li平级。示例里「这一项先不学」属于「JavaScript」这一条，所以套在它的li里。内层用ul。

专注大前端领域，持续分享React、Vue、React-Native、Flutter、跨端等领域内容 202

【CSS实战范例】悬停炫光

这同时解决了「两端提前露头」：扫光层必须比图形大，否则光带两端会在图形内部被裁断，看起来像扫到一半就断了。，方向才会严格是 45°。这也是扫光层必须做成正方形的第二个原因——不只是为了覆盖，更是为了方向。扫光层直接不渲染，外发光也去掉，只留 8% 的亮度变化——反馈还在，但没有任何位移。后，光带推进到两端时正方形的四条边都还在字形之外，两种宽高比实测都没有截断。把「发光」和「扫光」分给两个不同元素，是后面很多问题的解法，第八节会展开。光带是跨越整个扫光层的一条斜带，所以扫光层在这个方向上的跨度必须不小于。

朝阳39的博客 313

CSS 背景复合写法与视差滚动实战

视差滚动（Parallax Scrolling）指的是：页面滚动时，背景的移动速度与前景内容不同，从而产生纵深感。注意背景色只能写在最后一层，且多背景层时建议每层单独换行，便于阅读。属性既支持拆分成多个子属性单独设置，也支持用一行复合写法一次性声明。掌握这行写法，再注意移动端降级与性能控制，就能在大多数项目中稳定使用视差滚动效果。在网页视觉设计中，背景往往是最容易被忽视、却最能拉开质感差距的一环。复合写法的语法讲起，逐步过渡到视差滚动的实现原理与完整案例。，就能用极少的代码实现经典的视差滚动效果。

2601_96876853的博客 498

CSS 弹性盒布局：改变主轴方向 flex-direction

默认情况下，主轴是水平方向，项目从左到右排列。用于指定弹性容器（flex container）中主轴的方向，从而决定弹性项目的排列方向。是 Flexbox 中最基础也最常用的属性之一，理解它对于掌握弹性布局至关重要。主轴变为垂直方向，项目从上到下排列。理解主轴与交叉轴的关系，是灵活运用 Flexbox 的基础。主轴仍为水平方向，但项目从右到左排列，起始位置在右侧。是默认值，主轴为水平方向，项目从左到右依次排列。主轴为垂直方向，项目从下到上排列。，即可看到项目排列方向的变化。/* 修改这里观察效果 */

2601_96876853的博客 459

CSS 盒子模型尺寸计算与 box-sizing 详解

box-sizing决定了widthheight只算内容区，border-box算到边框外沿。理解两者的换算关系，就能准确预测元素的实际占位，避免布局溢出与对齐错位。实践中推荐全局设置，让尺寸声明与视觉结果保持一致。

2601_96876853的博客 311

【前端】CSS

举例设置颜色用style，可以写在body，也可以写在head里面写head清晰一点mdn文档三种方式推荐使用外置文件方式，外置需要用linkstyle下年写的那个p就是要设置的东西对应的标签css不分大小写，统一用小写冒号后面带空格p，也就是那个标签，叫选择器，和后面大括号之间带一个空格。

哦虎！的博客 49

CSS display 模式转换详解

display属性是 CSS 布局的基石。掌握blockinlineflexgrid等常见取值，并理解它们之间的转换规则，能够帮助我们更灵活地控制页面结构。在实际开发中，建议优先使用flex和grid完成布局，仅在必要时才通过display转换处理细节问题。

2601_96876853的博客 336
上一篇： 前端实训课程 HTML5 课堂笔记
下一篇： 法门001
点赞 0
评论 0
书签 书签 0
vsoperator
vsoperator
博客等级 码龄7年 2粉丝 5原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值