![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端
文章平均质量分 68
小巷而已
唔,好吧
展开
-
【转】利用CSS改变图片颜色的100种方法!
前言“说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。”你以为这些是经过PS软件处理出来的?不不不,纯粹的是用css写出来的,很神奇把。强大的 CSS:filterCSS滤镜(filter)属提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。MDNCSS标准里包含了一些已实现预定义效.转载 2020-10-08 15:03:13 · 1468 阅读 · 1 评论 -
H5 移动端 rem 适配
(function () { var styleN = document.createElement("style"); var width = document.documentElement.clientWidth / 75; styleN.innerHTML = 'html{font-size:' + width + 'px!important}'; document.head.appendChild(styleN); })();将页面分为.原创 2020-08-10 18:03:56 · 133 阅读 · 0 评论 -
js图片选择、预览、压缩
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.原创 2020-08-01 16:58:08 · 245 阅读 · 0 评论 -
内容强制不换行并且自动撑开容器宽度的css
min-width: 60rpx;align-self: baseline;flex-shrink: 0;原创 2020-07-31 09:47:48 · 1925 阅读 · 0 评论 -
uni-app 中利用 Promise 实现 onLaunch 异步回调后执行 onLoad
问题描述app.vue里的onLaunch中如果有异步方法,返回结果可能会在页面的 onLoad 之后,为了让页面的 onLoad 在 onLaunch 之后执行,使用以下解决方案解决方案步骤1在 main.js 中增加如下代码:Vue.prototype.$onLaunched = new Promise(resolve => { Vue.prototype.$isResolve = resolve})步骤2在 App.vue 的 onLaunch 中增加代码 this.$转载 2020-07-30 15:09:40 · 2467 阅读 · 2 评论 -
好用的npm包,随用随记
moment 日期处理http://momentjs.cn/原创 2020-07-18 08:54:55 · 307 阅读 · 0 评论 -
css3渐变色
background-image: linear-gradient(to right, red , yellow);原创 2020-07-13 17:12:20 · 219 阅读 · 0 评论 -
AlloyTouch 移动端触摸滑动解决方案
AlloyTouchnpminstallalloytouchnpm install css3transform安装这俩就可以启动动画了import AlloyTouch from "alloytouch";import Transform from "css3transform";var target = document.querySelector("#div1"); Transform(target, true); new AlloyTouch({.....原创 2020-07-02 03:52:46 · 968 阅读 · 0 评论 -
CSS3动画,2D
2D转换 transform可以控制元素做转换:移动(translate)、旋转(rotate)、缩放(scale)只能设定一次,不会影响到其它元素的位置移动:translate(x,y) / translateX(n) / translateY(n)百分比是相对于自身元素的对行内标签没有效果/* 基本示例 */div { width: 100px; height...原创 2020-01-02 17:02:40 · 237 阅读 · 0 评论 -
uni-app 非允许html富文本格式v-html绑定图片宽度设置
.replace(/\<img/gi, '<img style="width:100%;height:auto" ');原创 2019-11-23 11:59:17 · 1757 阅读 · 0 评论 -
uni-app横向滑动内容自适应宽度的css
.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; /* 主要 ...原创 2019-11-23 10:15:33 · 1790 阅读 · 0 评论 -
Vue项目搭建与依赖安装
保证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文件夹规范...原创 2019-03-18 21:20:43 · 483 阅读 · 0 评论 -
vscode与gitee的连接使用
1、安装git2、全局配置一下gitgit config --global user.name ""git config --global user.email ""git config --global credential.helper store3、拉取:新建一个文件夹,用来拉取已有项目在新建的文件夹中右键打开 Git Bash Here 执行:git clone 仓库...原创 2019-02-28 15:50:29 · 7527 阅读 · 2 评论 -
div文字超出显示省略号
单行限制overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行限制display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;原创 2019-02-28 15:49:09 · 10229 阅读 · 1 评论 -
IOS微信浏览器兼容问题汇总
1、IphoneX底部横线遮挡导航的问题判断设备是否是IphoneX,如果是,则增加底部导航20pxfunction isIPhoneX(fn) { var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isIOS) { ...原创 2019-02-28 15:47:33 · 2769 阅读 · 0 评论 -
icon图标的使用
登录阿里巴巴矢量图标库,选择喜欢图标:http://www.iconfont.cn/将喜欢的图标添加到购物车,然后 下载代码 可以将图标下载到本地,项目中使用会比较舒服。将下载的代码解压到项目中,会有三种图标使用方式:1、symbol引用,可以使用多色图标,但兼容性较差,支持IE9以上及主流浏览器,渲染性能一般2、font-class引用,兼容IE8及以上,语义明确3、unicode引用,兼容效果...原创 2018-03-30 10:39:37 · 2327 阅读 · 0 评论 -
[Layer] layui的弹出层用法记录
为了更方便自己的使用和查找,把常用的代码记录一下,省的老去翻文档了。通用加载提示:layer.msg('加载中...',{icon: 16,time:false,shade:0.6});layer.load(2, { shade: false });完成提示加关闭当前layerlayer.alert('保存成功!', { icon: 1 }, function () { ...原创 2017-11-09 15:41:16 · 6324 阅读 · 0 评论 -
解决IE8下的一些兼容性问题
转自:http://blog.csdn.net/lifeblood123/article/details/526382341.使用meta标签调节浏览器的渲染方式,告诉浏览器用哪种内核渲染,360双核浏览器就是在ie和chrome之间来回切换,帮我们判断使用webkit还是chrome。 使用meta标签来强制IE8使用最新的内核渲染页面,代码如下:meta http-equiv=转载 2018-01-14 10:14:50 · 3294 阅读 · 0 评论 -
21条CSS高级技巧
转自:http://geek.csdn.net/news/detail/202007使用CSS复位CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:* { box-sizing: border-box; margin: 0; padding: 0;}现在元素的 margi转载 2017-06-14 13:58:49 · 214 阅读 · 0 评论 -
纯HTML+CSS+JQUERY的响应式导航
此次纯手工制作了一个基于基础的html+css3+Jquery的响应式导航demo,感觉适合大部分对于响应式导航有需求的项目,也即将使用到我的项目中去。BootStrap中的导航虽然完善,但是不太适合我的项目使用,改过的人应该都知道,不太好改,网上也找了一圈,也没有感觉很适合自己改动的导航,因为需要有子级栏目。(向立凯)没办法,自己写了一个,测试感觉还有点小问题,但是基本不影响,样式什么的原创 2017-03-18 13:04:08 · 791 阅读 · 0 评论 -
float:left的div在屏幕中自适应居中
目标效果是,一排div都有float:left样式,水平排列,并希望它们处于屏幕的中间,办法是在div们的父级div加一个 display:inline-block 样式,父级的父级使用text-clign:center样式就可以了。代码如下:HTML 菜单标题 菜单标题菜单标题 菜单标题原创 2017-03-18 00:31:51 · 7385 阅读 · 0 评论 -
li水平排列居中显示
#bNav { margin-top: 10px; background: #D9EBF5; text-align: center; } #bNav ul { padding: 4px 0; margin: 0;原创 2017-03-17 21:52:07 · 1796 阅读 · 0 评论 -
html屏蔽右键、禁止复制与禁止查看源代码
如何在网页中屏蔽右键 众所周知,要保护一个页面,最基础的就是要屏蔽右键。而现在网页上用得最多的是function click(),即下面这段代码: 〈script〉 function click(){ if(event.button==2){ alert( '本网站欢迎您 !!'); } }转载 2016-09-13 18:37:53 · 425 阅读 · 0 评论 -
HTML中阻止内容被选中的办法
使用div做的按钮等一些小东西,多次点击都会出现蓝色选中状态,使用一下CSS就可以避免此情况:* { -moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none转载 2016-08-04 17:38:51 · 937 阅读 · 0 评论 -
[Jquery.customScrollbar]独立滚动条插件分享
直接复制代码到一个新的页面,跑起来就能看到效果。div模拟的自定义滚动条* { margin: 0; padding: 0;}p { height: 1000px;}#mainBox { width: 400px; height: 500px; border: 1px #bbb solid; position: relative; overflow: hid原创 2016-12-11 17:23:01 · 1562 阅读 · 0 评论 -
javaScript屏蔽鼠标右键,F12及其它审查元素功能
代码加密是一项很头疼的事情,在这记录下一种自我安慰型的“代码加密”方式。 //屏蔽鼠标右键 document.oncontextmenu = function () { return false; } document.onkeydown = function () { var e = window.event |原创 2017-09-23 19:59:56 · 2970 阅读 · 0 评论 -
Layui富文本编辑器图片上传接口(.NET C#)
本来想偷懒找个现成的接口,搜了一下发现没有现成的,那我在这写一个并分享给大家吧。写的.NET C#,需要VS打开或是IIS发布起来才有效果!!!直接打开没效果别找我!!!原创 2017-09-08 14:46:38 · 20267 阅读 · 7 评论 -
css透明度设置(总是忘,记一下)
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是透明度原创 2017-09-08 16:14:51 · 513 阅读 · 0 评论 -
禁止浏览器选中文本(就一句话,总是忘,记一下)
元素添加属性 onselectstart="return false"原创 2017-09-10 10:05:05 · 540 阅读 · 0 评论 -
JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读。本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。文章将分成初级篇和高级篇两部分,分别进行介绍。 初级篇1、三目运算符下面是一个很好的例子,将一个完整的 if 语句,简写为一行代码。const x =转载 2017-10-28 15:10:28 · 184 阅读 · 0 评论 -
HTML+CSS底部footer两种固定方式
网页常见的底部栏(footer)目前有两种:一、永久固定,不管页面的内容有多高,footer一直位于浏览器最底部,适合做移动端底部菜单,这个比较好实现;(向立凯)二、相对固定,当页面内容高度不沾满浏览器高度,footer显示在浏览器底部,且不会出现滚动条,如果页面内容高度超出浏览器高度,footer则相对与内容的最底部,并且自动出现滚动条;(向立凯)废话不多说,可以直接复制代码原创 2017-11-01 11:01:19 · 62138 阅读 · 1 评论 -
div背景图自适应占满
background-image: url(../imgs/footerkuang.png); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%;转载 2018-01-11 16:10:31 · 35300 阅读 · 7 评论 -
Web前端知识体系精简
转自:https://my.oschina.net/u/3531365/blog/979020Web前端技术由html、css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理,对应的每个转载 2017-06-18 14:32:49 · 348 阅读 · 0 评论