前端开发 Html/Css
刷新
js案例

博主头像 登录的练习 点击事件和键盘事件 获取输入框的内容，判断用户名和密码是否正确 不管有没有登录成功，都会将输入框里面的内容清空 回车和点击登录都能实现登录 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta na ...

flex布局

博主头像 flex简介 任何一个容器指定为flex布局 实现条件：至少有后代关系的 弹性布局 特点：2根主轴线 主轴，默认从左到右(水平) 交叉轴：默认从上到下(垂直) 父元素(开启弹性布局)，子元素就是在里面灵活的布局 父元素常用的属性 display display有很多的值，设置flex布局 none, ...

MonkeyCode新手入门：从注册到写出第一个完整项目

博主头像 MonkeyCode新手入门：从注册到写出第一个完整项目 很多人问我："MonkeyCode怎么上手？有没有入门教程？" 网上教程不少，但大多是功能介绍，看完还是不知道怎么动手。 这篇文章，我带你从零开始，用MonkeyCode完成一个能跑的完整项目——一个待办事项管理应用（Todo App）。 第 ...

css盒子模型和定位

博主头像 元素的溢出 就是子元素的尺寸大于父元素的尺寸 蓝色盖在这个红色上，子元素的超出了这个宽度 这个就是元素的溢出 如何解决了元素溢出呢？给父元素设置一个overflow，hidden 值，隐藏溢出的内容， .box1 { width: 100px; height: 200px; background-c ...

css属性

博主头像 字体属性 字体大小(font-size) p { font-zie: 14px } 可以设置字体的大小 px：像素，稳定和准确 %：把font-size设置为基于父元素的一个百分比值 字体粗细(font-weight) 设置字体的粗细不需要添加单位 # normal,bold,bolde三个常用选项 ...

html笔记

博主头像 html简介 html是一个网页的主体部分，也是一个网页的基础，因为一个网页可以没有样式，可以没有交互，但是必须要用网页需要呈现的内容，所以html部分是整个前端的基础 html是超文本标记语言，一种用于创建网页的标记语言 html标签 html是一个标记语言，通过各种各样的标签来标记网页内容的 什 ...

Markdown锚点跳转失败的解决办法

博主头像 Markdown 标题含特殊字符时，自动生成的锚点 ID 可能与目录链接不一致，用 <a> 标签手动定义锚点即可解决。 目录 前情提要 分析问题 解决方法 效果 前情提要 在浏览我前几天的一篇博文《Claude Code 终端高效使用指南》时，发现从目录链接无法跳转到标题 "五、快速前缀：/ ! @ ...

宇宙画布：纯 CSS+JS 实现交互式深空艺术

博主头像 ‍ 写在开头 点赞 + 收藏 学会 大家好，我是前端开发者。在前端技术不断发展的今天，CSS 早已不只是用来布局和美化页面的工具，它还能成为我们创作视觉艺术的画笔。今天给大家带来一个纯 CSS + 原生 JS 实现的交互式深空场景，无需任何图形库，就能在浏览器里呈现出繁星闪烁、星 ...

CSS终于支持渐变色的过渡了

博主头像 ‍ 写在开头 点赞 + 收藏 学会 背景 在做项目时，总会遇到UI给出渐变色的卡片或者按钮，但在做高亮的时候，由于没有过渡，显得尤为生硬。 过去的解决方案 在过去，我们如果要实现渐变色的过渡，通常会使用如下几种方法： 添加遮罩层，通过改变遮罩层的透明度做出淡入淡出的效果，实现过渡 ...

用 Intersection Observer 打造丝滑的级联滚动动画

博主头像 ‍ 写在开头 点赞 + 收藏 学会 无需任何动画库，仅用原生 Web API 实现滚动时丝滑的淡入滑入效果，兼顾性能与体验。 你是否见过这样的交互动效： 用户滚动页面时，一组卡片像被“唤醒”一样，依次从下方滑入并淡入； 如果这些元素在页面加载时已在视口内，它们也会自动按顺序浮现。 ...

前端大屏适配方案：rem、vw/vh、scale 到底选哪个？

博主头像 ‍ 写在开头 点赞 + 收藏 学会 上周帮朋友救火一个数据大屏项目，甲方临时说要从 1920×1080 的投影换成 3840×1080 的超宽拼接屏。朋友用的是 transform: scale 方案，结果两边各留了一大片黑边，甲方当场黑脸。 这事儿让我决定把大屏适配这个"老生常 ...

前端实现进度条

博主头像 ‍ 写在开头 点赞 + 收藏 学会 后端处理数据处理逻辑特别多的时候，并不会很及时返回数据，一般情况后端给前端返回进度，这个目前是前端自己返回进度到90，等到接口返回完成再到100% 1、设置全局样式 <div class="loading-overlay" v-show="Pa ...