自制批处理使用Yui Compressor压缩并打包js或css文件
今天下午，手头上没什么事做，于是就上网查看资料，看到很多人写的YUI Compressor的使用方法，大致写的都不详细，于是自己来做个总结。
（1）首先来看下，为什么要压缩js或css文件？
JS/CSS文件大，用户访问站点的时候需要下载JS/CSS的时间长就会感觉慢，有的甚至由于CSS的文件而造成页面初始打开很凌乱。
（2）我们怎么提高用户下载JS/CSS的速度呢？
1、我们无法改变用户的网络状况，只有自己网站使用更快的带宽或者使用更强的服务器，使用户访问我们的时候感觉很快。
2、对JS/CSS文件进行压缩，由于文件较小，用户下载的时间就很短。
解决方案1，需要花费比较多的money,方案2实现比较简单，而且效果也明显。
下面我们介绍使用YUI Compressor进行JS/CSS压缩打包的方法，网上有人做了压缩大都没有讲打包（即使YUI Compressor GUI也是一样）。在这里我是用最土的办法批处理来做的。
1）前提是你的电脑上要有java 1.4以上的的环境
如果你没有安装JAVA环境的话，还需要安装一下JDK下载地址是：http://java.sun.com/javase/downloads/index.jsp 我们选择（Java SE Development Kit (JDK) 6 Update 14）这个下载。
2）到网站上下载 YUI Compressor：http://www.julienlecomte.net/yuicompressor/
3）解压到d盘:yuicompressor-2.4.2文件夹下
4）编写批处理文件compress_js.bat （这里比如compress_js.bat文件放在桌面）：(注意路径 \ )
@echo off
set /p outFile=请填写输出文件名：
set /p fList=请填写合并列表文件：
for /f %%i in (%fList%) do type %%i >> %outFile%
java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar --type js --charset utf-8 %outFile% -o %outFile%
5）编写要打包的列表文件 js.txt (如放在e:\jqTest\js.txt)：(注意路径 \ )
E:\jqTest\scripts\nav.js
E:\jqTest\scripts\changeSkin.js
E:\jqTest\scripts\slide.js
E:\jqTest\scripts\scroll.js
E:\jqTest\scripts\tooltip.js
E:\jqTest\scripts\tree.js
E:\jqTest\scripts\ad.js
E:\jqTest\scripts\imgHover.js
E:\jqTest\scripts\imgSlide.js
6)双击compress_js.bat文件，根据提示输入内容，ok大功告成
输入和提示如下：(注意路径 \ )
相关文档：
可以放置样式的地方：样式表，<style>和style
样式表是一个独立的文件，可以通过<link>元素或者css的@import语句把它附加到某个html文档中，<style>是一个html元素，可以把它内嵌在html文档中，style是一个属性，可以内置在任何html元素中。
要想把样式表连到html文档中，要在html文档中的<head> ......
如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位参考。
网页特效Abc
用blur滤镜做出的效果，代码如下：
FILTER: blur(direction=135,strength=8)
网页特效Abc
用dropshadow滤镜做出的效果，代码如下：
FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positi ......
虽然CSS样式的学习需要我们动手多实践，需要多做案例，思致思考，但有时候注意资料的收集与整理也是非常重要的，在实际开发中往往会起到事半功倍的效果。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。
一、按钮样式
.buttoncss {
font-family: "tahoma", "宋体" ......
#weblmenu
{
height:22px;
width:700px;
float:left;
display:inline;
text-align:left;
}
#weblmenu ul
{
height:22px;
width:700px;
text-align:left;
float:left;
}
#weblmenu ul li
{
height:22px;
width:110px;
float:left;
list-style-type:none;
text-align:center;
word-break:break-all;
} ......
间隙属性是用来设置元素内容到元素边界的距离。包括：
1）左间隙属性（padding-left）
这个属性用来设定左间隙的宽度。例如：
.d1{padding-left:1cm}
2）右间隙属性（padding-right）
这个属性用来设定右间隙的宽度。例如：
.d1 {padding-right:1cm}
3）上间隙属性（padding-top）
这个属性用来设定上间隙的宽度。� ......
