CSS3
Dec
15
animate.css – 是一个齐全的CSS3动画库，查看效果：http://www.dowebok.com/demo/2014/98/
简介
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果，但还是建议看看 animate.css 的代码，也许你能从中学到一些东西。
兼容
浏览器兼容：当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。
使用方法
1、引入文件
2、HTML 及使用
给元素加上 class 后，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。
如果动画是无限播放的，可以添加 class infinite。
你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
注意添加浏览器前缀。
简介
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果，但还是建议看看 animate.css 的代码，也许你能从中学到一些东西。
兼容
浏览器兼容：当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。
使用方法
1、引入文件
2、HTML 及使用
给元素加上 class 后，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。
如果动画是无限播放的，可以添加 class infinite。
你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
注意添加浏览器前缀。
Aug
13
SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。
SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。
例如：
有兴趣的同学可以到官方网站去了解一下，http://http://sass-lang.com/ ，英文的。
SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。
例如：
有兴趣的同学可以到官方网站去了解一下，http://http://sass-lang.com/ ，英文的。
Jul
7
使用EditPlus想visual studio那样可以格式化代码，是的Editplus中js、css、html代码自动格式化
一般用editplus写一些小的测试代码或者来研究学习别人的代码，但经常会遇到这些问题：下载过来的HTML/CSS代码混乱，JS代码被压缩，或者是我们想把我们的代码做一下压缩混淆以供发布时使用。当然，对于代码的格式化和代码压缩等，我们都可以使用专有的工具，或者使用一些在线的工作来做，既然EditPlus可以扩展插件，那我们何不利用这一功能来把这些工具集成到EP中呢？
其实很早我都有这些想法，一直没有深究其做法，EP的用户工具组，我一般也是挂些帮助手册之类的供开发时参考。今天在BlueIdea看到有人发了一篇名为“让Editplus自动格式化css和js”的文章，看完后觉得写的很好，我也突然来了灵感，为什么不把前端开发常用工具都集成进去呢？
说做就做，我在网上找了一些相关的工具代码，按照作者的方式开始改造（作者是使用“本地cScript调用JS+EP的文本过滤器”的方式来实现的）。
下面来说下集成的方法（以下以EditPlus3中文版本为例）：
1、下载工具包：edtools.rar ,解压后放到磁盘的一个目录，如D:/edTools。
2、打开ED，打开“工具”-“用户工具组”，在弹出的对象框中，在“组和工具项目”下拉框中选择一个工具组，点击“组名称”，为该组工具设定一个名称，如“前端开发工具”，如下图所示：
3、下面开始加入工具，这里主要以JSFormat为例讲解，其它类似。
点击“添加”--“应用程序”，在新建的项中，菜单文本写上名称，如"jsFormat"，在命令里面输入：
后面引号中的内容要修改你磁盘上对应的文件的路径。
在下面的几个选项中，选择“运行为文本过滤”。如下图所示：
4、其它几个的安装方式与jsFormat的安装类似，这里不再重复。点击ED ，工具你会发现：jsFormat Ctrl+1,打开一个js点击后你会发现奥秘。
一般用editplus写一些小的测试代码或者来研究学习别人的代码，但经常会遇到这些问题：下载过来的HTML/CSS代码混乱，JS代码被压缩，或者是我们想把我们的代码做一下压缩混淆以供发布时使用。当然，对于代码的格式化和代码压缩等，我们都可以使用专有的工具，或者使用一些在线的工作来做，既然EditPlus可以扩展插件，那我们何不利用这一功能来把这些工具集成到EP中呢？
其实很早我都有这些想法，一直没有深究其做法，EP的用户工具组，我一般也是挂些帮助手册之类的供开发时参考。今天在BlueIdea看到有人发了一篇名为“让Editplus自动格式化css和js”的文章，看完后觉得写的很好，我也突然来了灵感，为什么不把前端开发常用工具都集成进去呢？
说做就做，我在网上找了一些相关的工具代码，按照作者的方式开始改造（作者是使用“本地cScript调用JS+EP的文本过滤器”的方式来实现的）。
下面来说下集成的方法（以下以EditPlus3中文版本为例）：
1、下载工具包：edtools.rar ,解压后放到磁盘的一个目录，如D:/edTools。
2、打开ED，打开“工具”-“用户工具组”，在弹出的对象框中，在“组和工具项目”下拉框中选择一个工具组，点击“组名称”，为该组工具设定一个名称，如“前端开发工具”，如下图所示：
3、下面开始加入工具，这里主要以JSFormat为例讲解，其它类似。
点击“添加”--“应用程序”，在新建的项中，菜单文本写上名称，如"jsFormat"，在命令里面输入：
后面引号中的内容要修改你磁盘上对应的文件的路径。
在下面的几个选项中，选择“运行为文本过滤”。如下图所示：
4、其它几个的安装方式与jsFormat的安装类似，这里不再重复。点击ED ，工具你会发现：jsFormat Ctrl+1,打开一个js点击后你会发现奥秘。
Apr
28
HTML5是越来越牛逼轰轰了，到底有啥不一样，下面有个html5的最新手册下载，看看就明了啦！
很棒的HTML5手册+CSS3手册下载，更新下前端知识！，网上找了很久，都TM的浮云，泡沫！还是博客园来的实在，支持！
很多人说现在IE浏览器不支持.研究没用.但我觉的.就算IE9出来了,IE6,7,8还是不支持.. 所以现在和以后效果是一样的.都是要搞些兼容性
以下是参考手册下载地址 : http://files.cnblogs.com/Capricornus/css3.0html5.rar
各大浏览器 CSS3 和 HTML5 兼容速查表
http://news.csdn.net/a/20100401/217692.html
HTML5手册+CSS3手册下载，更新下前端知识！ HTML5手册下载 HTML5中文手册下载 CSS3手册下载 CSS3中文手册下载
深入了解 HTML 5资源
http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K701.aspx
另外还可以上W3CSHCOOL查看http://www.w3cschool.cn/html5_reference.html
，下面是截图
HTML5手册
CSS3手册
没有目标的人都只在帮有目标的人完成目标。
很棒的HTML5手册+CSS3手册下载，更新下前端知识！，网上找了很久，都TM的浮云，泡沫！还是博客园来的实在，支持！
很多人说现在IE浏览器不支持.研究没用.但我觉的.就算IE9出来了,IE6,7,8还是不支持.. 所以现在和以后效果是一样的.都是要搞些兼容性
以下是参考手册下载地址 : http://files.cnblogs.com/Capricornus/css3.0html5.rar
各大浏览器 CSS3 和 HTML5 兼容速查表
http://news.csdn.net/a/20100401/217692.html
HTML5手册+CSS3手册下载，更新下前端知识！ HTML5手册下载 HTML5中文手册下载 CSS3手册下载 CSS3中文手册下载
深入了解 HTML 5资源
http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K701.aspx
另外还可以上W3CSHCOOL查看http://www.w3cschool.cn/html5_reference.html
，下面是截图
HTML5手册
CSS3手册
没有目标的人都只在帮有目标的人完成目标。
Jan
20
模板的换皮肤的功能.需要jquery及jquery的cookie插件
css我都放在不同的目录下比如
style1/index.css
style2/index.css
图片在相应的文件夹下,这样我们只要改相应的图片就可以修改掉了,不用更改css
.
我们换皮肤的时候只要把style1改成style2
目标就可以达到了换皮肤的功能
我们要换皮肤一下要有onclick的js事件
我们这里定义了function
changecss(str)函数
html的代码:
代码:
<a onclick=”changecss(’style1′)”
class=”bai” href=”#”> </a>
<a
onclick=”changecss(’style2′)” class=”orange”
href=”#”> </a>
<a onclick=”changecss(’style3′)”
class=”blue” href=”####”> </a>
<a
onclick=”changecss(’style4′)” class=”green” href=”####”> </a>
html 还有个css的连接文件:<link
href=”http://www.125job.com/style/person/style4/index.css” rel=”stylesheet”
type=”text/css” media=”screen” id=”skin”/>
我这里是:
js代码
代码:
function changecss(str) {
var csshref
//当义变量
csshref=$("#skin").attr("href")
//取得skin的css链接
csshref=csshref.replace(/style[0-9]/g,str);
//把原来路径的style1替换成我们自己的str
csshref=$("#skin").attr("href",csshref)
//改变一下href属性其实这里已经完成
$.cookie("css_skin",str)
//这里是记录一下cookie,防止刷新就回到原来的css路径
}
好了,点击换皮肤已经好了,不过还有个加载的时候读取cookie里的路径
用jquery就简单多了:
加载时候读取路径代码:
代码:
$(function()
{
//如果cookie不为空的时候就读取cookie的路径
if($.cookie("css_skin")!=null)
{
changecss($.cookie("css_skin"));
}
这里就已经全部完成
}
)
