月度归档:2015年08月

css编码规范

声明顺序

相关的属性声明应该以下面的顺序分组处理:

  1. Positioning
  2. Box model 盒模型
  3. Typographic 排版
  4. Visual 外观

Positioning 处在第一位,因为他可以使一个元素脱离正常文本流,并且覆盖盒模型相关的样式。盒模型紧跟其后,因为他决定了一个组件的大小和位置。

其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响,所以他们排在后面。

关于完整的属性以及他们的顺序,请参考 Recess

 

 

[css]
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;

/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

/* Misc */
opacity: 1;
}
[/css]

参考:http://zoomzhao.github.io/code-guide/#html-syntax

JavaScript 中,定义函数时用 var foo = function () {} 和 function foo() 的区别

之前一只搞不懂这个到底是怎么回事。现在看了卢伊的答案,自己总结一下。

[js]
//
//方法一

var foo = function(){

//code

}

//方法二

var function(){

//code

}
//
[/js]

使用第一种方法:

[js]
//
var FUNCTION_NAME = function(){  //code  }
//
[/js]

为  匿名函数  。使用匿名函数,编译以后变量声明FUNCTION_NAME会”被提前”,但是他的 赋值 (也就是code)并不会被提前。只有在调用的时候才会被初始化。

 

如果使用第二种方法:

[js]
//
function FUNCTION_NAME(){//code}
//
[/js]

这种方式,编译后函数声明和他的赋值都回被提前。

整个函数声明过程在整个执行前就完成了。所以只要处于同一个作用域,就可以访问到,即使在定义之前调用它也可以。

 

 

 

 

参考:

http://www.zhihu.com/question/19878052

http://www.bootcss.com/article/variable-and-function-hoisting-in-javascript/
http://bonsaiden.github.io/JavaScript-Garden/zh/#function    js秘密花园

css3学习小结1

CSS属性,并列出是否支持CSS动画:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

自己做一个小结~

[css]
.ball {
animation-name: ballmove;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-delay: 1s;
animation-fill-mode: both;
}

@keyframes ballmove {
0% {
transform: translateX(100px) rotate(0);
}
20% {
transform: translateX(-10px) rotate(-0.5turn);
}
100% {
transform: translateX(450px) rotate(2turn);
}
}
[/css]

W3C目前定义的简写顺序是这样的:

[css]
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animationiteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
[/css]

例子:

[css]
animation: myAnimation 1s ease-in-out 2s 4, myOtherAnimation 4s ease-out 2s;
[/css]

2015-08-23 14:51:49屏幕截图

详细:http://www.w3school.com.cn/css3/css3_animation.asp

其他参考:http://www.w3cplus.com/css3/CSS3-animation.html

Sublime Text 3 配置以及使用 –ubuntu版本

sublime text 3 安装以及配置

安装sublime

http://www.sublimetext.com/3

进去下载。然后安装。

之后安装包配置

https://packagecontrol.io/installation  包配置地址

[js]

import urllib.request,os,hashlib; h = ‘eb2297e1a458f27d836c04bb0cbaf282’ + ‘d0e7a3098092775ccb37ca9d6b2e4b7d’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

[/js]

复制。之后打开sublime

使用快捷键 ctrl+`

然后将上面的代码复制输入进去回车。【上面的代码可以去上面给出的地址上复制】

重启下sublime。打开sublime-preferences-package control 如有出现了这个就是安装成功了。

之后就是安装插件啦。

如果你懒得安装可以直接用我的备份包

先进去下载  链接: http://pan.baidu.com/s/1rxWKI 密码: 9kbr

看情况下载里面的压缩包

sublime-text-3-backup.tar.gz       —linux 用户

sublime-text-3-backup.zip            —win平台用户

会得到两个文件夹

安装方法打开 sublime  然后找到菜单栏 preference – Browse package-返回上一级目录(sublime-text-3)把刚才解压得到的两个文件夹复制替换进去,然后重启sublime text3

如果你想手动安装

我给出一个插件列表

经过上面安装了Package Control后,我们就可以通过快捷键 Ctrl+Shift+P 打开Package Control来安装插件了。在打开的输入框中输入 install ,会根据你的输入自动提示,选择 Install Package。

(主要针对PHP开发,其他语言大部分通用,请读者自行选择,可以安装一下插件)

1、ConvertToUTF8  支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件

2、Bracket Highlighter  用于匹配括号,引号和html标签。对于很长的代码很有用。安装好之后,不需要设置插件会自动生效

3、DocBlockr  DocBlockr可以自动生成PHPDoc风格的注释。它支持的语言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++

4、Emmet(Zen Coding)  快速生成HTML代码段的插件,强大到无与伦比,不知道的请自行google

5、SideBar Enhancements  这个插件改进了侧边栏,增加了许多功能

6、Themr  主题管理,切换主题的时候,不用自己修改配置文件了,用这个可以方便的切换主题

 

感谢:http://www.cnblogs.com/bananaplan/p/sublime-text-3-powerful.html

安装 SublimeText3 汉化包

运行SublimeText3 点击 Preferneces -> Browse Packages 会打开 X:\Program Files\Sublime Text\Data\Packages 目录,点击向上并找到X:\Program Files\Sublime Text\Data\Installed Packages目录,从附件中下载汉化包并解压,复制Default.sublime-package到这个目录,无需重启即可直接看到汉化效果。

 

转自:http://www.xiumu.org/note/sublime-text-3.shtml

SublimeText3 快捷键

Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)
Ctrl+G 跳转到相应的行
Ctrl+J 合并行(已选择需要合并的多行时)
Ctrl+L 选择整行(按住-继续选择下行)
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+T 词互换
Ctrl+U 软撤销
Ctrl+P 查找当前项目中的文件和快速搜索;输入 @ 查找文件主标题/函数;或者输入 : 跳转到文件某行;
Ctrl+R 快速列出/跳转到某个函数
Ctrl+K Backspace 从光标处删除至行首
Ctrl+KB 开启/关闭侧边栏
Ctrl+KK 从光标处删除至行尾
Ctrl+KT 折叠属性
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+K0 展开所有
Ctrl+Enter 插入行后(快速换行)
Ctrl+Tab 当前窗口中的标签页切换

Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+D 复制光标所在整行,插入在该行之前
ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
Ctrl+Shift+K 删除整行
Ctrl+Shift+L 鼠标选中多行(按下快捷键),即可同时编辑这些行
Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
Ctrl+Shift+P 打开命令面板
Ctrl+Shift+/ 注释已选择内容
Ctrl+Shift+↑可以移动此行代码,与上行互换
Ctrl+Shift+↓可以移动此行代码,与下行互换
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+Shift+Enter 光标前插入行
Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换

Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+F2 设置书签
Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
Ctrl+鼠标左键 可以同时选择要编辑的多处文本

Shift+鼠标右键(或使用鼠标中键)可以用鼠标进行竖向多行选择
Shift+F2 上一个书签
Shift+Tab 去除缩进
Alt+Shift+1~9(非小键盘)屏幕显示相等数字的小窗口

Alt+. 闭合当前标签
Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑

Tab 缩进 自动完成
F2 下一个书签
F6 检测语法错误
F9 行排序(按a-z)
F11 全屏模式

 

sublime text3 配置自动换行

 

 

 

preference-设置-用户

加入 “word_wrap”: true 这句

加之前 记得 “]”后面加个”,”

{
“color_scheme”: “Packages/User/SublimeLinter/Monokai (SL).tmTheme”,
“font_size”: 12,
“ignored_packages”:
[
“Vintage”
],
“word_wrap”: true
}

 

 

 

 

 

Emmet html/CSS快速编辑(原名Zen Coding)使用方法

 

E#name

 

div#name

<div id="name"></div>

E.name

 

div.name

<div class="name"></div>

div.one.two

<div class="one two"></div>

div#name.one.two

<div id="name" class="one two"></div>

E>E

 

head>link

<head>
    <link/>
</head>

table>tr>td

<table>
<tr>
    <td></td>
</tr>
</table>

ul#name>li.item

<ul id="name">
    <li class="item"></li>
</ul>

E+E

p+p

<p></p>
<p></p>

div#name>p.one+p.two

<div id="name">
    <p class="one"></p>
    <p class="two"></p>
</div>

E[attr]

Added in v0.6

p[title]

<p title=""></p>

td[colspan=2]

<td colspan="2"></td>

span[title="Hello" rel]

<span title="Hello" rel=""></span>

E|filter

Added in v0.6

p.title|e

&lt;p class="title"&gt;&lt;/p&gt;

Read Filters for more info

E*N

 

p*3

<p></p>
<p></p>
<p></p>

ul#name>li.item*3

<ul id="name">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

E*N$

p.name-$*3

<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>

select>option#item-$*3

<select>
    <option id="item-1"></option>
    <option id="item-2"></option>
    <option id="item-3"></option>
</select>

E+

ul+

<ul>
    <li></li>
</ul>

table+

<table>
<tr>
    <td></td>
</tr>
</table>

dl+

<dl>
    <dt></dt>
    <dd></dd>
</dl>

使用console输入div的高度

在chrome的console里面输出你需要的div的高

需要引用JQ.mini.js可以在本地引用,也可以CDN引用

1
2
3
4
5
6
7
8
9
10
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>   
$(document).ready(function(){
        console.log("nav-height" + $(window).height());
        console.log(".nav:" + $(".nav").height());  
        console.log("nav:" + $("nav").height());  
        console.log("div3-height:" + $("#div3").height());  
    });
    </script>