首先请下载YUI Compressor，YUI Compressor是个Java库，你需要安装Java的运行环境，请点这里下载。（关于Java环境的配置请大家自行google，另外YUI Compressor是github的链接，应该被墙了，请自备爬梯工具）。

新建一个批处理文件，代码如下：

@echo off
if "%1" == "" goto exit
if "%2" == "" goto exit
pushd "%1"
echo 正在压缩Css文件
for /r %%i in (*.css) do call "D:\Program Files\Java\jre\bin\java.exe" -jar G:\tools\yuicompressor-2.4.7.jar -o %%i %%i
echo 正在压缩js文件
for /r %%i in (*.js) do call "D:\Program Files\Java\jre\bin\java.exe" -jar G:\tools\yuicompressor-2.4.7.jar -o %%i %%i
::call "D:\Program Files\7-Zip\7z.exe" a %2.7z -r PackageTmp
pause
:exit
exit

 批处理的第一个参数接收项目生成部署包的路径，vs默认路径是：\obj\Release，第二个参数是生成压缩包的名字（这里是生成的7z的压缩包，如果需要生成，请把call那行的注释去掉）。

然后就是编辑你的项目文件，比如Test.csproj，打开它，在根路径下添加如下代码：

<Target Name="Compressor" BeforeTargets="Package" Condition="'$(ConfigurationName)'=='Release'">
 <Message Text="Starting Compress Javascript Files and Css Files" />
 <Exec Command="call F:\Users\Documents\Compressor.bat $(ProjectDir)obj\$(ConfigurationName)\Package\ $(ProjectName)" />
</Target>

稍微解释下这段代码，BeforeTargets="Package"是在打包Web文件前调用压缩，Condition="'$(ConfigurationName)'=='Release'"，只有Release模式下才压缩，你不会想一边Debug一边压缩js和css文件吧。Command命令中，请自行替换刚才建立的批处理文件的路径，$(ProjectDir)是项目路径，$ConfigurationName是当前的生成配置，$ProjectName是项目名称。

现在在项目上右击，生成部署包，然后看看js和css文件是不是都已经压缩了呢？

目前市场上比较常见的一些GUI编辑器的产品：Sublime、Notepad++、Atom、H5 Builder、Brackets等等，包括终端下的Vim、Emacs等等，都是这个vscode的竞品。

首先明确一下，这个Visual Studio Code（以下简称vscode）是一个带GUI的代码编辑器，也就是只能完成简单的代码编辑功能，并不是一个集成开发环境（IDE）。而Visual Studio、WebStorm这类的开发工具是IDE，功能强大，这两个是不一样的概念。

总结四点特性：

1. 免费
2. 用户体验细节好，IDE版的智能特性
3. 流畅，完全不卡
4. 一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代web和云应用的跨平台编辑器

推出这个vscode对微软来说，就是标志着他们要开始席卷了，先让你们用上这种编辑器再说。当然对开发者来说，不管喜不喜欢用，反正不花钱多了一个选择，挺好的。

如何安装？

Linux下：

wget http://download.microsoft.com/download/0/D/5/0D57186C-834B-463A-AECB-BC55A8E466AE/VSCode-linux-x64.zip
//注意不要使用归档解压会报错
unzip  unzip VSCode-linux-x64 -d VS
//双击VS里的Code就能运行了

window下：

进入官网主页：https://code.visualstudio.com/ 点击下载安装即可。

体验一番：

特性

智能提示

VSCode提供了强大的自动补全、悬浮提示、定义跳转等功能，支持以下语言：

C++, jade, PHP, Python, XML, Batch, F#, DockerFile, Coffee Script, Java, HandleBars, R,Objective-C, PowerShell, Luna, Visual Basic, Markdown

我测试了下在Javascript、Typscript上体验不错，HTML还支持Angular标签，悬浮提示很详细包括了注解，但是试了下C#貌似没有什么效果，不知道是不是需要特殊的环境。不管怎样，在某些语言上的智能提示已经比其他的同类编辑器已经强太多了，可以和一些IDE媲美。

下面贴几张官网的示例图片:

参数提示：

定义跳转：

引用提示：

方法定位：

还有其他很酷炫的功能我没测试，大家官网看吧。

Markdown

在Linux桌面上，好用的Markdown编辑器可以说没有，ReText和记事本一样简陋，Sublime Text3虽然可以装插件支持，但是体验不是很好，不支持中文。因此我一直使用的在线Markdown代替。

这回VSCode支持Markdown重新让我看到了点希望。快捷键ctr+shift+v预览，可以看到这个布局还是非常人性化的。

但是缺点也很明显，首先中文支持不好，编辑器里的中文输入可以改，但是预览还是出现口口，目前找到解决方法。还有不支持快捷键输入，那种像写代码般的快感没有了。没有能自定义CSS的功能，不管在哪种Theme下，> 代码高亮都看不出有什么效果。

版本控制

自带了一个git工具，并且放在了一个比较显要的位置上，不过功能不是很全，只能commit等几个操作。自带了类似于git diff的文件比较功能：

Debug

Debug需要MONO，所以就没进行测试。详情大家看官网吧。

缺陷

中文支持

默认的字体是不支持中文的，输入中文的时候会出现口口。需要设置一下字体，我使用的是文泉驿，思源也行。

没安装的首先安装这个字体。

sudo apt-get install fonts-wqy-microhei fonts-wqy-zenheiFile -> Preference -> User Settings//在右侧添加一句："editor.fontFamily": "WenQuanYi Micro Hei Mono"

不过这只能解决编辑器内的中文乱码问题，其他的比如标题栏，markdown预览，该口的还是口。对了还有一点需要注意的是输入法需要是Fctix或者基于Fctix的。

Sublime Text3同样有这问题，事实上Sublime Text3全平台对于中文的支持都不是很好。

插件化

不过插件化已经提到议程上了，以微软的实力实现这个不难。

Markdown

缺陷在上面已经提到了

设置

用户设置是直接以JSON形式出现了，虽然说鼠标悬浮上去会看到详细的解释，但还是没有图形化来的简便，而且没有搜索的功能，想要搜索还得以文本的形式复制出来，修改起来略费劲。

 Web Essentials是目前为止见过的最好用的VS扩展工具了，具体功能请待我一一道来。

首先，从Extension Manager里安装，或者从这里选择针对不同VS版本的下载：https://visualstudiogallery.msdn.microsoft.com/site/search?query=Web%20Essentials&f%5B0%5D.Value=Web%20Essentials&f%5B0%5D.Type=SearchText&ac=2

然后重启你的VS开发环境，就可以使用它提供的方便功能了。

Web Essentials对CSS、JavaScript和HTML都提供了很多快捷的功能支持，具体列表如下：

CSS

即时预览Live Web Preview
每次修改的时候，都可以使用CTRL+ALT+Enter快捷键或者点击方案右键上的Live Web Preview选项来即时预览你修改的页面，每次修改完 HTML或者相应的CSS， Ctrl+S保存以后，即时窗口会立即生效。

兼容性CSS代码生成
很多CSS3的代码都不兼容，不同的浏览器有不同的语言，使用此扩展可以通过提升的方式自动添加特殊的CSS标记，例如-moz, -webkit, -ms and -o开头的一些CSS，也只可以选择特定的浏览器。

生产的代码结果如下：

如果你已经添加了一部分的话，该扩展会只添加除这部分之外的CSS代码，不会重复添加的。

上下箭头可以改变数字值

当你把键盘提示符放在数字上或者数字后面的话，例如5px, 25%, 0.6em, 23等，可以使用CTRL+UP或者CTRL+DOWN来增加或减小数值。

支持CSS, SaSS, LESS和JavaScript文件

可以生产Base64格式的字符串代替URL地址

如果你通过url来引用背景图的话，那可以直接通过该扩展提供的Embed resource as base64功能将引用转换成base64格式的。

如果嫌内容太长，可以使用折叠功能。

支持快捷键注释和反注释代码

可以使用CTRL+K, CTRL+C注释或CTRL+K, CTRL+U反注释代码，和VS里C#编程使用的快捷键一样。

TODO注释特殊支持

任何注释如果包括TODO关键字的话，都会在左边显示一个灰色的特殊标记，来提示你该部分暂未完成。

颜色预览

鼠标移动到颜色上的时候，可以预览改颜色，或者在CSS编辑器里也能直接预览颜色

字体预览

图片预览

折叠功能

需要一个生命的选择器，右键可以看到Surround With Region即可将这段代码进行折叠起来。

功能选择以后，它会自动定位到默认的 MyRegion名称那里，让你修改自己的折叠大纲的名称。

字符排序

点击任意选择器的时候，都可以让该选择器的CSS定义进行排序

括号匹配

目前支持{}，[]， ()的匹配。

压缩代码

该扩展使用的 AjaxMin library来压缩CSS代码的。

代码折叠

支持拖拽

支持图片和字体的拖拽，例如如果你拖拽tomxu.jpg图片到该CSS选择器，那么将自动生成如下代码（字体也是类似）:

background-image: url('../tomxu.jpg');

颜色可以在十六进制、rgb、和名称直接互相转换

可以在选择器上定义只支持哪些浏览器版本

可以在CSS语法定义只支持哪些浏览器版本

JavaScript

支持Region折叠

//#region MyRegion

function Example() {

}

//#endregion

支持代码折叠

括号匹配

目前支持{}，[]， ()的匹配。

同词高亮

在一个文件的所有代码中，如果选择一个变量，那该代码中所有相同的变量都会高亮显示，和C#里一样。

压缩代码

使用AjaxMin library进行了压缩代码，不仅压缩了，还使用了混淆，牛!

快捷添加文件

在解决方案里，添加新项的时候，可以直接选择添加JavaScript文件还是Stylesheet文件，方便！

HTML

支持用户控件的拖拽

以前我们在asp.net webform开发的时候，直接用鼠标将user control拖拽到aspx页面或者模板容器的时候都会自动生成a连接，使用此扩展以后，将会自动注册命名控件，然后生成带有<uc:name/>的代码，可以直接使用咯。

支持Video和Audio文件的拖拽

也支持对音频和视频文件的拖拽。

转载自：http://www.cnblogs.com/tomxu/archive/2011/11/22/2258849.html

一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法----简写法。

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:

基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。

Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。

先安装到一个编辑器上

Emmet是一个编辑器插件，官方网站提供多编辑器支持。我一般使用Sublime，下面就以Sublime插件举例。

假设你已经按照了Sublime Text 3，如图查看是否有Emmet？   菜单：Preferences>Package Settings>Emmet

如果没有这个Emmet，没关系，不要着急，先下载一个：Emmet（Emmet为大部分流行的编辑器都提供了安装插件 这里选择Sublime Text），把下载好的解压缩后，复制emmet-sublime-master文件夹，找到Sublime Text的安装目录，比如：D:\Camnpr\FEEditor\Sublime Text 3\Data\Packages  粘贴到此处，就可以了。再去看看上边的图，有Emmet了吗？

如何使用Emmet的功能？

先在Sublime里新建一个html页面，里边是空空的，接下来输入：html:5 按下tab键或者按ctrl+e，是不是发生了神奇的事情？

结果如下：

 <!DOCTYPE html>
　　<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　</head>
　　<body>
　　
　　</body>
　　</html>

那么Emmet的快捷键都有哪些？

展开缩写–Tab或Ctrl + E

互动“展开缩写“Ctrl + Alt + Enter

匹配标签对外向–?D（MAC）/ Ctrl +，（PC）

匹配标签对内向–?J / Shift + Ctrl + 0

去匹配对–??T /按Ctrl + Alt + J

用缩写-?W / Shift + Ctrl + G包

去编辑点按Ctrl + Alt + Ctrl + Alt +←→或

–??选择项目。或??，/ Shift + Ctrl +。或Shift + Ctrl +，

切换评论??/ Shift + Ctrl + /

分/合标签??/ Ctrl +转移+ `

移除标签–?/ Shift + Ctrl +；

更新图像尺寸??我/ Ctrl + U

评估的数学表达式??Y / Shift + Ctrl + Y

反映CSS值–??R / Shift + Ctrl + R

编码/解码图像数据：URL–??D / Ctrl + '

重命名标签–??K / Shift + Ctrl + '

Emmet支持的简写规则，类似于CSS选择器（大写的E代表一个HTML标签）

1. E 代表HTML标签。
2. E#id 代表id属性。
3. E.class 代表class属性。
4. E[attr=foo] 代表某一个特定属性。
5. E{foo} 代表标签包含的内容是foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同级元素。
8. E^N 代表N是E的上级元素。

1. !!! 5 代表 <!DOCTYPE html>
2. %E 代表HTML标签。
3. %E#id 代表id属性。
4. %E.class 代表class属性。
5. %E(attr="xxx") 代表某一个特定属性。
6. %E XXX 代表插入标签的内容。
7. %E %N 代表N是E的子元素。N如果写在第二行，需要缩进。

那么上边的这些规则怎么用呢？看下边的示例：

Emmet的语法及使用示例：

后代：>

缩写：nav>ul>li

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

兄弟：+

缩写：div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

上级：^

缩写：div+div>p>span+em^bq

<div></div>
<div>
 <p><span></span><em></em></p>
 <blockquote></blockquote>
</div>

缩写：div+div>p>span+em^^bq

<div></div>
<div>
 <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
分组：()

缩写：div>(header>ul>li*2>a)+footer>p

<div>
 <header>
 <ul>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 </ul>
 </header>
 <footer>
 <p></p>
 </footer>
</div>

缩写：(div>dl>(dt+dd)*3)+footer>p

<div>
 <dl>
 <dt></dt>
 <dd></dd>
 <dt></dt>
 <dd></dd>
 <dt></dt>
 <dd></dd>
 </dl>
</div>
<footer>
 <p></p>
</footer>
乘法：*

缩写：ul>li*5

<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
自增符号：$

缩写：ul>li.item$*5

<ul>
 <li class="item1"></li>
 <li class="item2"></li>
 <li class="item3"></li>
 <li class="item4"></li>
 <li class="item5"></li>
</ul>

缩写：h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

缩写：ul>li.item$$$*5

<ul>
 <li class="item001"></li>
 <li class="item002"></li>
 <li class="item003"></li>
 <li class="item004"></li>
 <li class="item005"></li>
</ul>

缩写：ul>li.item$@-*5

<ul>
 <li class="item5"></li>
 <li class="item4"></li>
 <li class="item3"></li>
 <li class="item2"></li>
 <li class="item1"></li>
</ul>

缩写：ul>li.item$@3*5

<ul>
 <li class="item3"></li>
 <li class="item4"></li>
 <li class="item5"></li>
 <li class="item6"></li>
 <li class="item7"></li>
</ul>
ID和类属性

缩写：#header

<div id="header"></div>

缩写：.title

<div class="title"></div>

缩写：form#search.wide

<form id="search" class="wide"></form>

缩写：p.class1.class2.class3

<p class="class1 class2 class3"></p>
自定义属性

缩写：p[title="Hello world"]

<p title="Hello world"></p>

缩写：td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

缩写：[a='value1' b="value2"]

<div a="value1" b="value2"></div>
文本：{}

缩写：a{Click me}

<a href="">Click me</a>

缩写：p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>
隐式标签

缩写：.class

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

缩写：em>.class

<em><span class="class"></span></em>

缩写：ul>.class

<ul>
 <li class="class"></li>
</ul>

缩写：table>.row>.col

<table>
 <tr class="row">
 <td class="col"></td>
 </tr>
</table>
HTML

所有未知的缩写都会转换成标签，例如，foo → <foo></foo>

缩写：!

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

</body>
</html>

缩写：a

<a href=""></a>

缩写：a:link

<a href="http://"></a>

缩写：a:mail

<a href="mailto:"></a>

缩写：abbr

<abbr title=""></abbr>

缩写：acronym

<acronym title=""></acronym>

缩写：base

<base href="" />

缩写：basefont

<basefont />

缩写：br

<br />

缩写：frame

<frame />

缩写：hr

<hr />

缩写：bdo

<bdo dir=""></bdo>

缩写：bdo:r

<bdo dir="rtl"></bdo>

缩写：bdo:l

<bdo dir="ltr"></bdo>

缩写：col

<col />

缩写：link

<link rel="stylesheet" href="" />

缩写：link:css

<link rel="stylesheet" href="style.css" />

缩写：link:print

<link rel="stylesheet" href="print.css" media="print" />

缩写：link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

缩写：link:touch

<link rel="apple-touch-icon" href="favicon.png" />

缩写：link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

缩写：link:atom

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

缩写：meta

<meta />

缩写：meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

缩写：meta:win

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

缩写：meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

缩写：meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7" />

缩写：style

<style></style>

缩写：script

<script></script>

缩写：script:src

<script src=""></script>

缩写：img

<img src="" alt="" />

缩写：iframe

<iframe src="" frameborder="0"></iframe>

缩写：embed

<embed src="" type="" />

缩写：object

<object data="" type=""></object>

缩写：param

<param name="" value="" />

缩写：map

<map name=""></map>

缩写：area

<area shape="" coords="" href="" alt="" />

缩写：area:d

<area shape="default" href="" alt="" />

缩写：area:c

<area shape="circle" coords="" href="" alt="" />

缩写：area:r

<area shape="rect" coords="" href="" alt="" />

缩写：area:p

<area shape="poly" coords="" href="" alt="" />

缩写：form

<form action=""></form>

缩写：form:get

<form action="" method="get"></form>

缩写：form:post

<form action="" method="post"></form>

缩写：label

<label for=""></label>

缩写：input

<input type="text" />

缩写：inp

<input type="text" name="" id="" />

缩写：input:hidden

别名：input[type=hidden name]

<input type="hidden" name="" />

缩写：input:h

别名：input:hidden

<input type="hidden" name="" />

缩写：input:text, input:t

别名：inp

<input type="text" name="" id="" />

缩写：input:search

别名：inp[type=search]

<input type="search" name="" id="" />

缩写：input:email

别名：inp[type=email]

<input type="email" name="" id="" />

缩写：input:url

别名：inp[type=url]

<input type="url" name="" id="" />

缩写：input:password

别名：inp[type=password]

<input type="password" name="" id="" />

缩写：input:p

别名：input:password

<input type="password" name="" id="" />

缩写：input:datetime

别名：inp[type=datetime]

<input type="datetime" name="" id="" />

缩写：input:date

别名：inp[type=date]

<input type="date" name="" id="" />

缩写：input:datetime-local

别名：inp[type=datetime-local]

<input type="datetime-local" name="" id="" />

缩写：input:month

别名：inp[type=month]

<input type="month" name="" id="" />

缩写：input:week

别名：inp[type=week]

<input type="week" name="" id="" />

缩写：input:time

别名：inp[type=time]

<input type="time" name="" id="" />

缩写：input:number

别名：inp[type=number]

<input type="number" name="" id="" />

缩写：input:color

别名：inp[type=color]

<input type="color" name="" id="" />

缩写：input:checkbox

别名：inp[type=checkbox]

<input type="checkbox" name="" id="" />

缩写：input:c

别名：input:checkbox

<input type="checkbox" name="" id="" />

缩写：input:radio

别名：inp[type=radio]

<input type="radio" name="" id="" />

缩写：input:r

别名：input:radio

<input type="radio" name="" id="" />

缩写：input:range

别名：inp[type=range]

<input type="range" name="" id="" />

缩写：input:file

别名：inp[type=file]

<input type="file" name="" id="" />

缩写：input:f

别名：input:file

<input type="file" name="" id="" />

缩写：input:submit

<input type="submit" value="" />

缩写：input:s

别名：input:submit

<input type="submit" value="" />

缩写：input:image

<input type="image" src="" alt="" />

缩写：input:i

别名：input:image

<input type="image" src="" alt="" />

缩写：input:button

<input type="button" value="" />

缩写：input:b

别名：input:button

<input type="button" value="" />

缩写：isindex

<isindex />

缩写：input:reset

别名：input:button[type=reset]

<input type="reset" value="" />

缩写：select

<select name="" id=""></select>

缩写：option

<option value=""></option>

缩写：textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

缩写：menu:context

别名：menu[type=context]>

<menu type="context"></menu>

缩写：menu:c

别名：menu:context

<menu type="context"></menu>

缩写：menu:toolbar

别名：menu[type=toolbar]>

<menu type="toolbar"></menu>

缩写：menu:t

别名：menu:toolbar

<menu type="toolbar"></menu>

缩写：video

<video src=""></video>

缩写：audio

<audio src=""></audio>

缩写：html:xml

<html xmlns="1999/xhtml"></html>

缩写：keygen

<keygen />

缩写：command

<command />

缩写：bq

别名：blockquote

<blockquote></blockquote>

缩写：acr

别名：acronym

<acronym title=""></acronym>

缩写：fig

别名：figure

<figure></figure>

缩写：figc

别名：figcaption

<figcaption></figcaption>

缩写：ifr

别名：iframe

<iframe src="" frameborder="0"></iframe>

缩写：emb

别名：embed

<embed src="" type="" />

缩写：obj

别名：object

<object data="" type=""></object>

缩写：src

别名：source

<source></source>

缩写：cap

别名：caption

<caption></caption>

缩写：colg

别名：colgroup

<colgroup></colgroup>

缩写：fst, fset

别名：fieldset

<fieldset></fieldset>

缩写：btn

别名：button

<button></button>

缩写：btn:b

别名：button[type=button]

<button type="button"></button>

缩写：btn:r

别名：button[type=reset]

<button type="reset"></button>

缩写：btn:s

别名：button[type=submit]

<button type="submit"></button>
关于更多的HTML以及CSS的缩写请查看：官网文档

　今天在跟同事讨论一人专题时想用粉笔效果，但是没做过不知道怎么做  就在网上找  最后找到一个还不错的的教程分享给大家！这个教程主要使用Photoshop制作风化的文字效果，前期主要过程在通道里面进行，剩下的都在图层面板来完成。

1,使用文字工具，输入文字;

2,按CTRL键点击文字层，调出文字先区;

3,进入通道面板，新建通道1，填充白色;

4,滤镜>像素化>铜版雕刻; (视情况可以对粗网点和中长描边反复操作几次)

5,CTRL+D取消选区，复制通道1为通道1副本;

6,选择铅笔工具，设置前景色为黑色，设置铅笔类型，在文字边缘涂上黑色;

7,选择直线工具，画上一些黑色线条;

8,按CTRL键点通道1副本，调出通道1副本白色选区;

9,返回图层面板，关闭文字层，新建图层1，填充白色 #FFFFFF;

10,按CTRL键，点击通道1，调出通道1白色选区，返回图层面板，新建图层2，填充灰色 #B7B7B7，将图层2置于图层1下面，CTRL+D取消选择。完成最终效果。

本文中使用两种办法来。

TT类为使用模板的类，

TT.h

#ifndef _TT_H
#define _TT_H
#include "stdio.h"
template <class T>
class TT{
public:
    void printType();
    void printType(T);
};

 方法1：

template<>
void TT<int>::printType(){
    printf("int/n");
}
template<>
void TT<char>::printType(){
    printf("char/n");
}
template<class T>
void TT<T>::printType(){
    printf("other type/n");
}

 方法1结束。

方法2：

template<class T>
void TT<T>::printType(T t){//判断t是不是int类型的
    printf("%d/n",typeid(t).name() == typeid(1).name());
}

方法2结束。

#endif
main.c
#include "TT.h"
int main(){
    TT<int> t1;
    TT<char> t2;
    TT<double> t3;
    t1.printType();
    t2.printType();
    t3.printType();
    int a = 1;
    char b = 'b';
    double c = 1.1;
    t1.printType(a);
    t2.printType(b);
    t3.printType(c);
    return 0;
}

最后的结果为：

int
char
other type
1
0
0

之前一直用的生存GIF图片的屏幕录制工具软件LICEcap，很是好用，可是自从用系统win8,win8.1后，这个LICEcap就不支持了。无奈，直到这两天才找到一个比较靠谱叫GifRecoder的可生成gif的屏幕录制软件。现在共享给大家。

1、灵者Gif录制（GifRecoder）

可生成gif图片的屏幕录制软件

软件可以嵌入文字、图片水印，参数设置比较灵活。

2、灵者Gif录制软件下载地址
地址：http://android-custom-view.googlecode.com/files/GifRecorder1.0.rar

3、相关软件介绍
1、【图片转换】 GIF动画帧分离工具-GifSplitter V2.0 免安装版
2、【动画制作】 AnimateGif(GIF动画制作工具) 1.1 免安装版
3、【动画制作】 毅晖GIF动画制作 v1.9.0.0
4、【动画制作】 GIF动画制作工具 1.7.6.0 免安装版
5、【图像捕捉】 灵者Gif录制 1.0 免安装版
6、【图像捕捉】 Gif·Gif·Gif 1.24 汉化版
7、【图片压缩】 Advanced GIF Optimizer 4.0.12
8、【屏幕录相】 GIF屏幕录像工具 1.02 绿色免费版
9、【动画制作】 easy gif animator(gif动画制作工具) V5.1.0 英文特别版
10、【图像浏览】 GIF Viewer(查看GIF格式文件) V2.1 英文绿色版
11、【动画制作】 GiF Resizer(缩放GIF图片) 1.1 免安装版
12、【动画制作】 AnimatGif 0.85 免安装版

VS 插件VS.PHP 调试PHP的方法;

如图:

设置成功之后,就可以像调试 .Net程序一样试调Php程序了!

调试的步骤:

1.在需要调试的地方先打上断点(F9)

2.像调试.Net一样运行调试

运行后.在系统右下角会出现一个小图标,VS.Php built-in webServer

3.当程序运行到设置断点的地方会停下来,等待调试;此时鼠标放在变量上就会显示变量的值:

1、安装VS.PHP插件

2、新建PHP工程：如下图，选择PHP 4 webproject创建PHP工程。

3、新建PHP页

4、添加PHP代码

5、设置起始页

6、设置断点

7、启动调试

启动新实例后，将会在任务栏右边(图标通知栏)显示如下图标

8、进入断点

9、继续调试：之后的调试与VS2010的调试方法相同。

下载插件地址：

vs.php+for+VS2010(编写PHP、用VS调试php程序，最新的版本，带注册码).zip

CssGaga是ytzong（涛哥）基于我们在朋友网日常的重构工作流程，为了提高工作效率而开发并不断完善起来的一个重构辅助工具。运行于Windows + .NET的环境，提供了重构相关的一系列解决方案。最近越来越多的朋友通过腾讯微博、QQ和Email咨询到有关CssGaga的问题，由于CssGaga本身也是在不断升级，以前的教程有些已经陈旧，为了帮助新接触到这个工具的同学，我这里再写一篇日志介绍一下CssGaga的基本使用。

CssGaga功能特性

1. 合并import的CSS文件，开发阶段将CSS文件按模块拆分复用，发布上线后合并减少HTTP请求；
2. 优化、压缩CSS代码，减少带宽占用，加快下载速度；
3. 优化、发布CSS中使用到的图片，可以不必考虑多发、漏发图片文件的情况；
4. 自动应用CSS Sprite技术，开发阶段不用考虑图标合并，便于管理，发布后的多个图标自动合并为一个图片，并自动更新CSS代码处理背景定位；
5. 对CSS代码中使用到的图片自动加时间戳，以便在使用长Cache与更新后的图片及时生效；
6. 样式有多套配色风格时，通过CssGaga可以实现皮肤的自动化同步；
7. CSS样式、图片一键去色功能，在遇到特殊政治任务的时候，全站能迅速进行去色改版，迅速恢复；
8. 生成iOS设备所需的不同尺寸Icon文件；
9. 处理一些浏览器兼容方面的问题；

CssGaga下载和配置

运行CssGaga需要Windows操作系统、.Net Framework运行环境。

1. 下载并安装Microsoft .NET Framework 4.0
2. 下载并解压CssGaga最新版（绿色软件，不用安装）
3. 对CssGaga进行初始化配置

第一次运行CssGaga前，需要对其进行必要的配置。主要是指定CssGaga的编译目标路径、站点的基本URL。具体步骤：

打开CssGaga所在目录，复制CssGaga.exe.config.sample文件，重命名为CssGaga.exe.config。

用任意文本编辑器打开CssGaga.exe.config，默认的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <appSettings>
 <add key="pathSource" value="E:\"/>
 <add key="webSiteUrl" value="http://qzonestyle.gtimg.cn"/>
 <add key="pathReport" value="/usr/local/imgcache/htdocs"/>
 <add key="pathDest1Name" value="目标环境1"/>
 <add key="pathDest1" value="E:\output"/>
 <add key="pathReport1" value="/usr/local/imgcache/htdocs"/>
 <add key="chkTemp" value="1"/>
 </appSettings>
</configuration>

其中pathDest1Name、pathDest1、pathReport1三个节点为一组，代表一个编译目标，CssGaga支持多组编译目标，要增加新的编译目标，只要复制粘贴这三个节点，修改“1”为“2”及更大的数字，相同数字为一组。例如，我设定本机的一个目录为编译目标：

<add key="pathDest1Name" value="本机输出"/>
<add key="pathDest1" value="D:\ofcss\style"/>
<add key="pathReport1" value="/style"/>

pathDest1Name代表这个目标在CssGaga界面上显示的名称，pathDest1代表这个目标的真实物理路径，pathReport1代表这个路径编译机上的地址（不使用SMB共享进行文件部署的话，这个节点设置不设置就无所谓了，可以考虑设置为你站点上该目录的相对路径）。

上面的设定表示当我在CssGaga上勾选“本机输出”时，编译后的CSS文件和图片文件会生成到D:\ofcss\style目录下。

CssGaga开发约定

根据互联网上一些优秀团队的经验以及我们自己在工作中的经验，CssGaga建议使用者在进行重构时遵循以下约定：

1. 目录结构

• 把所有的CSS文件放在同一个目录下。网页中用link标签引用的CSS文件，我们称之为CSS桥文件（CSS Bridge），真正的样式规则代码按照模块拆分存放在不同的CSS文件中，这些CSS文件以“.import.css”结尾，代表它们不能直接被页面引用，而要在桥文件中通过@import指令导入。
• 把所有的图片文件放在CSS文件所在目录下的子目录（例如img）中。
• 把所有需要进行CSS Sprite合并的图标文件放在CSS文件所在目录下的slice子目录中。
• 把所有自定义鼠标样式（.ani、.cur）放在CSS文件所在目录下的absolute子目录中。例如：

2.代码编写

• 在CSS Bridge文件中，用@import指令，把页面用到的模块css组合到一起
• 在编写需要做CSS Sprite合并的背景图片样式时，不要缩写，必须把background-image样式单独写，并且不写background-position属性（因为这些图标在开发阶段并没有合并，也就不需要定位，合并之后的background-position会由CssGaga自动生成），如果有PNG Alpha透明的图片，需要针对IE6单独做一张PNG 索引色透明图片时，可以用_background-image做Hack，CssGaga在合并时，会单独为IE6合并一张图片。
• @import指令不要嵌套使用（A import B，则B不要再import其它文件），原则上不要import其它目录的文件（CssGaga不会做合并处理）。

3. 编译发布

在重构完成后，运行CssGaga，选择开发目录（注意与生成目标路径对应，比如开发路径是E:\ofcss\dev，目标路径是E:\ofcss\output，那么E:\ofcss\dev\style\index.css就会编译到E:\ofcss\output\style\index.css），勾选需要使用的功能，选择编译目标。然后把需要发布的CSS文件拖入CssGaga的主窗口，就会自动处理并编译到目标路径（相关的图片文件自动复制），如图：

有关CssGaga更多功能介绍和使用技巧，参见：

CssGaga帮助索引

来源：http://www.ofcss.com/2012/03/22/cssgaga-quick-start.html