文字出部分以省略号(...)代替，并显示tooltip，未出不显示
效果如下：思路：获取元素的实际宽度，根据实际宽度和最大宽度比较，超出最大宽度则显示tooltip代码（只展示关键部分，外层是table）：//外层是table表格<div@mouseenter=......
当前位置：
响应式布局:rem适配布局方案
rem适配布局有两种方案，一种是rem媒体查询Less技术，一种是使用flexible.js。方案1:rem媒体查询Less技术方案技术简介rem单位rem(rootem)是一个相对单位，类似em，e......
HTML技术的趣味“2048”小游戏效果+源代码
游戏运行效果粗览初始化界面：动态游戏界面预览：代码demo.html<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:/......
有意思的文字飞入动画模仿水滴融合
先上效果图：代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title......
媒体查询适配
媒体查询媒体查询：根据一个或多个基于设备类型、具体特点和环境来应用样式1、媒体类型2、媒体特性3、逻辑运算符媒体类型all所有设备print打印机设备screen彩色的电脑屏幕speech听觉设备（针......
vue3进入页面实现动画效果
2-1.入场钩子：before-enter(el)：入场前，接收两个参数el(元素本身)、done()通知动画结束回调enter(el,done)：入场时执行的函数；接收两个参数el(元素本身)、do......
Ant Design Vue的Table组件设置scroll属性时，表头去掉滚动条
未去除之前效果：去除后效果：只需要去除header的overflow:scroll属性即可使用代码：>>>.ant-table-fixed-header.ant-table-scro......
css 标点符号换行问题
最近在做项目过程中遇到一个很奇怪的问题，在文本换行的时候刚好能够放下文字，但是标点符号把这个文字带着换行了。经过研究发现，因为标点符号不允许出现在行首和行尾，连带着符号前的一个文字也换行了。解决方案：......
js实现3d轮播图效果
javascript实现的3d轮播图功能有左右箭头切换、自动轮播、移入暂停轮播、移出继续轮播、点击图片轮播、防抖、节流。效果图以下为实现代码：html部分：<divclass="box">......
毛玻璃 / 玻璃拟态 处理 backdrop-filter 兼容性问题
什么是backdrop-filterbackdrop-filterCSS3属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背......
跟着我配置TailWind CSS，安装和使用
TailWindCSS安装使用Tailwind包含了一系列有用的开箱即用的基础样式，可以直接在标签上传入flex，border，display等直译的样式名官方地址1.通过npm安装Tailwind通......
vue audio音频 编写实现进度条 拖拽 快进 下一首 切换音乐列表 音量增减
不说了，直接上代码<template><divclass="container"><divclass="audio_head"><divclass="head......
CSS高级篇——更多选择器 (selectors)
前面我们学习过HTML选择器，类选择器和ID选择器，这几种选择器配合起来使用可以让我们精确定位HTML元素。本篇要介绍的几个功能更加强大。全局选择器全局选择器用一个星号（*）来表示，它会作用于所有元素......
设置图片纵横比
如果你正在思考如何根据容器的宽度按比例设置高度，那么这个应该可以帮到你。最近遇到一个响应式设计的需求，页面缩放时保持整体结构不变，按原有比例缩放，如下图：每行展示4个图片。这个需求看似简单，其实呢，也......
JavaScript动态生成表格
1.以下这个案例比较典型：涉及到dom节点的操作，以及数组和对象的遍历方法题目要求：使用数组把学生数据模拟出来。动态创建行、单元格。为单元格填充数据。提供“删除”链接，可删除所在的行。效果如下：htm......
前端不同尺寸单位的区别和使用
前言一直搞不懂pc端、移动端、小程序、不同设备适配要使用不同的单位表示不理解，今天，我就磕到底整明白它！前端常见的尺寸单位常见单位有：px、rpx、em、rem、%、vw、vh、vm一、pxpx是像素......
表格的边框去掉
在做一个数据展示的时候，要求，表格间隔不同的背景色显示，于是出现了此效果。首先我把border去掉了依然不生效，无论是table，还是trtd,border:none是无效的随后在查属性，才得知这不是......
[前端笔记——CSS] 10.层叠和继承+选择器
1.层叠与继承1.1冲突规则CSS代表层叠样式表（CascadingStyleSheets），层叠的表现方式是理解CSS的关键。与层叠密切相关的概念是优先级（specificity），决定在发生冲突的......
el-tabs样式修改
问题用el-tables组件写两个标签页，初始代码与效果如下：<el-tabstype="border-card"><el-tab-pane><spanslot="lab......
el-input 密码输入框 显示隐藏优化
由于网站整体用的是elementui样式，但是在使用过程发现，type为password类型的输入框，若使用show-password参数虽然可以做到点击一下隐藏再点击一下显示的效果，但是页面的交互显......