简单的 CSS二级下拉菜单
摘要：
代码01： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 阅读全文
posted @ 2025-07-10 10:14 华安 阅读(16) 评论(0) 推荐(0)
一个简易的轮播图效果，可以根据这个来进行完善
摘要：
1 <!doctype html> 2 <html> 3 <head> 4 <style type="text/css"> 5 .container { 6 width: 500px; 7 height: 100px; 8 overflow: hidden; 9 position: relative 阅读全文
posted @ 2025-07-09 10:21 华安 阅读(18) 评论(0) 推荐(0)
去除html中多个 div 换行后，有空隙的办法
摘要：
例如： 1 <style type="text/css"> 2 .Container01 { 3 width: 600px; 4 background-color: aqua; 5 } 6 7 .ContainerItem01 { 8 width: 20px; 9 height: 20px; 10 阅读全文
posted @ 2025-07-08 09:52 华安 阅读(15) 评论(0) 推荐(0)
巧用 clear和after实现页面布局
摘要：
1 <style type="text/css"> 2 .ContainerNew { 3 width: 600px; 4 background-color: blueviolet; 5 } 6 .ContainerNew::after { 7 content: ""; 8 clear: both; 阅读全文
posted @ 2025-07-08 09:38 华安 阅读(12) 评论(0) 推荐(0)
vertical-align属性
摘要：
1、vertical-align的定义 CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。 官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。 2、vertical-align的语法 vertical- 阅读全文
posted @ 2025-07-08 09:16 华安 阅读(49) 评论(0) 推荐(0)
使用 clip-path隐藏掉滚动条
摘要：
clip-path: inset() 这里简单介绍一下。inset最多可以传4个参数，分别表示裁剪掉距离上、右、下、左的部分 所以，要把滚动条隐藏就很简单了，只需要把下方的裁剪距离设置大于等于滚动条尺寸的值就行了，这里就用10px,譬如在容器的底部设置 : padding: 0px 0px 10px 阅读全文
posted @ 2025-06-16 16:52 华安 阅读(19) 评论(0) 推荐(0)
nuxt3中配置 i18n
摘要：
1、将 @nuxtjs/i18n 安装为项目的开发依赖项： npx nuxi@latest module add @nuxtjs/i18n 此处 nuxt的版本与 i18n的版本一定要能匹配正确，否则会在 nuxt.config.ts会报错。 错误大致为： 对象字面量只能指定已知属性， 不在类型'I 阅读全文
posted @ 2025-05-27 17:27 华安 阅读(362) 评论(0) 推荐(0)
CSS中颜色 hsla表示
摘要：
定义与用法 hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。 HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 饱和度（S）是指色彩的纯度，越高色彩 阅读全文
posted @ 2025-05-23 08:44 华安 阅读(83) 评论(0) 推荐(0)
详解filter与fixed冲突的原因及解决方案
摘要：
问题描述 当在 body 中使用了 filter 滤镜属性的时候，会导致 fixed 元素定位发生错误，即不再相对 viewport进行定位，而是相对整个网页（ body 元素）进行定位。 1 <html> 2 <head> 3 <title>css filter issue</title> 4 < 阅读全文
posted @ 2025-05-14 09:19 华安 阅读(64) 评论(0) 推荐(0)
nuxt v3.17 创建新项目
摘要：
打开一个终端（如果您使用 Visual Studio Code，可以打开一个 集成终端），并使用以下命令创建一个新的启动项目： 1 npm create nuxt <项目名称> 由于国内的一些各种原因，有些网站我们不能访问，所以此代码会直接报错。 我们只好请求国内的镜像： npm create nu 阅读全文
posted @ 2025-05-12 10:17 华安 阅读(36) 评论(0) 推荐(0)
浙公网安备 33010602011771号