• 每日一谈:WordPress用插件OR代码?

    相信很多最开始用WordPress的朋友都会装几个插件来满足博客的一些功能。不过到了后期,慢慢发现有很多功能是可以不用插件,直接用代码实现的。

    我认为,插件和代码有这么几点可以比较的地方。

    1、功能

    一般来说,插件的功能比较强,考虑的很全面,而且是做过比较多的测试,能适应比较多的环境。代码呢,一般功能上也够用,但是很少有插件考虑的全面。

    2、易用性

    插件只要会安装,然后按照插件的说明基本上就可以了,比较简单。

    代码的要求就高了点,要会改代码,这对没接触过WordPress或网页的朋友来说就比较困难了。

    3、设置界面

    插件的界面比较美观,很人性化,设置很容易。

    代码一般只有执行的部分,WordPress后台是看不到设置的,也就谈不上界面了。

    4、速度

    插件由于加载的文件比较多,另外考虑了很多情况,文件中可能有比较多的代码,如果插件太多的话,速度很可能就变慢了。

    代码一般比较精简,针对特定的功能有特定的代码,速度比较快。

    5、安全性

    所谓树大招风,一个插件用户多了,安全问题也来了,WordPress的攻击方式中就有利用插件漏洞的,不过一般情况下很少。

    代码呢,一般使用的人数比较少,也就相对安全,就像windows和Linux一样。

    你,喜欢用什么方式来实现WordPress的功能呢?

  • 细节 我们可以关注更多一些

    细节决定成败,我觉得很有道理,我也不准备在这个问题上多说什么,只是拿这句话用用而已。

    我的主题一直就是mg12的iNove,从开始用到现在几乎是每个能改的地方我都改了,有的朋友问我要我的改装版,不是我不愿给(我曾经给过一些朋友的),是因为很多改动的地方我自己都不记得了,更是因为许多地方我把那些动态的函数换成了静态的HTML代码,删删减减,如果你不是太懂网页,直接拿去用恐怕是很难的。

    下面是我的一些细节的改动

    1、导航栏首页链接及图标。

    我的首页链接在导航栏上和banner上都是可以点击的,但是导航栏上的首页链接由于写的不规范,在IE6上好像无法点击(其实我很早就知道了,只是很懒没有改,嘿嘿),昨天跟XL闲聊的时候提到了这个,还是改了吧。

    导航栏上首页链接HTML代码及CSS代码。

    首页链接图片

    HTML代码

    <div id=”homepage”>
      <a id=”homeico” title=”首页” href=”http://www.zenoven.com“>首页</a>
     </div>

    CSS代码

    #homepage {
     width:50px;
     height:50px;
     float:left;
    }
    a#homeico  {
     display:block;
     background:url(img/home.jpg);
     width:50px;
     height:50px;
     margin:0;
     text-indent:-999em;
    }

    2、网页底部pagenavi(分页插件)的设置

    这个其实很简单,我说的是尽量不要分页太多,我之前设置的是分10页,一直也没注意,后来偶尔浏览的时候发现如果点击到第十多页,由于一行显示不完所有的页码,他就会换行显示,很难看的,像下面这样。

    把页数设置好就没有这个问题了。比如我的设置了分7页。

    另外我发现分页的设置对SEO也是有影响的,因为我在某个搜索引擎上site的时候发现了很多分页,这个好像就不是很好了吧?

    当然我也还有很多问题未解决,比如我的RSS在Google Reader等订阅上面显示的时候完全没有格式,图片不显示,虽不是乱码,但是却像乱码一样难看,不知道各位知道怎么解决吗?

  • CSS代码命名及书写规范篇

    一直以来我的CSS都是参考人家的,看着人家的怎样写然后自己一点点模仿,也没有注意什么规范,这并不是长久之计,学习下一些规范还是很有必要的,这份规范也是在网络上搜集的,目的是方便自己,方便大家,如果其中有错误请大家指正。

    CSS命名规范

    一.文件命名规范

    全局样式:global.css;
    框架布局:layout.css;
    字体样式:font.css;
    链接样式:link.css;
    打印样式:print.css;

    二.常用类/ID命名规范

    页 眉:header
    内 容:content
    容 器:container
    页 脚:footer
    版 权:copyright 
    导 航:menu
    主导航:mainMenu
    子导航:subMenu
    标 志:logo
    标 语:banner
    标 题:title
    侧边栏:sidebar
    图 标:Icon
    注 释:note
    搜 索:search
    按 钮:btn
    登 录:login
    链 接:link
    信息框:manage
    ……

    常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……

     

    CSS书写规范及方法

    一. 常规书写规范及方法

    1. 选择DOCTYPE:

    XHTML 1.0 提供了三种DTD声明可供选择:

    过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

    严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

    框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

    理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

    2. 指定语言及字符集:

    为文档指定语言:

    <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

    为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:
    常用的语言定义:

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    标准的XML文档语言定义:
    <?xml version=”1.0″ encoding=” utf-8″?>
    针对老版本的浏览器的语言定义:
    <meta http-equiv=”Content-Language” content=” utf-8″ />
    为提高字符集,建议采用“utf-8”。

    3. 调用样式表:

    外部样式表调用:

    页面内嵌法:就是将样式表直接写在页面代码的head区。 如:

    <style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
    外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

    <link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />

    在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。

    4、选用恰当的元素:

    根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div 或者是span;

    避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;

    尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;

    5、派生选择器:

    可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:

    .mainMenu ul li {background:url(images/bg.gif;)}

    6、辅助图片用背影图处理:

    这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:

    #logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

    7、结构与样式分离:

    在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。

    8、文档的结构化书写:

    页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:

    <div id=”mainMenu”>
    <ul>
    <li><a href=”#” >首页</a></li>
    <li><a href=”#” >介绍</a></li>
    <li><a href=”#” >服务</a></li>
    </ul>
    </div>

    /*=====主导航=====*/
    #mainMenu {
    width:100%;
    height:30px;
    background:url(images/mainMenu_bg.jpg) repeat-x;
    }
    #mainMenu ul li {
    float:left;
    line-height:30px;
    margin-right:1px;
    cursor:pointer;
    }
    /*=====主导航结束=====*/

    9、鼠标手势:

    在XHTML标准中,hand只被IE识别,当需要将鼠标手势转换为“手形”时,则将“hand”换为“pointer”,即“cursor:pointer;”

    二.注释书写规范

    1、行间注释:

    直接写于属性值后面,如:

    .search{
    border:1px solid #fff;/*定义搜索输入框边框*/
    background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
    }

    2、整段注释:

    分别在开始及结束地方加入注释,如:

    /*=====搜索条=====*/
    .search {
    border:1px solid #fff;
    background:url(../images/icon.gif) no-repeat #333;
    }
    /*=====搜索条结束=====*/

    三.样式属性代码缩写

    1、不同类有相同属性及属性值的缩写:

    对于两个不同的类,但是其中有部分相同甚至是全部相同的属性及属性值时,应对其加以合并缩写,特别是当有多个不同的类而有相同的属性及属性值时,合并缩写可以减少代码量并易于控制。如:

    #mainMenu {
    background:url(../images/bg.gif);
    border:1px solid #333;
    width:100%;
    height:30px;
    overflow:hidden;
    }
    #subMenu {
    background:url(../images/bg.gif);
    border:1px solid #333;
    width:100%;
    height:20px;
    overflow:hidden;
    }

    两个不同类的属性值有重复之处,刚可以缩写为:

    #mainMenu,#subMenu {
    background:url(../images/bg.gif);
    border:1px solid #333;
    width:100%;
    overflow:hidden;
    }
    #mainMenu {height:30px;}
    #subMenu {height:20px;}

    2、同一属性的缩写:

    同一属性根据它的属性值也可以进行简写,如:

    .search {
    background-color:#333;
    background-image:url(../images/icon.gif);
    background-repeat: no-repeat;
    background-position:50% 50%;
    }
    .search {
    background:#333 url(../images/icon.gif) no-repeat 50% 50%;
    }

    3、内外侧边框的缩写:

    在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的,当这四个属性值不同时也可直接缩写,如:

    .btn {
    margin-top:10px;
    margin-right:8px;
    margin-bottom:12px;
    margin-left:5px;
    padding-top:10px;
    padding-right:8px;
    padding-bottom:12px;
    padding-left:8px;
    }

    则可缩写为:

    .btn {
    Margin:10px 8px 12px 5px;
    Padding:10px 8px 12px 5px;
    }

    而如果当上边与下边、左边与右边的边框属性值相同时,则属性值可以直接缩写为两个,如:

    .btn {
    margin-top:10px;
    margin-right:5px;
    margin-bottom:10px;
    margin-left:5px;
    }

    缩写为:

    .btn {margin:10px 5px;}

    而当上下左右四个边框的属性值都相同时,则可以直接缩写成一个,如:

    .btn {
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:10px;
    }

    缩写为:

    .btn{margin:10px;}

    4、颜色值的缩写:

    当RGB三个颜色值数值相同时,可缩写颜色值代码。如:

    .menu { color:#ff3333;}

    可缩写为:

    .menu {color:#f33;}

    四.hack书写规范

    因为不同浏览器对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同,比如IE在很多情况下就与FF存在3px的差距,对于这些差异性,就需要利用css 的hack来进行调整,当然在没有必要的情况下,最好不要写hack来进行调整,避免因为hack而导致页面出现问题。

    1、 IE6、IE7、Firefox之间的兼容写法:

    写法一:

    IE都能识别*;标准浏览器(如FF)不能识别*;
    IE6能识别*,但不能识别 !important,
    IE7能识别*,也能识别!important;
    FF不能识别*,但能识别!important;
    根据上述表达,同一类/ID下的CSS  hack可写为:
    .searchInput {
    background-color:#333;/*三者皆可*/
    *background-color:#666 !important; /*仅IE7*/
    *background-color:#999; /*仅IE6及IE6以下*/
    }
    一般三者的书写顺序为:FF、IE7、IE6.

    写法二:

    IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写:
    .searchInput {
    background-color:#333;/*通用*/
    _background-color:#666;/*仅IE6可识别*/
    }

    写法三:

    *+html 与 *html 是IE特有的标签, Firefox 暂不支持。
    .searchInput {background-color:#333;}
    *html .searchInput {background-color:#666;}/*仅IE6*/
    *+html .searchInput {background-color:#555;}/*仅IE7*/

    屏蔽IE浏览器:

    select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

    *:lang(zh) select {font:12px  !important;} /*FF的专用*/
    select:empty {font:12px  !important;} /*safari可见*/

    IE6可识别:

    这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

    select { display /*IE6不识别*/:none;}

    IE的if条件hack写法:

    所有的IE可识别:

    <!–[if IE]> Only IE <![end if]–>
    只有IE5.0可以识别:
    <!–[if IE 5.0]> Only IE 5.0 <![end if]–>
    IE5.0包换IE5.5都可以识别:
    <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
    仅IE6可识别:
    <!–[if lt IE 6]> Only IE 6- <![end if]–>
    IE6以及IE6以下的IE5.x都可识别:
    <!–[if gte IE 6]> Only IE 6/+ <![end if]–>
    仅IE7可识别:
    <!–[if lte IE 7]> Only IE 7/- <![end if]–>

    2、清除浮动:

    在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

    select:after {
    content:”.”;
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    注:此文转载于网络

  • 八皇后代码之JAVA修改版

    原代码忘了是在哪里找到的,我只是稍微修改了一点点东西,感觉写的非常不错,里面的注释也不少这里就不说废话了。

    public class q8 {
     private int[] arr = new int[8];//这个数组的元素的值表示皇后的纵坐标,元素的下标表示第几行
     private int x=1;//用来标识每次输出的是第几种方法

     public q8() {//构造方法
      // 从第零个皇后开始放置
      huisu(0);
     }

     private void displayArr() {//显示每一种方法中皇后的放置
      System.out.println(“<—–第”+x+”种方法开始——>”);
      for (int i = 0; i < 8; i++) {
       for (int j = 0; j < 8; j++) {
        if (arr[i] != j) {
         System.out.print(” *”);
        } else {
         System.out.print(” Q”);
        }
       }

       System.out.println();
      }
      System.out.println(“<—–第”+x+++”种方法结束——>”+”\n”);
     }

     private boolean canPutQ(int n) {//该方法判断皇后是否能放置
      for (int i = 0; i < n; i++) {
       
       if ( ((n – i) == Math.abs(arr[n] – arr[i]))// 判断对角线的斜率为1或-1
         || (arr[i] == arr[n])
        )
       {
        return false;
       }
      }

      return true;
     }

     private void huisu(int n) {//回溯
      if (n == 8) {
       displayArr(); // 放置皇后
       return;
      } else {
       for (int i = 0; i < 8; i++) {
        //
        arr[n] = i;
        if (canPutQ(n)) {
         // 放下一个皇后
         huisu(n + 1);
        }
       }
      }
     }

     public static void main(String[] args) {
      new q8();
     }
    }

    >> 什么是八皇后问题

    八皇后问题是一个古老而著名的问题,是回溯算法的典型例题。该问题是十九世纪著名的数学家高斯1850年提出:在8X8格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行、同一列或同一斜线上,问有多少种摆法。

    高斯认为有76种方案。1854年在柏林的象棋杂志上不同的作者发表了40种不同的解,后来有人用图论的方法解出92种结果。

    以上摘自百度百科[地址:http://baike.baidu.com/view/698719.htm]

  • 凌乱的文件铺满了我的桌面 任务终于完成了

    lingluan

     

     

    看看桌面上乱的,全是那些临时性的文件哎。。。一会就把你们统统消灭了。。。

    今天终于把这些乱七八糟要做的图都给弄出来了,忙了几个小时了。

    昨天晚上在弄VB,是人工智能的一个小程序,问题不是很难,但是很麻烦,而且代码稍微弄错,测试时就会出现料想不到的结果。

    今天还有个程序没弄好,就写到这里呵呵。。。

  • 写规范CSS代码 避免浏览器解析错误

    昨天改CSS导航栏代码后,让很多朋友帮忙测试,但是在两台机器上就是显示不出效果,很多CSS样式就像没有一样,很是郁闷。。。

    在群里啊,网站上啊发问得到的答案都是兼容性不好,最好写个单独针对IE的CSS,俺的CSS功力实在不行,小的修改还行,但是要自己独立写个完整的兼容性很好的CSS对我还是有一定难度的。

    后来无意浏览CSS类的文章时发现了一些关于IE6兼容性的文章,上面说道

    在做div+css网页设计的时候突然IE6不能正常解析CSS文件,解决半天也不得其解,于是上网去找老师,最后在网上找到了一篇好的文章,且解决了问题,特发出来为大家欣赏,首先谢谢本文作者。

      网页采用了 UTF-8 编码格式,这本来没有问题,问题是外部 CSS 文件默认是 ANSI 编码,并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的,然而当 CSS 文件中包含有中文注释时就可能不尽如人意了!估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析,所以才会发生 CSS 在 IE6 下不起作用的情况。看来微软已注意到这个问题,在 IE7 中把它修复了。

      但是用IE6 的人还是不少。因此这个问题需要解决:
      方法一:把 CSS、JS 和网页文件都统一保存为 UTF-8 格式。
      方法二:去掉 CSS、JS 中的中文注释,或者改为英文。

      上文为IE6因为编码问题无法正确解析CSS文件

    突然想起我的CSS里面好像有中文注释,赶紧查看下,确实是有。。。删除之,问题解决,爽啊。。。

  • Java代码之全角半角转换

    实现代码如下:

    public class change {

    public static void main(String[] args) {

    String QJstr=”全角转半角DAO”;

    String result=SBCchange(QJstr);

    System.out.println(QJstr+”\n”+result);

    }

    public static final String SBCchange(String QJstr)
    {
    String outStr=””;
    String Tstr=””;
    byte[] b=null;

    for(int i=0;i<QJstr.length();i++)
    {
    try
    {
    Tstr=QJstr.substring(i,i+1);
    b=Tstr.getBytes(“unicode”);
    }
    catch(java.io.UnsupportedEncodingException e)
    {
    e.printStackTrace();
    }

    if (b[3]==-1)
    {
    b[2]=(byte)(b[2]+32);
    b[3]=0;

    try
    {
    outStr=outStr+new String(b,”unicode”);
    }
    catch(java.io.UnsupportedEncodingException e)
    {
    e.printStackTrace();
    }
    }else outStr=outStr+Tstr;
    }

    return outStr;
    }

    }

    public class Test {
    public static void main(String[] args) {
    String QJstr = “hello”;
    String QJstr1 = “hehe”;

    String result = BQchange(QJstr);
    String result1 = QBchange(QJstr1);

    System.out.println(QJstr + “\n” + result);
    System.out.println(QJstr1 + “\n” + result1);
    }

    // 半角转全角
    public static final String BQchange(String QJstr) {
    String outStr = “”;
    String Tstr = “”;
    byte[] b = null;

    for (int i = 0; i< QJstr.length(); i++) {
    try {
    Tstr = QJstr.substring(i, i + 1);
    b = Tstr.getBytes(“unicode”);
    } catch (java.io.UnsupportedEncodingException e) {
    e.printStackTrace();
    }
    if (b[3] != -1) {
    b[2] = (byte) (b[2] – 32);
    b[3] = -1;
    try {
    outStr = outStr + new String(b, “unicode”);
    } catch (java.io.UnsupportedEncodingException e) {
    e.printStackTrace();
    }
    } else
    outStr = outStr + Tstr;
    }
    return outStr;
    }

    // 全角转半角
    public static final String QBchange(String QJstr) {
    String outStr = “”;
    String Tstr = “”;
    byte[] b = null;

    for (int i = 0; i< QJstr.length(); i++) {
    try {
    Tstr = QJstr.substring(i, i + 1);
    b = Tstr.getBytes(“unicode”);
    } catch (java.io.UnsupportedEncodingException e) {
    e.printStackTrace();
    }
    if (b[3] == -1) {
    b[2] = (byte) (b[2] + 32);
    b[3] = 0;
    try {
    outStr = outStr + new String(b, “unicode”);
    } catch (java.io.UnsupportedEncodingException e) {
    e.printStackTrace();
    }
    } else
    outStr = outStr + Tstr;
    }
    return outStr;
    }
    }

    /**/// /
    // / 转全角的函数(SBC case)
    // /
    // /任意字符串
    // /全角字符串
    // /
    // /全角空格为12288,半角空格为32
    // /其他字符半角(33-126)与全角(65281-65374)的对应关系是:均相差65248
    // /
    public static String ToSBC(String input) {
    // 半角转全角:
    char[] c = input.toCharArray();
    for (int i = 0; i< c.length; i++) {
    if (c[i] == 32) {
    c[i] = (char) 12288;
    continue;
    }
    if (c[i]< 127)
    c[i] = (char) (c[i] + 65248);
    }
    return new String(c);
    }

    /**/// /
    // / 转半角的函数(DBC case)
    // /
    // /任意字符串
    // /半角字符串
    // /
    // /全角空格为12288,半角空格为32
    // /其他字符半角(33-126)与全角(65281-65374)的对应关系是:均相差65248
    // /
    public static String ToDBC(String input) {
    char[] c = input.toCharArray();
    for (int i = 0; i< c.length; i++) {
    if (c[i] == 12288) {
    c[i] = (char) 32;
    continue;
    }
    if (c[i]> 65280&& c[i]< 65375)
    c[i] = (char) (c[i] – 65248);
    }
    return new String(c);
    }