RDIFramework.NET » 网站建设 http://blog.rdiframework.net  ——  专注、交流、分享、成长 Fri, 20 Apr 2018 09:38:35 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.2.20 CSS3实现10种Loading效果 http://blog.rdiframework.net/629.html http://blog.rdiframework.net/629.html#comments Sun, 05 Jul 2015 14:47:43 +0000 http://blog.rdiframework.net/?p=629 第1种效果:

loading1

代码如下:

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
.loading{
            width: 80px;
            height: 40px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 40px;
                background: lightgreen;
            }
            50%{
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.2s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.4s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.6s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.8s;
        }
第2种效果:

loading2

代码如下:

<div class="loading">
        <span></span>
</div>
.loading{
            width: 150px;
            height: 4px;
            border-radius: 2px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            background: lightgreen;
            -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
        }
        .loading span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            margin-top: -7px;
            margin-left:-8px;
            -webkit-animation: changePosition 1.04s ease-in infinite alternate;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: lightgreen;
            }
            100%{
                background: lightblue;
            }
        }
        @-webkit-keyframes changePosition{
            0%{
                background: lightgreen;
            }
            100%{
                margin-left: 142px;
                background: lightblue;
            }
        }

第3-5种效果:

loading3-1loading3-2loading3-3

代码如下:

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

第3-5种效果的css样式分别为:

.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            border-radius: 50%;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }
.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            border-radius: 50%;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                -webkit-transform: scale(1.3);
            }
            100%{
                opacity: 0.2;
                -webkit-transform: scale(.3);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }
.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            position: relative;
            margin-top:100px;
        }
        .loading span{
            position: absolute;
            width: 15px;
            height: 100%;
            border-radius: 50%;
            background: lightgreen;
            -webkit-animation: load 1.04s ease-in infinite alternate;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                -webkit-transform: translate(0px);
            }
            100%{
                opacity: 0.2;
                -webkit-transform: translate(150px);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }

第6-8种效果:

loading4-1loading4-2loading4-3

代码如下:

<div class=”loading”> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
第6-8种效果的css样式分别为:
.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
            text-align: center;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }
.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            background: lightgreen;
            -webkit-transform-origin: right bottom;
            -webkit-animation: load 1s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
                -webkit-transform: rotate(90deg);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }
.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            background: lightgreen;
            -webkit-transform-origin: right bottom;
            -webkit-animation: load 1s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                -webkit-transform: scale(1);
            }
            100%{
                opacity: 0;
                -webkit-transform: rotate(90deg) scale(.3);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }
第9-10种效果:

loading5-1loading5-2

代码如下:

<div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>
CSS样式分别为:
.loadEffect{
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top:100px;
        }
        .loadEffect span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0.2;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 14px;
            top: 14px;
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -8px;
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 14px;
            right:14px;
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 14px;
            bottom:14px;
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
        }
.loadEffect{
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top:100px;
        }
        .loadEffect span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                -webkit-transform: scale(1.2);
                opacity: 1;
            }
            100%{
                -webkit-transform: scale(.3);
                opacity: 0.5;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-10px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 14px;
            top: 14px;
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -10px;
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 14px;
            right:14px;
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-10px;
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 14px;
            bottom:14px;
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -10px;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
        }
PS:CSS样式代码其实很多重复,主要就是动画不一样,但为了方便以后直接拿来用,就先不整理了。

转载请注明:RDIFramework.NET » CSS3实现10种Loading效果

]]>
http://blog.rdiframework.net/629.html/feed 2
多使用技巧提高你的PHP网站程序执行效率 http://blog.rdiframework.net/621.html http://blog.rdiframework.net/621.html#comments Tue, 16 Jun 2015 08:47:31 +0000 http://blog.rdiframework.net/?p=621 这些技巧大部分来源于网络!

1、用单引号代替双引号来包含字符串,这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的”函数”(译注:PHP手册中说echo是语言结构,不是真正的函数,故 把函数加上了双引号)。

2、如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍。

3、$row[‘id’] 的速度是$row的7倍。

4、echo 比 print 快,并且使用echo的多重参数(译注:指用逗号而不是句点)代替字符串连接,比如echo $str1,$str2。

5、在执行for循环之前确定最大循环数,不要每循环一次都计算最大值,最好运用foreach代替。

6、注销那些不用的变量尤其是大数组,以便释放内存。

7、尽量避免使用__get,__set,__autoload。

8、require_once()代价昂贵。

9、include文件时尽量使用绝对路径,因为它避免了PHP去include_path里查找文件的速度,解析操作系统路径所需的时间会更少。

10、如果你想知道脚本开始执行(译注:即服务器端收到客户端请求)的时刻,使用

$_SERVER[‘REQUEST_TIME’]

要好于

time()

11、函数代替正则表达式完成相同功能。

12、str_replace函数比preg_replace函数快,但strtr函数的效率是str_replace函数的四倍。

13、如果一个字符串替换函数,可接受数组或字符作为参数,并且参数长度不太长,那么可以考虑额外写一段替换代码,使得每次传递参数是一个字符,而不是只写一行代码接受数组作为查询和替换的参数。

14、使用选择分支语句(译注:即switch case)好于使用多个if,else if语句。

15、用@屏蔽错误消息的做法非常低效,极其低效。

16、打开apache的mod_deflate模块,可以提高网页的浏览速度。

17、数据库连接当使用完毕时应关掉,不要用长连接。

18、错误消息代价昂贵。

19、在方法中递增局部变量,速度是最快的。几乎与在函数中调用局部变量的速度相当。

20、递增一个全局变量要比递增一个局部变量慢2倍。

21、递增一个对象属性(如:$this->prop++)要比递增一个局部变量慢3倍。

22、递增一个未预定义的局部变量要比递增一个预定义的局部变量慢9至10倍。

23、仅定义一个局部变量而没在函数中调用它,同样会减慢速度(其程度相当于递增一个局部变量)。PHP大概会检查看是否存在全局变量。

24、方法调用看来与类中定义的方法的数量无关,因为我(在测试方法之前和之后都)添加了10个方法,但性能上没有变化。

25、派生类中的方法运行起来要快于在基类中定义的同样的方法。

26、调用带有一个参数的空函数,其花费的时间相当于执行7至8次的局部变量递增操作。类似的方法调用所花费的时间接近于15次的局部变量递增操作。

27、Apache解析一个PHP脚本的时间要比解析一个静态HTML页面慢2至10倍。尽量多用静态HTML页面,少用脚本。

28、除非脚本可以缓存,否则每次调用时都会重新编译一次。引入一套PHP缓存机制通常可以提升25%至100%的性能,以免除编译开销。

29、尽量做缓存,可使用memcached。memcached是一款高性能的内存对象缓存系统,可用来加速动态Web应用程序,减轻数据库负载。对运算码 (OP code)的缓存很有用,使得脚本不必为每个请求做重新编译。

30、当操作字符串并需要检验其长度是否满足某种要求时,你想当然地会使用strlen()函数。此函数执行起来相当快,因为它不做任何计算, 只返回在zval 结构(C的内置数据结构,用于存储PHP变量)中存储的已知字符串长度。但是,由于strlen()是函数,多多少少会有些慢,因为函数调用会经过诸多步 骤,如字母小写化(译注:指函数名小写化,PHP不区分函数名大小写)、哈希查找,会跟随被调用的函数一起执行。在某些情况下,你可以使用isset() 技巧加速执行你的代码。

(举例如下)

if (strlen($foo) < 5) { echo “Foo is too short”$$ }

(与下面的技巧做比较)

if (!isset($foo{5})) { echo “Foo is too short”$$ }

调用isset()恰巧比strlen()快,因为与后者不同的是,isset()作为一种语言结构,意味着它的执行不需要函数查找和字母小写化。也就是说,实际上在检验字符串长度的顶层代码中你没有花太多开销。

31、当执行变量$i的递增或递减时,$i++会比++$i慢一些。这种差异是PHP特有的,并不适用于其他语言,所以请不要修改你的C或 Java代码并指望它们能立即变快,没用的。++$i更快是因为它只需要3条指令(opcodes),$i++则需要4条指令。后置递增实际上会产生一个 临时变量,这个临时变量随后被递增。而前置递增直接在原值上递增。这是最优化处理的一种,正如Zend的PHP优化器所作的那样。牢记这个优化处理不失为 一个好主意,因为并不是所有的指令优化器都会做同样的优化处理,并且存在大量没有装配指令优化器的互联网服务提供商(ISPs)和服务器。

32、并不是事必面向对象(OOP),面向对象往往开销很大,每个方法和对象调用都会消耗很多内存。

33、并非要用类实现所有的数据结构,数组也很有用。

34、不要把方法细分得过多,仔细想想你真正打算重用的是哪些代码?

35、当你需要时,你总能把代码分解成方法。

36、尽量采用大量的PHP内置函数。

37、如果在代码中存在大量耗时的函数,你可以考虑用C扩展的方式实现它们。

38、评估检验(profile)你的代码。检验器会告诉你,代码的哪些部分消耗了多少时间。Xdebug调试器包含了检验程序,评估检验总体上可以显示出代码的瓶颈。

39、mod_zip可作为Apache模块,用来即时压缩你的数据,并可让数据传输量降低80%。

40、在可以用file_get_contents替代file、fopen、feof、fgets等系列方法的情况下,尽量用 file_get_contents,因为他的效率高得多!但是要注意file_get_contents在打开一个URL文件时候的PHP版本问题;

41、尽量的少进行文件操作,虽然PHP的文件操作效率也不低的;

42、优化Select SQL语句,在可能的情况下尽量少的进行Insert、Update操作(在update上,我被恶批过);

43、尽可能的使用PHP内部函数(但是我却为了找个PHP里面不存在的函数,浪费了本可以写出一个自定义函数的时间,经验问题啊!);

44、循环内部不要声明变量,尤其是大变量:对象(这好像不只是PHP里面要注意的问题吧?);

45、多维数组尽量不要循环嵌套赋值;

46、在可以用PHP内部字符串操作函数的情况下,不要用正则表达式;

47、foreach效率更高,尽量用foreach代替while和for循环;

48、用单引号替代双引号引用字符串;

49、”用i+=1代替i=i+1。符合c/c++的习惯,效率还高”;

50、对global变量,应该用完就unset()掉;

转载请注明:RDIFramework.NET » 多使用技巧提高你的PHP网站程序执行效率

]]>
http://blog.rdiframework.net/621.html/feed 5
window主机下wp博客(WordPress)伪静态设置教程 http://blog.rdiframework.net/532.html http://blog.rdiframework.net/532.html#comments Tue, 02 Jun 2015 03:46:31 +0000 http://blog.rdiframework.net/?p=532 今天给WordPress的博客弄伪静态。在百度搜索了很多方法,下面土豆就简单做个wp博客(WordPress)伪静态设置教程吧(win主机)。
对于linux系统的主机,wp博客设置伪静态只需在后台按照提示设置就可以了,可是随着win主机的出现,让伪静态的设置变得不那么容易设置成功,总是显示无法访问或者404错误。今天我就以win主机为例来教大家如何设置wp博客伪静态,请大家务必按照教程一步步操作,不按教程顺序操作容易出现404错误,切记。

1、新建一个txt文件,重命名为httpd.ini,把后缀.txt改为.ini,有提示,点确定。

2、打开新建的文件,复制下面的代码


[ISAPI_Rewrite]

# 3600 = 1 hour

CacheClockRate 3600

RepeatLimit 32

# Protect httpd.ini and httpd.parse.errors files

# from accessing through HTTP

# Rules to ensure that normal content gets through

RewriteRule /sitemap.xml /sitemap.xml [L]

RewriteRule /favicon.ico /favicon.ico [L]

# For file-based wordpress content (i.e. theme), admin, etc.

RewriteRule /wp-(.*) /wp-$1 [L]

# For normal wordpress content, via index.php

RewriteRule ^/$ /index.php [L]

RewriteRule /(.*) /index.php/$1 [L]

3、保存后用ftp工具将新建的文件上传到程序的根目录,如果WordPress程序安装在web文件夹下,就打开web文件夹,把建好httpd.ini文件上传进去。

4、上传成功后,在WordPress后台的固定链接中选择自定义,输入希望实现的链接样式。具体格式为/%category%/%post_id%.html,2个斜杠中间可以替换代码(注意不要有空格,不然会多个数字),实现以日期、时间、作者、目录来分类。可替换的代码如下:

%year% 年份

%monthnum% 月份

%day% 日期

%hour% 小时

%minute% 分钟

%second% 秒

%postname% 文章名。在发表文章的时候,输入文章缩略名“Win Host wp Rewrite”那么 “win-host-wp-rewrite” 就是url中的文章名.

%post_id% 文章的ID

%category% 目录

%author% 作者

注意替换代码的时候保证代码的完整性和连续性,中间不要有空格和其他非代码字符否则会造成404错误。

关于wp博客(WordPress)伪静态设置教程,编者就谈到这里,如果还有不明白的可以提问或者找我咨询,我将提供必要支持。

特别提示:如果你将头像本地化(且头像文件夹名称为avatar),请在伪静态规则中加上如下代码:

RewriteRule /avatar/(.*) /avatar/$1 [L]

 

今天就写到这里,下次见咯。。

欢迎关注RDIFramework.NET框架官方公众微信(微信号:rdiframework-net),及时了解最新动态。

扫描二维码立即关注

RDIFramework.NET 官方微信

RDIFramework.NET 官方微信

转载请注明:RDIFramework.NET » window主机下wp博客(WordPress)伪静态设置教程

]]>
http://blog.rdiframework.net/532.html/feed 2
什么是LESSCSS http://blog.rdiframework.net/515.html http://blog.rdiframework.net/515.html#comments Wed, 27 May 2015 00:13:49 +0000 http://blog.scbz.org/?p=515 今天开始发文章,是我在网上学习整理的文字,大家多指正。

LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

LESSCSS都有那些特性呢?下面我们逐一学习!

语言特性快速预览:

变量:

变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

LESS源码:

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

编译后的CSS:

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

混合(Mixins)

混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。

LESS源码:

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

编译后的CSS:

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

LESS源码:

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

编译后的CSS:

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

函数和运算

运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。

LESS源码:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

编译后的CSS:

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

快速上手

LESSCSS的使用是很容易的,首先,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。

GUI编译工具

为方便起见,建议初学者使用GUI编译工具来编译.less文件,以下是一些可选GUI编译工具:

  1. koala(Win/Mac/Linux)

    国人开发的LESSCSS/SASS编译工具。下载地址:http://koala-app.com/index-zh.html

  2. Codekit(Mac)

    一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具,含语法检查、图片优化、自动刷新等附加功能。下载地址http://incident57.com/codekit/

  3. WinLess(Win)

    一款LESS编译软件。下载地址http://winless.org/

  4. SimpleLess(Win/Mac/Linux)

    一款LESS编译软件。下载地址http://wearekiss.com/simpless

Node.js库

LESSCSS官方有一款基于Node.js的库,用于编译.less文件。

使用时,首先全局安装less(部分系统下可能需要在前面加上sudo切换为超级管理员权限):

npm install -g less

接下来就可以使用lessc来编译.less文件了:

lessc example/example.less example/example.css

更多选项可以直接运行lessc查看说明。

浏览器端使用

LESSCSS也可以不经编译,直接在浏览器端使用。

使用方法:

  1. 下载LESSCSS的.js文件,例如lesscss-1.4.0.min.js。
  2. 在页面中引入.less文件
    <link rel="stylesheet/less" href="example.less" />
    

    需要注意rel属性的值是stylesheet/less,而不是stylesheet

  3. 引入第1步下载的.js文件
    <script src="lesscss-1.4.0.min.js"></script>
    

需要特别注意的是,由于浏览器端使用时是使用ajax来拉取.less文件,因此直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下会拉取不到.less文件,导致样式无法生效。

还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css(具体方法请搜索)。或者还有一种更简单的方法,即是直接将.less文件改名为.css文件即可。

这一课就学习到这里。下次我们继续。。

转载请注明:RDIFramework.NET » 什么是LESSCSS

]]>
http://blog.rdiframework.net/515.html/feed 2
盘点WordPress站点维护与加速必备插件及技巧 http://blog.rdiframework.net/497.html http://blog.rdiframework.net/497.html#comments Tue, 26 May 2015 05:24:53 +0000 http://blog.scbz.org/?p=497 内容提要

WordPress是目前最流行使用最广泛的日志平台和内容管理系统之一,不过,尽管WordPress非常好用,但它并不是最佳的,更糟的是当流量过大时它可能会崩溃。幸运的是,这篇文章会告诉你一些关于WordPress维护和加速的必备技巧。

盘点WordPress站点维护与加速必备插件及技巧

通过使用下文的优化选项和插件,你可以:

使用自动化方法来维护WordPress使之处于一流的,安全的状态,这样你无需浪费你的宝贵时间。

使WordPress加速,不仅仅可以使页面更快加载,还能支撑住流量高峰。

监控WordPress站点,当问题出现时你可以及时发现并快速修复。

 

WordPress维护

1. 定期备份数据库

假设你的WordPress博客崩溃了或者你需要重新安装WordPress,你将在一个便利的文件中获取所有最新的页面、邮件和评论。可以使用WP-DBManager插件来自动实现这个功能。你可以将它设置为定期备份数据库并在主机上保存或者通过Email发送一个附件。

2.优化数据库

你还是可以用WP-DBManager插件自动实现这个功能。

3. 定期备份WordPress文件

这指的是你的图片和插件。可以使用WordPress Backup 插件来自动实现该功能。你可以将它设置为定期备份数据库并在主机上保存或者通过Email发送一个附件。

4. 减少垃圾评论

用Akismet插件运行和过滤垃圾评论。这可以帮助你节约限制、阅读、回复评论的时间。

5. 确保没有不必要的404页面

当用户试图访问你网站不存在的页面或文章可能看到404错误信息的页面。使用404 Notifier插件可以识别404错误并使用Redirection插件通过重定向来修复问题。

6. 切换到漂亮的永久链接

如果你还没有准备好。在菜单设置-> Permalinks(永久链接)面板选择一种好看的永久链接格式( 如yusi123.com/%post_id%.html),像Speckyboy 这样的URL风格,而不是WordPress 出于某种原因仍然坚持默认的 “/?p=X” 这样的永久链接风格。这不仅能进行搜索引擎优化 ,还能提升用户的可读性。这样显然还可以使你将要阅读的东西更容易共享。

7. 自动的基本SEO (搜索引擎优化)

安装All in One SEO Pack插件,在插件选择界面中添加你的标题、关键字和描述,这可以使得用户更加容易通过已有内容搜索到你的页面。

注:通过很多人测试发现,All in One SEO Pack插件对搜索引擎优化存在不少问题,小编不再推荐使用该插件

WordPress提速

1. 使用缓存

安装WP Super Cache插件并启用Gzip选项。它可以为访问者只加载那些合适的缓存内容,而不是加载你的WordPress站点中的每一个脚本和元素。可以很大降低带宽占用,避免网站在流量高峰时崩溃 (如果你的网站和内容有明显的访问波峰,就更应该考虑这个问题)。

2. 尽可能的减少CSS文件

将大量的定制CSS文件合成一个大的文件。主题需要的个人CSS文件越少,加载速度越快。可以将你的主题中的个人CSS文件直接拷贝粘贴到style.css或者custom.css 中。

3.尽可能的减少Javascript 文件

将大量.js文件合成一个大文件。主题需要的个人js文件越少,加载速度越快。可以将你的主题中的个人Javascript文件(/js/jquery.js, /js/jquery.slider.js, /js/jquery.tooltip.js)直接拷贝粘贴到一个新的单独的Javascript文件(/js/jquery.js,jquery.slider.js,jquery.tooltip.js)中。

4. 尽量把Javascript代码放进页脚

这指的是你的主题中的 footer.php 文件或者你的主题的定制页面的合适的页脚部分 。这样可以使得Javascript最后加载,当Javascript在后台加载时访问者可以快速阅读网页内容。

5. 尽量少使用插件

越少使用插件你的WordPress站点越稳定 (如果某个插件没有正确的编码的话减少使用可以使访问更快)。可以通过将代码复制粘贴或者手动的在主题里写函数,或者使用内置功能的主题,或者自己设计定制等方式来减少插件的使用。这并不意味着不要使用任何插件,特别是这篇文章是在建议使用插件来进行WordPress 优化——仅使用必要的插件而不是随机边栏小工具和花瓶。

6. 加速图片加载

使用Amazon S3存储服务来上传和存放你的文件。这样图片可以更快的加载而且访问者可以不用长时间的等待他们加载——这对那些有大量图片和文件夹需要展示的网页和视觉设计者来说更为重要。你可以使用WordPress的Amazon S3插件来分流图片上传并将他们插入自己的页面和文章。

WordPress监控

1. 查看主机服务器信息和内存使用

安装WP System Health插件。它可以让你知道WordPress站点变慢时是否有内存问题,这样你能够定位并修复问题,而不是盲目的去尝试解决。

2. 查看主机服务器细节信息

安装Hosting Monitor插件。它可以让你知道WordPress或者你的主机是否有变慢或者有其它性能问题,你可以修复它们或者根据这些信息联系你的服务器提供商。

3. 记录WordPress错误并用email通知

安装 Error Reporting插件. 错误发生时你可以立刻接到通知,因此你能够立刻修复错误。

小结

通过这些优化以及安装这些插件,你不仅仅可以使得WordPress站点的性能和稳定性从可用到很好用,更可以自动化完成很多工作而不需要花费太多时间来维护你的站点。你无需在网站因流量高峰或其它原因崩溃时浪费时间来修复和备份你的WordPress站点了。

你还知道哪些这里没有提到的WordPress维护和加速方法?欢迎在下面的评论处分享。

转载请注明:RDIFramework.NET » 盘点WordPress站点维护与加速必备插件及技巧

]]>
http://blog.rdiframework.net/497.html/feed 0