不明所以

前言“说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。”你以为这些是经过PS软件处理出来的？不不不，纯粹的是用css写出来的，很神奇把。强大的 CSS:filterCSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。MDNCSS标准里包含了一些已实现预定义效.

(function () { var styleN = document.createElement("style"); var width = document.documentElement.clientWidth / 75; styleN.innerHTML = 'html{font-size:' + width + 'px!important}'; document.head.appendChild(styleN); })();将页面分为.

var ___theImgInfo = { width: 0, height: 0}//图片选择$(document).on('click', '.the-img-view', function () { $('#input-img').click();});//图片选中后预览$(document).on('change', '#input-img', function () { if ($(this).val().length <= 0) retur.

min-width: 60rpx;align-self: baseline;flex-shrink: 0;

问题描述app.vue里的onLaunch中如果有异步方法，返回结果可能会在页面的 onLoad 之后，为了让页面的 onLoad 在 onLaunch 之后执行，使用以下解决方案解决方案步骤1在 main.js 中增加如下代码：Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve})步骤2在 App.vue 的 onLaunch 中增加代码 this.$

moment 日期处理http://momentjs.cn/

background-image: linear-gradient(to right, red , yellow);

AlloyTouchnpminstallalloytouchnpm install css3transform安装这俩就可以启动动画了import AlloyTouch from "alloytouch";import Transform from "css3transform";var target = document.querySelector("#div1"); Transform(target, true); new AlloyTouch({.....

2D转换 transform可以控制元素做转换：移动(translate)、旋转(rotate)、缩放(scale)只能设定一次，不会影响到其它元素的位置移动：translate(x,y) / translateX(n) / translateY(n)百分比是相对于自身元素的对行内标签没有效果/* 基本示例 */div { width: 100px; height...

.replace(/\<img/gi, '<img style="width:100%;height:auto" ');

.tab { position: fixed; top: var(--window-top); width: 100%; height: 80upx; border-bottom: 1px solid #eee; background-color: #fff; white-space: nowrap; /* 主要 */ .item { width: auto; /* 主要 ...

保证node npm的安装完成；保证 webpack vue vue-cli的安装完成；npm install webpack vue vue-cli -gvue脚手架初始化webpack项目vue init webpack projectName安装相应依赖npm install less less-loader axios vuex文件夹规范...

1、安装git2、全局配置一下gitgit config --global user.name ""git config --global user.email ""git config --global credential.helper store3、拉取：新建一个文件夹，用来拉取已有项目在新建的文件夹中右键打开 Git Bash Here 执行：git clone 仓库...

单行限制overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行限制display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

1、IphoneX底部横线遮挡导航的问题判断设备是否是IphoneX，如果是，则增加底部导航20pxfunction isIPhoneX(fn) { var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isIOS) { ...

登录阿里巴巴矢量图标库，选择喜欢图标：http://www.iconfont.cn/将喜欢的图标添加到购物车，然后 下载代码 可以将图标下载到本地，项目中使用会比较舒服。将下载的代码解压到项目中，会有三种图标使用方式：1、symbol引用，可以使用多色图标，但兼容性较差，支持IE9以上及主流浏览器，渲染性能一般2、font-class引用，兼容IE8及以上，语义明确3、unicode引用，兼容效果...

为了更方便自己的使用和查找，把常用的代码记录一下，省的老去翻文档了。通用加载提示：layer.msg('加载中...',{icon: 16,time:false,shade:0.6});layer.load(2, { shade: false });完成提示加关闭当前layerlayer.alert('保存成功！', { icon: 1 }, function () { ...

转自：http://blog.csdn.net/lifeblood123/article/details/526382341.使用meta标签调节浏览器的渲染方式，告诉浏览器用哪种内核渲染，360双核浏览器就是在ie和chrome之间来回切换,帮我们判断使用webkit还是chrome。 使用meta标签来强制IE8使用最新的内核渲染页面，代码如下：meta http-equiv=

转自：http://geek.csdn.net/news/detail/202007使用CSS复位CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：* { box-sizing: border-box; margin: 0; padding: 0;}现在元素的 margi

此次纯手工制作了一个基于基础的html+css3+Jquery的响应式导航demo，感觉适合大部分对于响应式导航有需求的项目，也即将使用到我的项目中去。BootStrap中的导航虽然完善，但是不太适合我的项目使用，改过的人应该都知道，不太好改，网上也找了一圈，也没有感觉很适合自己改动的导航，因为需要有子级栏目。(向立凯)没办法，自己写了一个，测试感觉还有点小问题，但是基本不影响，样式什么的

目标效果是，一排div都有float：left样式，水平排列，并希望它们处于屏幕的中间，办法是在div们的父级div加一个 display:inline-block 样式，父级的父级使用text-clign:center样式就可以了。代码如下：HTML 菜单标题 菜单标题菜单标题 菜单标题

#bNav { margin-top: 10px; background: #D9EBF5; text-align: center; } #bNav ul { padding: 4px 0; margin: 0;

如何在网页中屏蔽右键                            众所周知，要保护一个页面，最基础的就是要屏蔽右键。而现在网页上用得最多的是function click()，即下面这段代码：   〈script〉 function click(){ if(event.button==2){ alert( '本网站欢迎您 !!'); } } 

使用div做的按钮等一些小东西，多次点击都会出现蓝色选中状态，使用一下CSS就可以避免此情况：* { -moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none

直接复制代码到一个新的页面，跑起来就能看到效果。div模拟的自定义滚动条* { margin: 0; padding: 0;}p { height: 1000px;}#mainBox { width: 400px; height: 500px; border: 1px #bbb solid; position: relative; overflow: hid

代码加密是一项很头疼的事情，在这记录下一种自我安慰型的“代码加密”方式。 //屏蔽鼠标右键 document.oncontextmenu = function () { return false; } document.onkeydown = function () { var e = window.event |

本来想偷懒找个现成的接口，搜了一下发现没有现成的，那我在这写一个并分享给大家吧。写的.NET C#，需要VS打开或是IIS发布起来才有效果！！！直接打开没效果别找我！！！

filter:alpha(opacity=50); /*支持 IE 浏览器*/-moz-opacity:0.50; /*支持 FireFox 浏览器*/opacity:0.50; /*支持 Chrome, Opera, Safari 等浏览器*/另一种特殊的：background: rgba(99, 156, 185, 0.92); 最后的0.92是透明度

元素添加属性   onselectstart="return false"

本文来源于多年的 JavaScript 编码技术经验，适合所有正在使用 JavaScript 编程的开发人员阅读。本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。文章将分成初级篇和高级篇两部分，分别进行介绍。 初级篇1、三目运算符下面是一个很好的例子，将一个完整的 if 语句，简写为一行代码。const x =

网页常见的底部栏（footer）目前有两种：一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现;(向立凯)二、相对固定，当页面内容高度不沾满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条；(向立凯)废话不多说，可以直接复制代码

background-image: url(../imgs/footerkuang.png); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%;

转自：https://my.oschina.net/u/3531365/blog/979020Web前端技术由html、css和javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个