Unocss(原子化css) 使用及vue3 + vite + ts讲解
目录 Unocss 简单使用 下载Unocss依赖 在vite.config.ts中引入 最后在main.ts中引入uno.css 然后就是使用 最后附带样式查询地址 想使用图标 图标库具体使用 Unocss 简单使用 首先初始化一个vite项目 使用pnpm安装 pnpm cr »
vue使用css-rcurlyexpected等less报错问题
目录 使用css-rcurlyexpected等less报错 vue中使用less报错问题 1、使用less 2、main.js使用less报错 使用css-rcurlyexpected等less报错 之前使用webstorm进vue的开发，今天刚换成VScode发现一个问题，百度上的 »
CSS 数学函数与容器查询实现不定宽文本溢出跑马灯效果
在许久之前，曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。我们实现了这样一种效果： 文本内容不超过容器宽度，正常展示 文本内容超过容器的情况，内容可以进行跑马灯来回滚动展示 像是这样： 但是，之前的方案，有一个很明显的缺点，如果我们事先知道了容器的宽度，那么没问题，但是如果没法确定容器的 »
html+css+js实现简易版ChatGPT聊天机器人
OpenAI的一款聊天机器人模型ChatGPT爆火，本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 »
CSS 3 所有的选择器整理（2023.2）
你知道的和你不知道的所有选择器。不包含尚未广泛实现的，也不包含已弃用的。 基本的选择器规则（Selector） 类型（Type）选择器 直接用标签匹配特定的元素 span { ... } p { ... } 类（Class）选择器 以.开头，匹配含有这个 class 的元素 .info { ... ... »
CSS-@规则(At-rules)常用语法使用总结
At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。 这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。 常用规则 @import @import 主要用于从其他样式表导入新的样式规则， »
CSS中的各种格式化上下文-FC（BFC）、IFC、GFC、FFC）
什么是FC？ FC是Formatting Context的缩写，中文名：格式化上下文。是 W3C在CSS2.1 规范中的一个概念。 FC是指页面中一篇渲染区域，渲染区域内使用的格式化上下文的渲染规则，决定了该区域以及其子元素如何定位。当然，使用同的渲染规则，也会对其他元素的起到相互关系的作用。 主要 ... »
css如何实现滚动条不占用高度
这篇文章主要讲解了“css如何实现滚动条不占用高度”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css如何实现滚动条不占用高度”吧！ css实现滚动条不占用高度的方法：1、打开相应的HTML文件；2、查找原始代码“ov »
html/css中tt指的是什么
这篇“html/css中tt指的是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“html/css中tt指的是什么”文章吧。 在html/css中，t »
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
我曾经多次向人推荐Vim，其热情程度有些类似现在卖保险的，有的时候，人们会因为一些弥足珍贵的美好暗暗渴望一个巨大的负面，比如因为想重温手动挡的快乐而渴望买下一辆二十万公里的老爷车，比如因为所谓完美的音质而舍不得一个老旧的有线耳机，比如因为一个铜炉火锅而期待北京那漫长而寒冷的冬天。 我曾经 »
前端使用JavaScript结合CSS实现3D旋转跟随鼠标变化
目录 纯CSS实现元素的3D旋转 控制 Y 方向的移动 结合 X&Y 方向的移动 设置平滑出入 简单分析一下，这个交互效果主要有两个核心： 借助了 CSS 3D 的能力 元素的旋转需要和鼠标的移动相结合 本人简单的说一下如何使用纯 CSS 实现类似的交互效果，以及，借助 Java »
css如何去除倾斜属性
今天小编给大家分享一下css如何去除倾斜属性的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。 css去除倾斜属性的方法：1、打开相应的HTML文件，并找到 »
CSS填充和宽高详解
目录 这节课，我们学习 CSS 填充属性和 CSS 宽度与高度属性。 还是看这个例子，每个区块除了设置外边距，还有内容周围的空间以及内容的宽高设置。 CSS 填充属性用于在一个元素的内容周围产生空间，也就是边框内到内容外之间的距离。可以通过 padding-top，padding-right »
CSS知识
CSS清除浮动 1.清除浮动的方法 - 额外标签法 2.清除浮动的方法 - 单伪元素清除法 3.清除浮动的方法 - 双伪元素清除法 4.清除浮动的方法 - 给父元素设置overflow：hidden CSS定位 网页常见布局方式 1.使用定位的步骤 2.相对定位 1.占有原来的位置 2.任然具有标签 ... »
通过Canal将云上MySQL数据同步到华为云ES(CSS)中
背景: A部门想将mysql中多张表join成一个sql查询语句,然后将结果同步到es中供搜索使用 环境信息: 源端mysql在阿里云上,有公网ip 目标端es在华为云上,三节点 操作步骤与目的: 配置MySQL供canal访问 1.由于阿里云的rds一般都配置了白名单,因此需要将后续canal所在 ... »
JavaScript CSS解析B站的弹幕可以不挡人物原理及技巧
目录 正文 正文 那天在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了，不会挡住人物，觉得很神奇，于是决定一探究竟。 高端的效果，往往只需要采用最朴素的实现方式，忙碌了两个小时，陈师傅打开了F12，豁然开朗。一张图片+一个属性，直接搞定。 为了印证我的想法，我决定自己写 »
CSS中知
1CSS特性 1.3优先级 1.4权重叠加计算 2Chrome调试工具 2.1查错流程 3CSS盒子模型 3.1内容的宽度和高度 3.2边框（border）-连写形式 solid 实线 dashed 虚线 dotted 点线 3.3边框（border）-单方向设置 3.4边框（border）-单个属 ... »
轻松解决 CSS 代码都在一行的问题
使用前端开发软件——HBuilderX，一键对 CSS 代码格式化，简单，便捷。 前言 最近在做博客园的界面美化，用的是博客园[guangzan]的开源项目，配置超级简单，只需要复制粘贴代码就好啦。 但在粘贴 CSS 代码时遇到一个问题，那就是所有代码都挤在了一行，没有一点排板的样子（如 »
云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM
著意登楼瞻玉兔，何人张幕遮银阙？又到了一年一度的网页小挂件环节，以往我们都是集成别人开源的组件，但所谓熟读唐诗三百首，不会做诗也会吟，熟读了别人的东西，做几首打油诗也是可以的，但若不能自出机抒，却也成不了大事，所以本次我们从零开始制作属于自己的网页小挂件，博君一晒。 玉兔主题元素绘制 成本最低的绘制 ... »
CSS 奇思妙想之酷炫倒影
在 CSS 中，倒影是一种比较常见的效果。今天，我们就将尝试，使用 CSS 完成各类不同的倒影效果，话不多说，直接进入主题。 实现倒影的两种方式 首先，快速过一下在 CSS 中，实现倒影的 2 种方式。 使用 -webkit-box-reflect 正常而言，-webkit-box-reflect ... »