- 博客(28)
- 收藏
- 关注
RSS订阅原创 css雪碧图如何调整大小
1、通过transform: scale(0.5);来缩放，但在本身有过渡或动画时，刷新页面会有卡顿拉伸现象！不建议这样做！2、直接调整雪碧图background-size大小例如，雪碧图规格140*840，但是我们只需要width:42px、height:20px（只是容器的宽度，不是直接设置雪碧图的宽高哦！相当于我们人在房子里，只能看到窗户开放给我们的景象，其他的是看不到的，在这里具体...
2019-01-26 18:36:52
7682
4
转载 vue中elementUI样式(或者其他UI组件库，例如mint-ui)无法修改的问题（F12观察到 样式没有变化）
最近在开发中发现了修改elementUI样式的时候，添加了scoped的组件无法修改的样式，去掉scoped就可以了。这里我们就先看一下scoped这个属性的作用以及原理。一：scoped的作用和原理scoped的作用：当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不...
2019-01-26 16:52:51
481
原创 background-origin 与 background-position的关联
background-origin是规定以哪以下3种中的某一种来定位背景图片，与box-sizing（border-box或者content-box）同理padding-box背景图像相对于内边距框来定位。border-box背景图像相对于边框盒来定位。content-box背景图像相对于内容框来定位。与 background-position的关联：background-...
2019-01-25 14:28:42
731
原创 滚动条在页面刷新之后往上走了一截（变小了）？
html的scrollTop在页面刷新之后往上走了一截（变小了）？这种情况，可能由于元素的高度不确定（动画或者过渡或者动态计算高度都可能导致），造成页面刷新后的滚动条位置发生改变；解决：找到该元素，为他的父元素设定一个高度即可...
2019-01-24 14:02:27
695
原创 vue中 dom元素的数组无法执行for循环或者forEach、map循环
vue中 dom元素的数组无法执行for循环或者forEach、map循环，什么样的dom元素数组？如下：ulDom<ul class="ulDom"> <li>a</li> <li>b</li> <li>c</li></ul
2019-01-23 17:01:47
3816
原创 css盒子模型 padding不占用盒子之外的空间 box-sizing: border-box
-moz-box-sizing: border-box; /*Firefox3.5+*/-webkit-box-sizing: border-box; /*Safari3.2+*/-o-box-sizing: border-box; /*Opera9.6*/-ms-box-sizing: border-box; /*IE8*/box-sizing: border-box; /*W3C标准...
2019-01-23 10:30:50
1356
原创 fixed定位的元素及其子元素，滚动鼠标滑轮时无法滚动！
刚碰到了一个问题，由于fixed元素是不处于文档流中的，因此，如果你的滚动容器不是html，fixed元素在非html容器中会遮住底层，此时鼠标放在fixed元素上是无法滚动容器内的内容的，所以，最好的解决方式是 都以html为容器进行滚动！<!DOCTYPE html><html> <head> <meta charset...
2019-01-21 18:02:48
3067
原创 fixed定位的header头部元素width:100%后溢出覆盖了滚动条区域
请看以下图片的右上角，图片太大 请往左拉动查看。解决办法：为header元素设定一个margin-left:-17px；（滚动条宽度好像是这个值）
2019-01-18 15:19:41
3322
转载 Git与Github的连接与使用
下面继续，使用git 将项目上传到GitHub上首先要有GitHub账号,这就不用说了，没有的先注册，地址：https://github.com 没有仓库的话，先新创建一个仓库填写新仓库名称，备注信息。点击创建即可完成。 创建完成会显示如下界面。先放置不用管。后面会用到 因为本地Git仓库和GitHub仓库之间的传输是通过SSH加密传输的，GitHub...
2019-01-17 10:00:18
148
原创 background-size 引起的切屏不流畅
background-size:100% 100%;引起的切屏不流畅（切屏结束，整个banner都往左缩小了一点，不流畅的切屏不能忍）解决：使用 background-size:auto 100%; // 设成auto就行了...
2019-01-16 16:02:03
227
原创 vue的watch无法观测到父组件传递给他的值有无变化，只能观测到组件本身的data属性变化
<MainScene :loadMoreCount="loadMoreCount" /> // 这是父组件引用data() { // 这是父组件的data return { loadMoreCount: 0, };},loadMore() { // 这是父组件的触发的修改事件，按理说应该会在loadMoreCount修改之后自动触发子组件的...
2019-01-16 12:05:07
1259
5
原创 offsetTop获取到的值是什么值？
let MainScene = document.querySelector(".MainScene");console.log("MainScene.offsetTop", MainScene.offsetTop);
2019-01-15 14:12:31
811
转载 CSS3 中 transition-duration 对 display: none/block 属性无效？
看W3文档中支持的属性：http://www.w3.org/TR/css3-transitions...目前 display 属性不受支持。猜想原因是因为缓动是基于数值和时间的计算(长度，百分比，角度，颜色也能转换为数值)，文档说明在此：http://www.w3.org/TR/css3-transitions... 。而display是一个尴尬的属性，该计算什么值实现？因此解决方案是利用...
2019-01-14 16:55:28
629
原创 vue 多页面开发如何引入jquery
我的情况是在网上下载的一个已搭建好的vue多页面demo的基础上开发的，局部引入jquery并不需要自己手动在webpack.base.conf的plugins对象中添加以下这句话plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQu...
2019-01-14 14:14:52
831
原创 如何制作scrollTop变化时的动画
首先说明： 由于scrollTop属于js属性，因此无法通过css的transition和animation制作scrollTop变化时的过渡动画（本人亲自尝试过，确实如其他博友所说的无效）因此，需要(自己实现也可以)在项目中引入一些工具类帮助实现功能，我选择了jquery，用法如下：let Slog = document.querySelector(".Slog");$("ht...
2019-01-14 14:04:24
6133
原创 火狐浏览器与谷歌浏览器在移动端上的字体表现不一致？
火狐浏览器与谷歌浏览器在移动端上的字体表现不一致？为什么呢？原因是：谷歌最低字号是12px 只要小于12px的 都默认为12px， 而火狐则是写多少就多少。...
2019-01-11 17:34:25
1046
原创 火狐F12开发者工具 移动端模拟器不识别userAgent？
Question：在火狐F12开发者工具选中“响应式设计模式”后，发现userAgent仍旧是PC浏览器的标记Resolve：由于火狐浏览器默认是没有选中设备的并且只是提供默认设备宽高像素，导致火狐无法模拟移动设备的浏览器。这时我们需要在开发者工具左上角选中设备型号，再刷新页面即可（可能会有点卡顿或延迟）...
2019-01-11 16:50:36
1074
转载 vue项目打包后css背景图路径不对的问题(http://x.x.x.x:9000/static/css/static/img/bg.png)
问题描述：自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图：当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比图一：使用npm run dev命令访问 图二...
2019-01-10 17:40:07
2240
原创 css同步执行2个动画写法
以逗号分隔开：animation: aniMore 0.3s 0s ease both, aniMoreAnother 0.3s 0.3s ease forwards;
2019-01-07 20:14:23
1661
转载 HTML/CSS之 利用伪元素制作鼠标hover展示动画！
作者：LeJo链接：https://www.imooc.com/article/5083<!DOCTYPE html><html><head> <meta charset="utf8" > <title></title> <style> body {
2019-01-07 19:28:31
773
原创 一个兼容火狐、谷歌、IE等主流浏览器的滚动事件demo
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <l
2019-01-04 16:57:04
483
2
原创 js实现当某元素出现在可视窗口时才加载某一已定义好的动画（切换class名）
亲测可用，并且代入实际项目也可用哦：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>可视区域加载</title></head><style&a
2019-01-04 16:33:31
3150
原创 获取元素与页面距离的方法(getBoundingClientRect)
获取元素与页面距离的方法(getBoundingClientRect)，getBoundingClientRect就是“得到客户端矩形边界”的意思，或者使用邪恶记法记住“割(g)逼(b)艹(c)软(r)”。
2019-01-04 10:21:25
517
原创 怎样用css做一个从左往右的切屏动画？
利用css的animation属性实现：@keyframes banner_overlayGrey { 0% { width: 100%; } 100% { width: 0%; }}/* 元素样式 */.banner_overlayGrey { animation: banner_overla...
2019-01-04 10:14:19
2418
原创 用js控制鼠标滚轮滚动时，背景图片随之放大缩小（background-size），但动画不流畅咋办？
解决方案: 为该背景图所在元素新增 transition: all 300ms；样式，添加过渡，自动补充补间动画！另外补充(*^-^)ρ(*╯^╰)：当发现在滚动事件里用js为某元素如div设定的position:fixed 还有位移变化时，出现抖动，说明可能在样式里写了transition过渡导致的，去除就可用了...
2019-01-04 10:09:14
1914
原创 webpack 打包压缩 ES6文件报错UglifyJs + Unexpected tok
最近在下载别人的vue多页面demo后，npm run dev没问题，npm run build之后就报错：1、webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token...最近做项目的时候运用vue,webpack,在打包压缩的工程中，部分压缩文件报错，虽然也可以运行，但是毕竟报错不好看；于是，如下解决方法： 在根目录下创建.babelrc文件...
2019-01-02 20:16:02
1683
转载 webpack常用插件及作用
copy-webpack-plugin ：复制文件到目标文件夹。在开发时使用热模替换，（没有生成dist 文件夹，都在内存中），如果想引用某一个js文件，直接写script标签是找不到的，因为服务器内存中没有这个文件。所以复制这个文件，到dist中。compression-webpack-plugin： 生产环境时可选择让代码压缩gzip.html-webpack-plugin: 生成i...
2019-01-02 19:54:07
523
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人