- 博客(33)
- 收藏
- 关注
RSS订阅
转载 vue 目录
1.vue cli3.0 命令 vue ui 使用GUI 建立项目 2.基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem3.vue cli 3.0快速创建项目
2018-11-29 14:43:21
281
转载 jQuery与原生JS相互转化
前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。总结了大部分 jQuery API 替代的方法，暂时只支持 IE10 以上浏览器。Query Selector常用的 class、i...
2019-03-28 16:11:10
4299
转载 如何禁用 a 标签的点击事件 disabled属性 和 pointer-events属性值详解
首先 ，大家要知道： a标签 是没有disable 属性的 ， 如果想用disable 禁止a标签的点击事件，也是可以实现的；往下看1. a标签 要用disable 属性，必须和pointer-events属性一起使用，例子 如下：HTML 部分代码：<a class="praise">赞</a>JS 代码：...
2019-02-28 11:39:28
6673
转载 js 移动端之监听软键盘弹出收起
js 移动端关于页面布局，如果底部有position:fixed的盒子，又有input，当软键盘弹出收起都会影响页面布局。这时候Android可以监听resize事件，代码如下，而ios没有相关事件。// 解决安卓键盘弹出问题var oHeight = $(document).height();$(window).resize(function () {if ($(document...
2019-02-27 15:35:30
9368
转载 基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem
1，安装 flexible和 postcss-px2rem（命令行安装）npm install lib-flexible --savenpm install postcss-pxtorem --save-dev或者：npm install postcss-px2rem --save-devpostcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据&l...
2018-11-29 13:50:43
3082
1
转载 vue cli3.0 打包并在本地查看时页面空白问题
根据以下命令对项目进行打包： npm run build 命令执行完出现 DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html看了一下...
2018-11-29 10:13:20
20777
1
转载 深入研究-webkit-overflow-scrolling:touch及ios滚动
1. -webkit-overflow-scrolling:touch是什么？MDN上是这样定义的：-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和...
2018-10-24 14:14:49
929
转载 Fullpage参数说明
参数说明$(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false,//绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。 anchors:['firstPage', 'secondPage'],//anchors定义锚链接，默认为[]...
2018-09-27 13:57:45
4696
转载 Mock.js 实例
Mock.js实现的功能。基于数据模板生成数据。基于HTML模板生成数据。拦截并模拟Ajax请求。本文仅演示使用mock.js进行模拟并拦截Ajax请求。首先页面中先引用：<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script src="http://mockj...
2018-07-12 17:00:20
1692
转载 Mock.js 模拟ajax数据 使用
Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki安装使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js">...
2018-07-12 16:59:19
2719
转载 在vue项目中使用stylus
安装stylus好了，建立好项目后我们来安装stylusnpm install stylus stylus-loader --save-dev这样就安装上了stylus。接下来就可以使用了，使用方式分两种。一种是在.vue文件的style块中使用，一种是引用.styl文件的形式在.vue文件的style块中使用这个很简单，只要在style标签加上lang="stylus"就可以了，看完这例子<...
2018-07-12 16:49:19
1353
转载 VUE安装环境
1. http://nodejs.cn/download/ 下载nodejs参考http://jingyan.baidu.com/article/91f5db1b3e1f991c7f05e395.html全局安装expressNpm install express2. https://git-for-windows.github.io/ 下载 gitbash安装 cnpm安装淘宝镜像npm...
2018-07-12 16:48:44
193
转载 网页适配 iPhoneX，就是这么简单
前言iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理...
2018-07-12 16:48:10
33966
5
转载 stylus_安装与自动编译
stylus介绍stylus是一个css预处理框架。来自node社区，主要用来给node项目进行css预处理支持stylus文件后缀是 .stylstylus安装$ npm install -g stylus运行stylus -h 可以获得相关的命令行支持自动化编译新建example文件夹新建css文件夹新建css/style.styl文件打开命令行界面example目录下输入 $ stylus...
2018-07-09 17:51:55
2967
转载 npm用法以及更换到淘宝镜像的方法
0.安装nodejs+cnpm+gitbush1、安装nodejs1.1、说明：gulp是基于nodejs，理所当然需要安装nodejs；1.2、安装：打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。然后像安装QQ一样安装它就可以了（安装路径随意）。2、使用命令行（如果你熟悉命令行，可以直接跳到第3步）2.1、说明：什么是命令行？命令行在OS...
2018-07-09 17:51:24
1207
转载 移动端iOS第三方输入法遮挡底部input及android键盘回落后留白问题
问题概述问题1：H5 web 移动端 输入框, 键盘唤起后fixed定位好的元素跟随页面滚动了起来… fixed属性失效了！满屏任性横飞, 如下图:问题2：有第三方输入法的ios机还会出现键盘弹出延迟，导致普通布局 输入框(input/textarea等) 位置靠下的被键盘挡住, 如下图:(这个'完成'出来, 然后'键盘'再顶起)2016-11-04完美解决方案// CSS.scrollWrap...
2018-07-09 17:50:48
4214
转载 css3过度效果、2D、动画整理
1.过度效果div{transition:all 1s ease 2s;} div{transsition:属性 过渡时间 过渡效果 延迟;}2.2d变形div:hover{ transform:rotate(90deg) scale(2) skew(30deg) translate(10px);}角度 缩放 倾斜 位置div:hover{transform:rotate(90deg); tr...
2018-07-09 17:50:04
752
转载 js获取当前时间前后N天前后日期的方法
这个javascript函数是获取当前时间前后N天日期的方法，可以得到昨天，今天，明天，一月前，三月前，半年前，一年前的日期，只要修改参数就可以实现得到任何一个天数。具体用法如下： function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取AddDayC...
2018-07-09 17:49:25
19976
1
转载 手机端页面自适应解决方案—rem布局进阶版（附源码示例）
一年前笔者写了一篇 《手机端页面自适应解决方案—rem布局》，意外受到很多朋友的关注和喜欢。但随着时间的推移，该方案已然过时，故为大家介绍一个目前我极力推荐使用的，更加完美的方案——rem布局（进阶版）另外：此方案仅适用于移动端web文章底部常见问题说明第四条，笔者已给出一个相当便捷的解决方案，欢迎留言交流。（2017/9/9）该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb，源码已在...
2018-07-09 17:48:52
1766
转载 谈谈移动端屏幕适配的几种方法
文/腾讯 莫振中移动端web开发相对于PC端web开发，我们可以庆幸不用兼容那么多浏览器了，但是随之而来的却是各种屏幕尺寸的适配，个人觉得，比PC端还要费精力。在使用了腾讯优测进行软件测试后，问题得到了有效解决。响应式布局简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。如上图，其实就相当于页面被压矮了。Cover布局就跟back...
2018-07-09 17:48:14
10863
转载 判断input输入框的值，用到input事件，blur事件，focus事件
需求：当输入框有字或者正在输入时，右边的圆形取消按钮才出现。否则不出现。<script type="text/javascript"> //输入框正在输入时 $('.f2 input').on('input',function(){ if(!($('.f2 input').val()=='')){ $(".close").show(); }...
2018-07-09 17:47:28
16886
转载 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了，成熟的框架如淘宝的flexiable.js，以及我的好友@墨尘写的更轻量级的hotcss。用rem作单位使得元素能够自适应后，还有一块需要关注的，那就是背景图片。本文就来聊聊这方面的东西。rem布局所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小，然后所有的元素尺寸都以rem为单位来写。比如将<html>的字...
2018-07-09 17:46:52
334
转载 jQuery实现购物车物品数量的加减
实现购物车物品数量的加减，最小值为1，当最小值为1时再按减少，减少按钮不可编辑，当按增加数量时恢复减少按钮状态。这个除了加减功能外，也可以自动计算价格。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...
2018-07-09 17:45:36
11947
1
转载 手机输入法遮挡输入框解决方法
一、参考资料 RunJs:http://runjs.cn/code/pigebxdj二、HTML<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>keyboard</title> <meta name="viewpo
2018-07-05 14:23:12
4257
转载 HTML5 input placeholder 颜色修改示例
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #666;}input:-moz-placeholder, textarea:-moz-placeholder {color: #666;}input::-moz-placeholder, textarea::-moz-placeholder ...
2018-07-05 14:21:51
1288
转载 input checkbox；radio；上传按钮；样式美化
html代码如下：<span class="pay_list_c1 on"><input type="radio" checked="checked" name="paylist" value="1" class="radioclass"></span>css 代码：.pay_list_c1 {wid
2018-07-05 14:20:02
1792
转载 微信扫码提示在浏览器中打开的遮罩代码
由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时点击下载按钮没反应，我想到的是做一个提示用户在浏览器中打开下载。之前写过的两篇文章：微信打开网址添加在浏览器中打开提示 和 微信扫描打开APP下载链接提示代码优化，尽管已经做得很简单，但发现很多问这类问题的都是小白。其实原来很简单，就是判断当前是在微信内置浏览器中，然后将默认隐藏的提示层显示出来。第一步：判断微...
2018-07-05 14:18:09
1306
转载 网页中的foot底部定位问题
网页底部一般有个foot，放置一些友情链接版权声明什么的，这个模块是如何定位的？要是直接放内容区域的下面的话，假如是内容区域的高度不够的话，那么foot下面是会留有很多空白的；好了，这时你会说直接相对body定位到底部，那么当内容区域的高度多的话或用户把浏览器放小看的话，部分内容是会被遮住了的。这里我们可以有个方法解决这问题，通过::after伪元素撑起footer的高度，然后margin-bot...
2018-07-05 14:16:14
1894
转载 bootstrap-datetimepicker如何只显示到日期
bootstrap-datetimepicker如何只显示到日期 - 霍啸林 - 博客园bootstrap-datetimepicker 一般都是设置到时分秒，有时候并不需要，怎么处理呢？minView: "month", //选择日期后，不会再跳转去选择时分秒1.引入 <link href="Public/css/bootstrap.min.css" type="text/css" ...
2018-07-05 14:14:49
10928
转载 解决Placeholder的IE8兼容问题
本篇文章主要介绍了使用jQuery快速解决input中placeholder值在ie中无法支持的问题。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/...
2018-07-05 14:14:01
2068
转载 css清除浮动4种方法
为什么浮动这么难？因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。1，父级div定义 height<style type="text/css">.div1{background:#0...
2018-07-05 14:12:45
31080
转载 PC端CSS重置全局样式
/*==全局样式==*/*{padding:0;margin:0;}div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{border:0;}img,input{border:none;vertical-align:middle;}body{font-family:Tahoma,Arial,Helvetica,"...
2018-07-05 14:10:30
2431
转载 史上最全的CSS hack方式一览
做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的经...
2018-07-05 14:06:20
3790
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人