- 博客(28)
- 收藏
- 关注
RSS订阅原创 有没有css大佬，发现个奇怪的bug：sidebar有无背景颜色影响 transform的动效
最近写了一个带有侧边栏的棱柱旋转动效窗口，结果发现侧边栏有无背景色会影响右侧prism的旋转动效。
2023-05-30 18:09:24
152
原创 scoped和/deep/深层选择器原理及问题解决:vue+element-ui项目为何用深层选择器可以解决?为什么有的时候/deep/不好用?如何解决?
style的scoped属性工作原理,深度选择器工作原理,vue+element-ui项目中使用scoped为什么element-ui组件样式不易修改,如何解决?
2022-04-11 21:52:19
1634
1
原创 js做放大镜 购物图片放大观察 鼠标移动 鼠标滚轮滚动 键盘控制 附详细代码及注释
相较于上一篇文章,本次仅增加了鼠标滚轮的监听oDiv.addEventListener(‘mousewheel’, function (e) {})在div中设置鼠标滚轮监听事件当e.wheelDelta>0为上滚;当e.wheelDelta>0为下滑;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-
2022-01-19 10:54:17
276
原创 js JavaScript2种做放大镜方式包含鼠标移动以及键盘控制 js+html+css 可自定义放大比例 附详细代码注释
js JavaScript2种做放大镜方式包含鼠标移动以及键盘控制 js+html+css 可自定义放大比例 附详细代码注释放大镜核心原理插入图片格式详细代码插入背景图格式详细代码放大镜核心原理1.新的盒子大小/所需放大区域大小=放大比例=新盒子里的图片大小/旧盒子里原图大小2.所需放大的盒子移动多少*放大比例=新盒子里图片所需移动比例3.新的盒子给溢出隐藏,插入图片格式详细代码<!DOCTYPE html><html lang="en"><head>
2022-01-18 17:16:24
679
原创 轮播图JS Javascript +html +css
轮播图JS Javascript +html +css 附详细代码注释1 html,css2 动态生成页面函数3, 定义函数程序 动态生成轮播图页面4, 自动轮播函数5, 鼠标移入移出6, 点击事件7, 浏览器最小化隐藏详细代码主体代码move运动函数1 html,css 只需要一个 空标签 定义好css样式 所有需要的轮播图标签 都可以 动态生成 根据需求 动态生成 轮播图 页面内容2 动态生成页面函数
2022-01-18 17:05:00
651
原创 JS Javascript 滚动条位置获取及 监听(JS做吸顶效果准备)上卷监听
JS Javascript 滚动条位置监听有文档类型声明没有文档类型声明页面滚动监听事件注意:**一般 页面滚动监听事件 每次触发都不会只触发一次一般 都是 页面滚动一次 触发多次函数程序**有文档类型声明上下document.documentElement.scrollTop左右document.documentElement.scrollLeft没有文档类型声明上下document.body.scrollTop左右document.body.scrollLeft页面滚动监听事件windo
2022-01-11 20:21:43
1085
原创 JS Javascript用js做根据滚动条位置监听触发事件(附示例代码) 类似京东首页搜索框
JS Javascript 用js做根据滚动条位置触发事件 类似京东首页搜索框1.设置滚动条监听事件2.添加滚动条位置判断触发事件3.示例代码1.设置滚动条监听事件window.addEventListener( ‘scroll’ , function(){});2.添加滚动条位置判断触发事件返回滚动条上侧距离:document.documentElement.scrollTop;3.示例代码<!DOCTYPE html><html lang="en"><hea
2022-01-11 20:14:24
621
原创 JS Javascript 用js做响应式布局(不常用,仅做拓展了解)
JS Javascript js做响应式布局[附实例代码]--不常用,仅做拓展了解1.设置浏览器视口监听事件resize2.在函数程序中定义一个变量赋值浏览器的用户视口宽度;3.在函数程序中判断用户浏览器的视口宽度进而设置不同宽度下的样式4.示例代码1.设置浏览器视口监听事件resizewindow.addEventListener( ‘resize’ , function(){});当用户的视口发生改变,运行相应的函数程序;2.在函数程序中定义一个变量赋值浏览器的用户视口宽度;3.在函数程序中判
2022-01-11 19:53:13
1902
原创 JS Javascript获取用户视口宽(响应式准备) window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决
JS Javascript 获取用户视口宽 window.innerWidth以及document.documentElement.clientWidth以及相关兼容解决获取用户视口宽高为下一节响应式布局做准备包括滚动条的浏览器宽度高度获取方式 window.inner不包括滚动条的浏览器宽度高度获取方式当有文档声明时:document.documentElement当没有文档声明时:document.body获取用户视口宽高为下一节响应式布局做准备包括滚动条的浏览器宽度高度获取方式 window.in
2022-01-11 19:42:07
1695
原创 JS Javascript BOM操作之三大弹窗 BOM操作的顶级对象 警告窗口alert 输入弹窗prompt 确认弹窗confirm
JJS Javascript BOM操作之三大弹窗 警告窗口alert 输入弹窗prompt 确认弹窗confirm BOM操作的顶级对象windows三大弹窗警告弹窗window.alert('内容')输入弹窗window.prompt('内容')确认弹窗window.confirm('内容')BOM操作的顶级对象windows三大弹窗警告弹窗window.alert(‘内容’)引号中填警告的内容;window.alert('这个是alert警告弹窗');输入弹窗window.prom
2022-01-11 19:23:46
705
原创 JavaScript 实现页面内时间实时倒计时 计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数
JavaScript 实现页面内时间倒计时 计时器 可用于抢购倒计时,记录恋爱纪念日总时长等输出对应的天数小时分钟秒数注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制)第一步:构建计时函数第二步.在body里创建输出的对象第三步.在body中调用js文件以及创建script标签第四步.设置计时器实现数字变动方法一.定时器方法二.延时器构造函数实现每隔1s递归五.设置样式成品图奉上注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制)第一步:构建计时函数在这里我们按
2022-01-09 22:50:01
1231
原创 JS简单数据类型 布尔值 数值类型 字符串 null undefined 以及数据类型转换布尔值 数值类型 字符串 数据类型检查typeof()用法 isNaN()用法
JS简单数据类型 布尔值 数值类型 字符串 null undefined 以及数据类型转换布尔值 数值类型 字符串 数据类型检查typeof的用法一.布尔类型bool/boolean包含true,false强制转换布尔类型Boolean(变量/表达式)返还值为 false:返回值为true:自动转化为布尔类型一般用于需要判断的情况二.字符串类型string字符串语法:强制转化为字符串1.String(变量/表达式)2.变量.toString()自动转化为字符串 +号三.数值类型数值类型的分类整数1.二
2022-01-09 20:07:34
401
原创 JS js实现数组以及字符串去重的方法
JS js实现数组去重的方法,字符串同样可以用一.new Set二.创新数组查询判断加入三.原数组前后查询比较删除四.双重for循环遍历去重五.利用对象不能存储重复属性的特点方法1: 循环遍历对象方法二:遍历数组,将其作为键名存入对象中,对对象中键名的进行判断,当其内容不在对象中时,将其存入,并将其存入新数组中.字符串去重一.new Setset数据类型不允许有重复数据,会自动清除重复数据;通过合并展开运算符…对set类型转化为数组操作.var arr=[1,2,3,1,2,3,1,2,3];va
2022-01-08 14:00:54
1327
原创 背景渐变,多层背景图
背景渐变,多层背景图一.线性渐变 linear-gradient二.径向渐变三.背景大小一.线性渐变 linear-gradient为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。默认为从上到下.没有属性前缀的需要在()里添加to 写上结束方向带有属性前缀的直接在()里写上从哪个方向开始多个背景用逗号隔开,写在前面的层级高,所以叠加时,前面的颜色需要加透明度,另外可以同时在最后用逗号隔开插入背景图,实现背景图
2021-12-23 08:38:04
899
原创 CSS选择器
选择器一.选择器1.基本选择器1-1.类型选择器(标签选择器)1-2.Class选择器(类选择器)权重为101-3.ID选择器权重为1001-4.通配符权重为01-5.群组选择器无权重之说,2.层次选择器 权重为{}前所包含所有元素选择器权重的和2-1.后代选择器(包含选择器)2-2.子选择器2-3.相邻兄弟选择器2-4.通用兄弟选择器3.伪类选择器(权重是10)3-1.动态伪类选择器3-2.结构伪类选择器child类3-2-1.E:fisrt-child3-2-2.E:last-child3-2-3.E
2021-12-22 08:31:19
282
原创 H5新增标签
H5新增标签1.头部 header2.尾部 footer3.导航 nav4.内容区域 section5.辅助信息 aside6.文章 article7.媒体文件引入 embed src8.视频 写法1写法2引入视频之后,需要其他属性配合9.音频 用法引入音频之后,需要其他属性配合10.独立内容区域figure figcaption11.高亮显示mark12.对话框 dialog open13.画布 canvas14.标题组 hgroup1.头部 header2.尾部 f
2021-12-19 16:17:21
295
原创 图片整合(精灵图,雪碧图)
@TOC一.原理和目的将一些小图片合并在一个大图上,这个过程就是图片整合.这样可以减少向服务器请求信息的次数,从而提高浏览器的加载速度,其次也可以减小图片的体积.二.注意点1.一定是小图片进行整合大图片整合没有太大意义2.需要在图片之间设置空隙三.精灵图的使用方法1.直接插入图片在img外加个盒子,设置和图片相同的宽高;用margin调整图片在盒子里的位置,使想要留下的图片在盒子内部;给盒子添加overfiow:hidden隐藏其他的图片.2.用背景图设置盒子宽高和图片大小相同
2021-12-19 16:04:30
350
原创 浏览器兼容问题
浏览器兼容问题一.问题根源二.相关术语1.css BUG一些问题2. css hack 自己研究的一些解决问题的方法(非官方)3. css filter过滤器1.!important 设置权重最大2.+或者*3.\94.\05._三.浏览器内核IE内核或者MSHTML或者tridentGecko内核webkit内核presto内核Blink内核四.浏览器兼容的调整之后的缺点五.常见兼容问题1.图片相关1-1.图片向下撑大3像素1-2.图片横着排列的时候有水平缝隙1-3.图片添加了超链接之后,在IE10以下有
2021-12-19 15:00:23
255
原创 BFC块级格式化上下文
BFC块级格式化上下文一.触发bfc的条件二.bfc的特性1.盒子在垂直方向上可以通过margin设置间距,属于同一个BFC内部的盒子会发生margin重叠2.bfc区域不会与浮动盒子发生重叠3.计算BFC高度时,浮动盒子也参与计算4.在BFC内部,垂直方向上box一个接一个的放置5.每个盒子margin box的左边从包含块的内部开始计算,不会从border的外侧开始计算(有点废话)6.每个BFC都是一个独立的区域,里面的不会影响外面的一.触发bfc的条件1.html默认就是bfc2.添加浮动属性值
2021-12-19 13:24:07
176
原创 table表格相关内容
table表格1.宽度 width2.高度 height3.边框 border4.边框颜色 bordercolor5.背景颜色 bgcolor6.文字水平对齐 align=“left或right或center”7.文字垂直对齐 valign=“top或middle或bottom";8.cellspacing="单元格与单元格之间的间距“ **必须给table**9.cellpadding="单元格与内容之间的空隙"10.合并单元格属性：11.表格标题12.表格列分组常用不常用如果用rules
2021-12-15 08:53:30
1178
原创 hover的用法
hover的用法hover动态伪类选择器效果使用方法目标1:hover目标2hover动态伪类选择器效果可以使鼠标滑过前面紧贴元素目标1时,触发动态效果.在使用时只要确保hover前紧贴的元素是鼠标滑过的目标,最后花括号前的元素是希望改变属性的目标即可.使用方法目标1:hover目标21.在使用时可以先不加:hover,直接先确保在花括号前的选择器可以精准的选择到目标(层次选择器也不会影响正常使用.)例如.box1+.box2 .box3>.box4+.box52.如果想让选中bo
2021-12-12 21:38:29
7304
原创 实战案例:横向和纵向的三级下拉菜单需要掌握hover
三级下拉类似二级下拉,在二级下拉的基础上配合定位的属性再添加一层.一. 横向三级二.纵向三级文章最后后附三级下拉菜单的html代码.1.两个ul绝对定位做横向(推荐)此时的二级菜单有绝对定位,所以三级菜单会以二级菜单为参照物,如果不设置宽度三级菜单会出现折行的现象,所以需要给三级菜单一个宽度303px实现横向,或101px实现二级横向,三级竖向.*{margin: 0;padding: 0;}a{ text-decoration: none;}ul{ list-st
2021-12-12 21:08:04
1040
原创 相对定位 绝对定位制作二级下拉需要掌握hover
相对定位 绝对定位制作二级三级下拉菜单 父相子绝二级下拉一.纵向二级下拉菜单二.横向二级下拉菜单相对定位做1.相对定位做纵向(优选)2.相对定位 做横向绝对定位做1.绝对定位做横向(优选)2.绝对定位做横向在网页中表头常见的导航栏,大多有帮助用户快速定位的下拉菜单.配合着hover以及a即可实现.二级下拉以下为二级下拉的HTML代码 <div class="nav"> <ul> <li><a href="">首页
2021-12-12 19:39:06
1376
原创 相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法
相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative;二.绝对定位:position:absolute;1.找参照物2.移动3.设置层级z-index三.固定定位position:fixed;四.居中方法1.margin:auto方法2.50%配合margin法方法3.cala计算函数五.粘性定位position:sticky一.相对定位:position:relative;不脱离文档流,固定在原位置,层级会升高会有覆盖效
2021-12-12 17:41:24
2745
原创 white-space:nowrap normal pre pre-wrap pre-line的区别以及pre和pre-wrap的“首行缩进“问题
white-space相关属性以及pre和pre-wrap的"首行缩进"问题1.white-space: nowrap;多个空格会被合并为一个;换行符无用,且文字不会受到盒子宽度的影响.2.white-space: pre;多个空格不会合并;换行符有用,且文字不会受到盒子宽度的影响,注意:换行后,当代码整合时造成的空格,也会被当做文本内输入的空格,影响显示.如下图3.white-space: pre-wrap;多个空格会被不会合并;换行符有用,且文字会受到盒子宽度的影响.注意:换行后,当
2021-12-12 14:36:20
2965
原创 HTML常见问题解决去除图片下的横线 margin的传递问题 高度塌陷
1.去除图片下的横线.1.图片的下面默认对齐为基线,所以可以通过改变图片垂直相对于文本的顶线对齐即vertical-align:top;2.将img插入图片的行内块属性改为块标签只需在css中对img进行以下修饰:display:block;...
2021-12-08 17:46:40
669
原创 表单(包含H5新增)
表单一.创建表单1. form标签2.method属性2-1.get2-2.post二.表单控件1.输入框inputtypenamevalueplaceholder1-1.去点击时的边框2.提交按钮button3.文本框textarea4.label标签5.select配合 option 下拉菜单6.fieldset 搭配legend实现表头行内有文字.三.H5新增(IE兼容性差)1.表单标签1-1.数据列表(类似百度搜索时出现的信息提示框)1-2.输出框2.表单属性2-1.邮件 type="email"
2021-12-05 20:14:28
595
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人