css

程序员大阳7 小时前
javascript·css·html·实战·删除·查询·新增
HTML+CSS+JS对话式实战(3)-活动管理页实现查询、新增、删除API后端接口点此查看 所有教程、项目、源码导航副队:毛哥,咱们项目中JS、CSS文件不多,就不单独建文件夹了,全部和html放在同一级目录。另外有一个关键点,通用的post请求函数,属于整个项目公用代码,可以抽取到通用的JS文件中。 毛哥:哦,我懂了!如果以后还有学生页面,也需要发请求,那还得再复制一遍这个函数,就重复了对吧? 副队:对的,咱们单独新建一个 common.js 放通用请求方法,所有页面都可以引入它。咱们开发顺序调整为:先实现查询活动列表、再实现新增活动、最后实现删除活动,页面打开优先展示已有活动列表,
ZhengEnCi1 天前
前端·css·交互设计
12 种高级 UI 交互效果及对应 AI 提示词:从按压回弹到底部抽屉的物理感教学核心结论:高级 UI 交互和普通交互的差别,本质是「有没有物理感」——高级交互模拟真实世界的力学(回弹、弹性、摩擦、惯性),普通交互只是「机械地变一下」。你让 AI 做按钮,说「加个动效」,它只会给个普通缩放;但如果你说出具体的交互名称(按压回弹、弹性开关、波纹跟随手指、液态滑块、卡片堆叠…),AI 就能精准还原。本文拆解 12 种高级交互的视觉特征 + 一句话 AI 提示词,并配一段可直接运行的 demo。本专栏在UI设计进阶技巧-让界面更高级的7个核心原则里讲过整体设计原则,本文聚焦交互动效这个细分维
ZhengEnCi1 天前
css·设计
为什么苹果的圆角更高级:连续曲率圆角 Squircle 从超椭圆到 CSS 实现的完全讲解核心结论:你让 AI 做卡片、把圆角数值调到和苹果一致,看着却还是「更硬」,毛病出在直线拐进圆弧的那个接口——普通圆角是「直线直接接上 1/4 圆弧」,在接口处曲率从 0 瞬间跳到最大,像开车进弯时方向盘一下打死;而苹果用的是连续曲率圆角(squircle),从直线开始一点点弯进去、过弯心再慢慢回正,全程曲率平滑过渡,视觉上柔和得多。这个形状的数学本质是超椭圆(superellipse),公式 ∣x/a∣n+∣y/b∣n=1|x/a|^n + |y/b|^n = 1 ∣x/a∣n+∣y/b∣n=1,其中
用户3434612783202 天前
css
用户认证系统在高并发下的幂等性与限流策略踩坑实录引言 在互联网行业,用户认证与权限管理是几乎所有系统的标配模块,也是最容易被忽视的“隐形杀手”。笔者曾在一次大型促销活动中,因未充分考虑高并发场景下的幂等性和限流设计,导致认证服务崩溃、用户无法登录、权限校验失效等问题。此次事故直接引发业务中断和大量用户投诉。通过复盘与重构,我们不仅修复了系统,还总结出一套适用于实际生产环境的解决方案。本文将以用户认证与权限管理为切入点,结合真实项目经验,探讨如何在高并发、高可用场景下合理设计幂等性与限流降级策略。
啾咪orJIUMI3 天前
css
Vue 3 + SCSS 实现全屏系统门户:五栏展开与灯光联动技术栈:Vue 3 + SCSS + Vite最近在实现一个全屏系统门户页面:五个业务模块横向铺满屏幕,鼠标移入某个模块后,模块展开、背景高亮、子模块上滑出现,同时边缘灯光会向相邻模块延伸。
程序员大阳3 天前
javascript·css·html·实战·系统·平台·社团活动发布
HTML+CSS+JS对话式实战(1)-开篇:认识我们要做的社团活动发布平台点此查看 所有教程、项目、源码导航刚刚写完4个系列的教程如下:《副队长HTML教程(完结)》 《副队长CSS教程(完结)》 《副队长HTML+CSS实战(完结)》 《副队长JS教程(完结)》
志尊宝4 天前
前端·css·ai-native
AI原生前端开发(043):AI辅助的样式生成(Tailwind CSS)Tailwind CSS是流行的原子化CSS框架!AI可以帮我们快速生成优美的Tailwind样式!这一篇我们学习了:
java1234_小锋5 天前
前端·css·css3
【技术专题】CSS3 网页技术 - CSS3 布局进阶大家好,我是Java1234_小锋老师,最近更新 《一天学会 CSS3 视频教程(无废话版) 》专辑,感谢大家支持。
java1234_小锋5 天前
前端·css·css3
【技术专题】CSS3 网页技术 - CSS3 视觉增强大家好,我是Java1234_小锋老师,最近更新 《一天学会 CSS3 视频教程(无废话版) 》专辑,感谢大家支持。
晓得迷路了5 天前
前端·javascript·css
栗子前端技术周刊第 152 期 - Rspack 2.3、TypeScript 7.1 Beta、Bun 1.4.4...🌰栗子前端技术周刊第 152 期 (2026.10.26 - 2026.11.01):浏览前端一周最新消息,学习国内外优秀文章,让我们保持对前端的好奇心。
普通人65 天前
开发语言·前端·css·1024程序员节
CSS-box-sizing-使用指南摘要:box-sizing 是 CSS 里最"小"却最容易引发布局事故的属性之一。本文从盒模型讲起,用数据和代码对比 content-box 与 border-box 的差异,给出可直接复制的全局重置方案,并梳理 8 个实战踩坑点。读完你能回答:为什么我设了 width: 100% 还溢出?为什么全局重置要写 inherit?
前端架构师-老李5 天前
前端·css·html
HTML与CSS基础第七课—HTML 中的a标签(跳转链接)四个 a,点开的结果各不一样。把下面存成 index.html,用浏览器打开。页面要能往下滚,第四个链接的效果才看得出来。
溪语流沙6 天前
前端·css·html5·每日一练·按钮
【每天一个CSS | Day41】开关三连:一套状态机,三种视觉翻译今天的组件,是表单里最小、最多变、也最容易被随便做的一件:开关。浏览器默认的<input type="checkbox">是一个带阴影的方框加一个对勾,放在任何设计过的界面里都很违和。所有产品都会重新做开关,但做出来的开关千篇一律:iOS 式胶囊、带文字的状态开关、带图标的多档开关。
变与不变8066 天前
前端·css
css定位布局精讲定位核心作用:手动控制盒子在页面上的位置,脱离正常文档流,搭配 top / right / bottom / left 偏移属性
前端架构师-老李7 天前
前端·css·html
HTML与CSS基础第五课—HTML的空格、换行、横线相关知识从代码中,我们可以看到,HTML针对空格、回车、换行,都有自己的一套处理方式。浏览器读正文时,会把源码里连续的空格、制表和回车收成一个普通空格。所以多按几下空格,页面上不会空出一截;多按几次回车,也不会多出一段。
echome8887 天前
前端·css·html
CSS 布局:Flex 和 Grid 怎么选,附常见坑# CSS 布局:Flex 和 Grid 怎么选,附常见坑做前端布局时,最常纠结的问题不是“怎么写”,而是“该用 Flex 还是 Grid”。一句话先说结论:**一维布局用 Flex,二维布局用 Grid**。一维指只沿一个方向排:横着一排或竖着一列;二维指行和列都要同时控制,比如整体页面骨架、卡片墙。
东鹏特饮7 天前
运维·css·html·css3
本机状态监控页面html一个单文件、零依赖、零网络请求的本机状态监控页面。用纯 HTML(内联 CSS + JS)实现,双击即可在任意现代浏览器打开运行。定位是"浏览器可见指标"的实时看板,不伪造系统数据,对不支持的 API 做明确降级提示。
蓝莓味的口香糖8 天前
前端·css·vue.js
【VUE】【CSS】Vue移动端适配主流方案总结优先推荐:vw 方案(postcss-px-to-viewport),无 JS、现在新项目首选;老项目/兼容很低端机型选 rem + amfe-flexible;布局层面配合 flex / grid + 媒体查询,不要只靠单位缩放。
是立不是利8 天前
前端·css
CSS 的 Flex 布局——为什么元素没有按我想的排列引言 Flex 布局是现代 CSS 最常用的布局方式,几乎每个页面都离不开它。但很多人用的时候是"试出来的":改一个属性看看效果,不对再换一个。这种用法在简单场景能凑合,一旦布局复杂就容易失控。问题在于没理解 Flex 的几个核心概念。这篇文章只讲 Flex 布局,把它讲清楚。
java1234_小锋9 天前
前端·css·css3
【技术专题】CSS3 网页技术 - CSS3 盒模型大家好,我是Java1234_小锋老师,最近更新 《一天学会 CSS3 视频教程(无废话版) 》专辑,感谢大家支持。