很多前端开发者在用 CSS Modules 写样式时，习惯用 :global 去覆盖 Ant Design 组件的默认样式，但经常发现怎么写都不生效。这通常不是 :global 本身有问题，而是和样式加载顺序、选择器权重、打包后的类名结构有关。Antd 组件样式一般通过引入 antd/dist/reset.css 或组件按...

栏目：HTML/CSS 时间：07-27 antd :global CSS_Modules

很多前端开发者在做表单交互时都想用纯CSS实现好看的切换开关，不依赖JavaScript。利用checkbox的checked状态和伪元素就能做出自定义toggle效果。本文讲清楚怎么用label包住input，通过隐藏原生输入框，用span或label的before after画轨道和滑块，再配合相邻兄弟选择器控制开关...

栏目：HTML/CSS 时间：07-27 css toggle_switch 伪元素

很多前端开发者在使用TailwindCSS时，发现默认工具类里并没有直接提供文本阴影的实用类。其实TailwindCSS本身更关注布局与排版，文本阴影属于较细的样式需求。我们可以通过自定义配置、使用任意值语法或者借助插件来达成目的。本文会介绍几种在项目中用TailwindCSS添加文字...

栏目：HTML/CSS 时间：07-27 TailwindCSS 文本阴影 text-shadow

很多刚接触前端开发的朋友都会疑惑，写好的js文件要怎么用html运行。其实在网页里使用js文件非常常见，主要通过script标签引入外部js文件，或者把代码直接写在html里面。了解正确的引入方式，可以避免路径错误和加载顺序问题。本文会讲解用html运行js文件的几种实用方法，包括外部...

栏目：HTML/CSS 时间：07-27 JavaScript HTML script_tag

在Linux环境下开发前端页面时，经常需要启动一个本地服务器来预览HTML文件。每次都输入python3 -m http.server或者npx serve这类命令既繁琐又容易记错端口参数。其实我们可以利用bash的alias功能，把长命令简化成几个字母的快捷指令。只需要在用户主目录的.bashrc或者.zshrc...

栏目：HTML/CSS 时间：07-27 Linux bash_alias HTML_local_server

很多前端新手在做网站时都想让导航条看起来更生动，却又不想写复杂的JavaScript。其实只用纯CSS就能做出实用的特效导航条。本文介绍如何利用CSS的hover伪类、过渡属性和背景变化，实现鼠标悬停时文字变色、下划线滑动以及背景高亮等效果。你只需要掌握基础的选择器和transit...

栏目：HTML/CSS 时间：07-27 css 导航条 hover特效

很多前端开发者在拿到设计稿后，常困惑于进度条该怎么实现才既贴合视觉又性能好。本文围绕设计稿指引下的前端进度条实现，介绍基于HTML结构和CSS过渡动画的基础方案，说明如何用语义化标签搭建轨道与填充层，并通过transition控制平滑过渡。同时补充JavaScript动态更新进度的常...

栏目：HTML/CSS 时间：07-27 progress_bar 前端动画 CSS_transition

在写页面布局时很多人会发现span、a这类行内元素设置width和height没有效果，这是因为inline元素默认不支持盒模型中的宽高属性。要解决这个问题，最常用的方法就是把元素的display改成inline-block。这样元素既能像行内元素一样和其他内容排在同一行，又能像块级元素一样设置...

栏目：HTML/CSS 时间：07-27 css inline-block 盒模型

很多前端开发者在使用 Angular 做后台系统或可视化搭建平台时，都会遇到需要动态创建组件并支持拖拽排版的需求。本文围绕 Angular 动态创建可拖拽组件并配置属性这一主题，介绍如何利用 Angular 的 ComponentFactoryResolver 在运行时挂载组件，结合 CDK DragDrop 模块实现拖...

栏目：HTML/CSS 时间：07-27 Angular 拖拽组件 动态创建

很多老网站以前都用Flash做动画和视频播放，现在浏览器都不支持Flash了，大家想知道HTML5是怎么把它替掉的。其实HTML5自带video、canvas和audio等标签，不用装插件就能播视频和做动画。本文说说Flash被淘汰的原因，讲清楚用HTML5的video标签替换Flash视频播放器的具体做法，还会提...

栏目：HTML/CSS 时间：07-27 html5 Flash video_tag

很多刚接触网页开发的人不知道怎么运行html源码。其实运行html文件并不复杂，常见方式有两种，一是直接用浏览器打开本地文件，二是启动本地服务器访问。本文会说明两种方法的适用场景和操作步骤，包括双击打开的局限，以及用Python或Node工具起服务的方法。掌握这些能帮你快速预览...

栏目：HTML/CSS 时间：07-27 HTML 运行html源码 本地服务器

很多网站首页都有通栏banner图，但图片尺寸和屏幕宽度不一致时，常常被裁剪掉重要部分，或者两侧出现难看的留白。其实通过CSS就能让banner在不同屏幕上等比例显示且不变形。核心思路是使用容器控制宽度，结合object-fit属性处理图片缩放方式。相比早期用背景图加background-size...

栏目：HTML/CSS 时间：07-27 css object-fit responsive_image

很多前端开发者在开发网页时会遇到一个奇怪的问题，在Chrome等浏览器中正常显示的div元素，到了Edge浏览器里却完全看不见。这种情况通常不是代码写错了，而是Edge对某些CSS属性或布局规则的处理方式和其他浏览器不同。常见原因包括使用了不被支持的CSS属性、父容器高度塌陷、f...

栏目：HTML/CSS 时间：07-27 Edge浏览器 div元素 CSS兼容性

在做前端开发时，我们经常用本地存储来缓存用户数据，但时间久了会产生无用数据，需要及时清理。很多新手不知道html本地存储缓存数据如何删除。其实浏览器提供了非常简单的接口，localStorage和sessionStorage都可以通过removeItem删除单条数据，也可以用clear一次性清空。如果是...

栏目：HTML/CSS 时间：07-27 localStorage sessionStorage html缓存删除

在网页布局中，文字居中是最基础也最常用的样式需求。很多初学者在写页面时都会遇到文字无法正确居中的情况。其实用CSS设置文字居中主要有两种简单方法，一种是利用text-align属性让行内内容水平居中，另一种是通过line-height与容器高度相等来实现单行文字垂直居中。这两种方...

栏目：HTML/CSS 时间：07-27 CSS文字居中 text-align line-height

很多刚接触网页制作的朋友想知道怎么用系统自带的Notepad来写HTML并且运行查看效果。其实HTML并不需要真正编译，只要用Notepad把代码保存成点html结尾的文件，再到浏览器里打开就能看到页面。本文会讲清楚从新建文件、写基础结构、保存编码注意事项，到双击或用浏览器打开运行...

栏目：HTML/CSS 时间：07-27 notepad HTML compile_run

很多人在写网页导航或者链接样式时，都会遇到鼠标悬停出现下划线非常生硬的问题。默认的下划线在hover时瞬间显示，看起来很突兀，用户体验不好。其实我们可以用css的keyframes配合transform或者width变化，做一个从左向右逐渐描边的动画，让下划线像被笔刷划过一样出现。这种做法...

栏目：HTML/CSS 时间：07-27 css keyframes hover_animation

在网页制作中，插入图片是最基础的操作之一。很多初学者不清楚如何使用HTML的img标签添加图片，也不知道怎么通过CSS设置背景图。本文介绍了img标签的基本写法、src路径的引用方式，包括相对路径和绝对路径的区别，还说明了用background属性插入背景图像的方法。掌握这些技巧，能帮...

栏目：HTML/CSS 时间：07-27 HTML_img background_image path_reference

在网页设计中，有时需要让文字呈现虚化朦胧的视觉效果，用来突出背景或营造层次感。很多新手会疑惑HTML里的文字能不能直接虚化，其实单纯HTML做不到，必须依靠CSS。最常用的方法是使用CSS的filter属性中的blur函数，给文字所在元素加上模糊半径就能实现虚化。此外还可以结合opacit...

栏目：HTML/CSS 时间：07-27 CSS_filter HTML text_blur

做前端开发时，很多人习惯用localStorage在页面间共享数据，但它只是本地存储，同源多标签页虽能读同一个值却难实时同步。本文讲怎么在网页间持久化共享变量，既保存数据不丢失，又能跨页面通信。我们会说用localStorage加storage事件做基础共享，再用BroadcastChannel实现实时广播，...

栏目：HTML/CSS 时间：07-27 localStorage IndexedDB BroadcastChannel

很多刚接触前端的新手都会问Atom程序怎么运行HTML文件。Atom是一款免费开源的文本编辑器，本身不具备直接预览网页的功能，但可以通过内置终端或安装插件来实现HTML的本地运行与查看。常见方法包括使用atom-html-preview插件实时预览，或者借助script插件执行代码，也可以手动在...

栏目：HTML/CSS 时间：07-27 Atom HTML运行 前端开发

很多前端开发者在做网页交互时，希望按钮在鼠标悬停时不仅有颜色变化，还能让按钮里的文字缩小，从而增强视觉效果。这种带文字缩小的悬停按钮动画用纯HTML5和CSS就能轻松实现。核心思路是利用CSS的transition属性监听hover状态，对按钮本身和内部文字分别设置不同的缩放或字体大...

栏目：HTML/CSS 时间：07-27 html5 CSS_animation button_hover

很多前端开发者在使用CSS border-image属性时，会发现安卓设备显示正常，但iOS设备上的边框出现断裂、模糊或者位置偏移等渲染异常。这个问题通常和iOS Safari对切片图片缩放、边框宽度计算以及高清屏适配有关。要解决这个问题，可以从图片切片规范、使用九宫格缩放、显式声明b...

栏目：HTML/CSS 时间：07-27 css border-image iOS

很多刚接触网页制作的新手想知道怎么用系统自带的记事本写HTML代码并且把它运行起来。其实方法很简单，不需要安装任何额外软件。你只要打开记事本，按照HTML基本结构写下内容，保存成点html结尾的文件，然后双击用浏览器打开就能看到页面效果。本文会讲清楚从新建文件、写基础代...

栏目：HTML/CSS 时间：07-27 记事本 html代码 运行方法

很多人在写页面时发现给元素设置了 10em 的宽高并加上 transition 却看不到放大动画。这通常不是 transition 失效，而是对 em 单位和 transition 触发机制理解有误。em 是相对当前元素字体大小的单位，如果父级或自身 font-size 没变化，10em 计算出的像素值就不会变。另外 tr...

栏目：HTML/CSS 时间：07-27 css transition em单位