- 博客(27)
- 收藏
- 关注
RSS订阅转载 浅谈css的预编译---less语言
正如各位所知道的一样，css是一门标记性语言，语法相对简单，对使用者的要求也比较低 。不过不知道友友们有没有发现，在使用css的时候需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于一些缺乏css编写经验的猿猿来讲，写出组织良好且易于维护的 CSS 代码是相当困难的一件事情。这个时候呢，悄悄地告诉你们，咱们的程序员蜀黍是无所不能的，针对这个调皮的css，专门开发了less语言。...
2019-04-26 09:50:24
942
原创 css浏览器兼容问题
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： 相
2017-05-25 09:30:44
310
原创 使用tspan元素给SVG文本添加样式、定位
tspan元素你可以把元素当成SVG文本的span。你可以用来包裹SVG文本，来对它们做整体控制，关于显示和定位，文本片段之间的相互关系等。我们从一个简单的示例开始。 SVG SVG 这里大多数的代码对你来说应该是熟悉的，在阅读了前面两篇文章之后。我创建了一个元素，定义了SVG视窗的尺寸，添加了一个红
2017-05-09 16:27:33
6428
原创 enter键登录提交
第一种方法： Check Scorefunction keyLogin(){ if (event.keyCode==13) //回车键的键值为13 document.getElementByIdx_x("input1").click(); //调用登录按钮的登录事件} 第二种方法： functi
2017-04-06 15:01:20
564
转载 文本超出换行.....
P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果，但是最近的项目中发现，使用ajax加载数据之后，p标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，但是并没有发现本质原因，本质在于，我当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。 先给出各种方式，再具体介绍每一个属性。 强制不换行 p { white-sp
2017-03-28 10:17:31
18358
转载 Javascript 中 apply、call、bind
apply、call在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。先来一个栗子：
2017-02-15 13:56:19
269
原创 css3 placeholder的字体颜色设置
1. 因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定 ::-webkit-input-placeholder { /* WebKit browsers */ color:#999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#999; }
2017-02-10 13:50:04
5923
转载 css firefox下的兼容问题
1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加
2017-02-04 10:40:15
528
原创 rem的使用
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别呢？在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“
2016-12-29 14:01:23
828
转载 看看机智的前端童鞋怎么防盗
很多开发的童鞋都是只身混江湖、夜宿城中村，如果居住的地方安保欠缺，那么出门在外难免担心屋里的财产安全。事实上世面上有很多高大上的防盗设备，但对于机智的前端童鞋来说，只要有一台附带摄像头的电脑，就可以简单地实现一个防盗监控系统~纯 JS 的“防盗”能力很大程度借助于 H5 canvas 的力量，且非常有意思。如果你对 canvas 还不熟悉，可以先点这里阅读我的系列教程
2016-12-27 15:42:04
655
转载 天猫双十一狂抢优惠券？机智的程序猿这么玩
一年一度的光棍节又快到了，天猫早已迫不及待放出双11优惠券认领页面，用户可以在该页面领取心怡店家的优惠券，不过存在手慢会被抢完的情况。然后是在群里看到了这样的一段代码，说是把它粘贴到控制面板上执行就能自动帮你领掉页面上的优惠券，我瞧了下没有啥漏洞代码段就试了试，好家伙还真的生效了：(function(window, document, undefined) { var
2016-12-27 15:29:53
9494
4
转载 支付宝AR抢红包？前端轻松就破解~
近期阿里搞了各LBS+AR实景的红包玩法，小伙伴们在公司里都玩疯了~有时候为了抢一个红包，会跑到另一个地方去拍照，虽然略麻烦，但整体的互动还是很有意思的。不过对于机智的前端童鞋来说，只需要简单的一段代码就能破解AR红包（当然成功率也不是100%）。破解原理见《上线仅一天：支付宝AR红包惨遭技术流破解》，感谢这位设计师童鞋。我们要做的事情其实很简单 —— 把系
2016-12-27 15:19:16
551
原创 Bootstrap实现表格复选框全选
最近在做一个后台页面，全部使用的Bootstrap，在此记录一下全选单选的做法。效果图：主要代码如下（正常表格布局）：$(function(){ function initTableCheckbox() { var $thr = $('table thead tr'); v
2016-04-06 11:58:40
10263
3
转载 jquery-validation 使用
jquery-validation 使用 一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassistance.de/api-browser/plugins.html 当前版本：1.5.5 需要JQuery版本：1.2.
2016-04-05 10:52:00
370
转载 360浏览器全球首家支持“内核自主控制”功能
当前，国内的主流浏览器软件多数都采用“双核”的架构设计(IE内核+Chrome内核)，以应对不同的用户需求。但是，部分网站只针对IE6、IE7等特定浏览器内核进行设计，如果换用其他浏览器内核就会出现严重的兼容性问题。此外，为了让代码兼容多套浏览器内核，网站工程师需要花费成倍的时间和精力。现在，这一状况可能将会成为历史，360浏览器成为全球首家支持“内核自主控制”功能的产品。
2016-04-02 14:03:33
554
原创 hellow mui 引导页的实现
html> head> meta charset="utf-8"> title>Hello MUItitle> meta name="viewport"content="width=device-width, initial-scale=1,maximum-scale=1,user-
2016-03-19 10:17:55
3565
转载 HTML5之FileReader的使用
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：1.检测浏览器对FileReader的支持[javascript] view plainco
2016-03-17 17:23:46
445
原创 HTML5 FileReader
一、FileReader读取文件内容 File API一文中主要介绍获取文件句柄的方法，接下来我们就要利用该文件句柄来读取文件内容，这是通过FileReader来实现的，通过FileReader接口，我们可以异步地将文件内容加载到内存中，赋予某个js变量。 FileReader具体支持哪些方法和事件，这里就不介绍了，有兴趣的可以去w3c官网上看看FileReader
2016-03-17 17:21:06
442
转载 H5图片压缩与上传
一、简介图片的压缩与上传，是APP里一个很常用的功能。我们来年看 ChiTuStore 是怎样做的。相关文件 App/Module/User/UserInfo.html,App/Module/User/UserInfo.ts 二、HTML布局HTML 文件中，有如下二句，第一句就是上图所看到的图片，其中的 class 表示该图片以圆形来显示，并且靠右。第二句
2016-03-17 17:16:27
1777
原创 css属性之text-indent下图片也缩进的处理
定义text-indent 属性规定文本块中首行文本的缩进。注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。说明：用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。值描述length定义固定的缩进。默认值：0。%
2016-03-17 09:33:13
3758
3
原创 Firefox，火狐about:config设置详解
1、accessibility.accesskeycausesactivationaccesskey 允许用户通过Alt+ accesskey的方法来打开页面中的超链接。其中的accesskey需要网页编写者预先定义好，并且不能与浏览器的快捷键相冲突。比如，常见的 Alt+q.当该值设置为true时，浏览支持accesskey的网页，可以使用Alt+q打开定义好的特定链接；设为false时
2016-02-29 14:15:25
20282
原创 锚点的使用
1、使用id定位： 锚点1 注：这样的定位可以针对任何标签来定位。 2、使用name定位： 锚点5 内容 注：使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。 3、使用js定位
2016-02-20 16:02:22
511
原创 jQuery初学知识点总结（二）
一、动画效果的实现1.显示与隐藏， 若无参数则 不具有动画效果 show(speed,callback) - 显示，speed - 设置动画执行的时长,单位为毫秒，callback - 当动画执行完毕后执行的函数； 例如$("div").show('slow',function(){alert('xxx');}) hide(speed,callback) - 隐藏，spee
2015-11-16 13:53:47
425
原创 初学jQuery，知识点总结(一)
一、基本概念在学jQuery之前，首先得了解JavaScript类库的概念：javascript类库,简称为JS库，是指被封装好的Javascript函数，其中预定义了很多对象和函数，其特点是可以直接在程序中进行调用，并且兼容各大浏览器，目的就是为了简化javascript的开发。jQuery其实就是一个JS文件，它能够使用户的html页面保持代码和html内容分离，也就是说，不用
2015-11-16 12:10:52
504
原创 HTML5提供的拖拽功能
HTML5中要实现拖拽效果需要两个元素，即需要拖拽的文件和要拖拽到哪里去，我们把需要拖拽的文件称之为源元素，要拖拽到的地方称为目标元素。源元素事件有3个：1. dragstart 当鼠标开始拖放时被触发； 2. drag 当鼠标拖放过程中被触发,类似于mousemove事件
2015-11-14 08:57:11
881
原创 HTML5存储系统
html5中的存储系统包括了两种存储方式：sessionStorage和localStorage。两种存储系统的操作方法相同，他们之间的区别在于：sessionStorage存储系统存储数据的特点 1. 当浏览器窗口关闭时,数据全部丢失 2.当再次打开浏览器窗口时,数据不能使用localStorage存储系统存储数据的特点 1.当浏览器窗
2015-11-13 18:32:40
303
原创 如何使用canvas实现多个随机圆运动
此段代码使用canvas画布实现多个圆形自上向下滑落，圆的大小及颜色随机，背景图片可根据自己的喜好更换，只需将大小与画布大小统一即可。文章下附有效果图 id="canvas"width="493px"height="332px"><scripttype="text/javascript"> var canvas=document.getElement
2015-11-13 09:13:00
5546
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人