2014 年 12月随笔档案 - 清姿

CSS3之阴影

摘要：CSS3中新增属性-阴影，可以做出很多漂亮的效果。文字阴影text-shadowtext-shadow属性值的顺序：text-shadow: h-shadow v-shadow blur color;参数分别表示水平阴影位置，垂直阴影位置，模糊半径，阴影颜色。一个栗子： CSS3阴影 ... 阅读全文

posted @ 2014-12-30 20:11 清姿阅读(1488) 评论(2) 推荐(0) 编辑

CSS3之选择器

摘要：总结了下CSS3新增的一些选择器。CSS3的选择器有基本选择器、属性选择器、伪类选择器几类。CSS3选择器选择器举例例子描述element1~element2p~a选择前面有元素的每个元素。[attrtube^=value]a[src^="http"]选择其 src 属性值以 "https"... 阅读全文

posted @ 2014-12-29 19:28 清姿阅读(273) 评论(0) 推荐(0) 编辑

CSS长度单位

摘要：罗列了CSS中常用的长度单位及比较单位含义em相对于父元素的字体大小ex相对于小写字母"x"的高度rem相对于根元素字体大小px相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸ininch, 表英寸cmcentimeter, 表厘米mmmillimeter, 表毫米pt1/72英寸pc12... 阅读全文

posted @ 2014-12-25 19:54 清姿阅读(979) 评论(0) 推荐(0) 编辑

iphone分辨率

摘要：设备屏幕尺寸分辨率(pt)Reader分辨率(px)渲染后PPIiPhone 3GS3.5吋320x480@1x320x480163iPhone 4/4s3.5吋320x480@2x640x960330iPhone 5/5s/5c4.0吋320x568@2x640x1136326iPhone 64.... 阅读全文

posted @ 2014-12-24 19:19 清姿阅读(157) 评论(0) 推荐(0) 编辑

javascript常用函数

摘要：不使用全局变量返回1 2 3 数组去除重复项去重也可以用数组的indexOf方法来实现：利用查表法也可以实现去重： replace相关：阅读全文

posted @ 2014-12-22 20:04 清姿编辑

js跨域解决方法

摘要：跨域问题常常会遇到。做了一下整理。仅用于主域相同，子域不同的跨域（iframe+设置document.domain）这种情况需要主域相同，即使用同一协议同一端口，且主域相同（例如aa.cnblogs.com和bb.cnblogs.com）.这时可以使用iframe实现跨域，需要将document.d... 阅读全文

posted @ 2014-12-22 19:31 清姿阅读(207) 评论(0) 推荐(0) 编辑

CSS用border绘制三角形

摘要：使用border绘制三角形的思路，就是border尺寸设置一个较大的值，元素自身的宽高设置为0，全部由边线占据，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。一个栗子：效果：如果设置了块的宽高，还是会呈现边线的效果，每个边线将会是一个等腰梯形，类似于相框：效果：利... 阅读全文

posted @ 2014-12-20 16:33 清姿阅读(494) 评论(0) 推荐(0) 编辑

下雪了-js下雪效果

摘要：Jingle Bells,Jingle Bells,圣诞来临，做了一个下雪的小程序玩。有大雪花和小雪花。效果图：转眼又是年末了，又要跨年了。希望新的一年所有愿望可以实现，加油。阅读全文

posted @ 2014-12-18 20:10 清姿阅读(400) 评论(0) 推荐(0) 编辑

LESS笔记

摘要：使用LESS可以简化CSS的书写。 LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。一个简单的例子：@color: #4D926F; ... 阅读全文

posted @ 2014-12-17 21:17 清姿阅读(295) 评论(1) 推荐(0) 编辑

Seajs笔记

摘要：SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS，可以更好地组织 JavaScript 代码。在 SeaJS 的世界里，一个文件就是一个模块。所有模块都遵循 CMD 规范，可以像在 Node 环境中一样来书写模块代码：define(function(require, ex... 阅读全文

posted @ 2014-12-16 20:04 清姿阅读(197) 评论(0) 推荐(0) 编辑

Nodejs笔记（二）

摘要：Nodejs事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列。 Node.js里面的许多对象都会分发事件：一个net.Server对象会在每次有新连接时分发一个事件，一个fs.readStream对象会在文件被打开的时候发出一个事件。所有这些产生事件的对象都是 ev... 阅读全文

posted @ 2014-12-16 19:38 清姿阅读(357) 评论(0) 推荐(0) 编辑

Nodejs笔记（一）

摘要：Node近些日子大火，看样子js大有统一前端后台的趋势... Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度快，性能好。创建HTTP服务器在项目的根目录下创建一个叫 server.js 的文件，并写入以下代码：... 阅读全文

posted @ 2014-12-15 20:04 清姿阅读(1145) 评论(3) 推荐(1) 编辑

输入手机号码时的放大提示

摘要：常用功能，练练手。效果图阅读全文

posted @ 2014-12-13 20:40 清姿阅读(443) 评论(0) 推荐(0) 编辑

CSS常用布局整理（二）

摘要：1-2-1单列变宽布局side列定宽300px，content列变宽，尺寸是100%-300px。核心的问题就是浮动列的宽度应该等于“100% - 300px”，而CSS显然不支持这种带有减法运算的宽度表达方法。但是通过margin可以变通的实现这个宽度。实现的原理为，在content外面再套一个d... 阅读全文

posted @ 2014-12-13 16:06 清姿阅读(850) 评论(0) 推荐(0) 编辑

CSS垂直水平居中方法整理

摘要：CSS定位中常常用到垂直居中，比如覆盖层上的弹框。兼容性比较好的方法：Hello World!这个方法只适用于已知宽高的块，因为要设置负边距来修正。如果是未知尺寸的块，可以使用以下方法：Hello World!原因是，绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的ma... 阅读全文

posted @ 2014-12-11 22:40 清姿阅读(255) 评论(0) 推荐(0) 编辑

CSS常用布局整理

摘要：固定宽度布局1-2-1布局（浮动）固定宽度-float Page Header Page Content 1 This is content.This is content.This is content.This is content.This is co... 阅读全文

posted @ 2014-12-11 19:29 清姿阅读(239) 评论(0) 推荐(0) 编辑

CSS浮动与绝对定位小记

摘要：浮动 float属性可以设置的值为none,left,right.对于设置了浮动的元素，会向其父元素的左侧或右侧紧靠，默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容来确定。浮动可以让一个元素移到它所在行的某一边，使得其他内容沿着该元素的边缘向下流。浮动的盒子会脱离文档流，形成环绕的效果。... 阅读全文

posted @ 2014-12-09 20:09 清姿阅读(1477) 评论(5) 推荐(1) 编辑

prototype原型模式中的问题

摘要：对于每个构造函数来说，都有一个prototype属性。对于每个对象实例来说，都有_proto_属性。参看下面代码：function Person(){}Person.prototype={ name:"Mike", age:18, sayName:function(){ alert(... 阅读全文

posted @ 2014-12-08 19:13 清姿阅读(534) 评论(0) 推荐(0) 编辑

前端江湖之攻与防

摘要：前端安全的话题再次被提及，大到深航东航系统被攻破，乘客信息泄露并被利用，小到一个word-wrap让服务器暴露信息，各种漏洞和攻击无所不在。在前端江湖中，攻击与防守更像是一场漫无硝烟的战争，悄无声息却无时无刻都在进行。前端常见漏洞包括XSS、CSRF及界面操作劫持，服务端如SQL注入等。前端使... 阅读全文

posted @ 2014-12-06 17:22 清姿阅读(445) 评论(0) 推荐(0) 编辑

IE11-IE不再任性了-关于attachEvent

摘要：今天解决了一个IE11的兼容问题，关于attachEvent的。控件是ActiveX的，需要监听一个控件相关的事件。蓦然发现attachEvent在IE11不支持了...attachEvent不是IE专有的么？是啊,这是IE专属呃，这么多年，不离不弃。IE的attachEvent不支持捕获阶段的... 阅读全文

posted @ 2014-12-03 20:04 清姿阅读(9958) 评论(2) 推荐(2) 编辑

网页性能优化的点点

摘要：前端优化再次被提起，高性能网站总是会得到用户的肯定，加载时间短，友好的界面交互，最少的资源占用，容易被搜索引擎抓取。就自己可以接触到的范围，记录些优化的点点滴滴。 1.减少HTTP请求：每个HTTP请求会产生额外负担，下载一个100K的文件比下载4个25K的文件要快。使用外部的css和js文... 阅读全文

posted @ 2014-12-02 20:20 清姿阅读(449) 评论(1) 推荐(0) 编辑

响应式设计的点点

摘要：移动web已经是大势所趋，所占份额迅猛增加。如果没有足够时间和精力做一套完全全新的移动端程序，那么，响应式设计也许是个不错的选择。不过，如果有条件并且需要移动端网页，移动端的很多优势还是不可替代的，比如定位功能。响应式设计，使得可以使用同一网站在智能手机、电脑及其他设备上完美显示。它可以根据用户... 阅读全文

posted @ 2014-12-02 19:30 清姿阅读(191) 评论(0) 推荐(0) 编辑

html5相关

摘要：1.语义化标签： header\section\aside\footer 2.音视频播放： video\audio 其中video支持ogg\mpeg4\webm格式的视频； 3.canvas 一.画矩形：1 function draw(){2 var canvas = document.ge... 阅读全文

posted @ 2014-12-01 20:04 清姿阅读(184) 评论(0) 推荐(0) 编辑