• 回顾下自己以前的作品

    今天无意中翻到了自己以前做的那些网页,感触甚多啊。

    虽然当时的作品有很多缺点,甚至当时都不懂DIV ,CSS,更不懂什么浏览器兼容性,但是当时也是花了很大功夫去做,而且那时这样的作品也算是不错的。。。哈哈,自恋下。

    这里共有两个作品,截图如下。

    ssite

     

     myzone

    第一个里面的flash导航是在网上下载的然后改了下。第二个作品里面的flash感觉搭配起来还是挺漂亮的,还有myzone那个logo当时也做了很久,PS不行哎。。。还有导航栏的图片过渡效果现在想下,用CSS很容易就搞定了,害我我当时用了那么多图片。。。

    如果想看看里面是啥样子的,那就下载下来看看吧,呵呵~~

    下载地址>>sstie   myzone

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

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

    我的主题一直就是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等订阅上面显示的时候完全没有格式,图片不显示,虽不是乱码,但是却像乱码一样难看,不知道各位知道怎么解决吗?

  • 修改iNove主题默认导航菜单 同时显示分类目录和页面

    iNove主题默认的导航菜单好看是好看,但是感觉用的人实在太多,而且我想要同时显示分类目录和页面,这在原来的设置下是没法实现的,只能改代码了。

    原来的inove/templates/header里是设置默认只显示页面或是显示分类,我要的是都显示,开始想把判断语句去掉,只剩两个函数wp_list_pages 和wp_list_categories 。这样试过后发现显示会有错位,另外IE下和FireFox下效果也不一样,只能再重新修改了。

    下面是inove/templates/header里面我现在的导航栏的代码(搜索框还没修改好,暂时未加上)

    <!– navigation START –>
    <div id=”navigation”>
     <div id=”homepage”>
      <a title=”首页” href=”http://www.zenoven.com”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/img/home.jpg” alt=”首页” height=”50″ width=”50″></img></a>
     </div>
     <div id=”navs”>
      <div id=”navigation_wp_list_categories”>
       <!– menus START –>
       <ul id=”menus”>
        <?php
          wp_list_categories(‘title_li=0&orderby=name&show_count=0’);
        ?>
       </ul>
        <!– menus END –>
       </div>
       <div id=”navigation_wp_list_pages”>
        <ul id=”menus” >
         <?php
          wp_list_pages(‘title_li=0&sort_column=menu_order’);
         ?>
        </ul>
       </div>
      </div>

      <div></div>
    </div>
    <!– navigation END –>

    我原本是想在navigation实现3栏的,主页图标一栏,然后navs一栏(用来显示分类和页面),搜索一栏,现在只有两栏,homepage和navs(navs下面有navigation_wp_list_categories和navigation_wp_list_pages)。

    下面是CSS代码(我是CSS小菜一个 有错误的请大家指出 :lol: )

    /* navigation START */
    #navigation {
     background:#FFF;
     height:50px;
     overflow:hidden;
    }
    #homepage {
     width:50px;
     height:50px;
     float:left;
    }
    #homepage a {
     display:block;
    }
    }
    #navs {
     float:left;
     width:600px;
     height:50px;
    }
    #navs #navigation_wp_list_pages {
     background:#FFF;
     float:left;
    }
    #navs #navigation_wp_list_categories {
     background:#FFF;
     float:left;
    }
    #menus li {
     display:inline;
     list-style:none;
    }
    #menus li a {
     background-color:#FFF;
     font-size:13px;
     display:block;
     color:#382E1F;
     height:25px;
     line-height:20px;
     padding:0 10px;
     text-decoration:none;
     float:left;
     z-index:1;
    }
    #menus li a:hover,
    #menus li a.current {
     color:#006699;
     background-color:#CDE7FA;
    }

    #menus li.current_page_item a,
    #menus li.current-cat a {
     color:#006699;
     background-color:#CDE7FA;
    }
    /*  searchbox 我这里其实没有用到*/

    #searchbox {
     background: url(img/searchbox.gif) no-repeat;
     width:209px;
     height:21px;
     display:block;
     float:right;
     margin-right:10px !important;
     margin-right:5px;
     padding:3px 2px;
    }
    #searchbox .textfield {
     background:none;
     border:0px;
     width:185px;
     float:left;
     margin-right:2px;
     padding-left:2px;
    }
    #searchbox .button {
     background:none;
     border:0px;
     width:18px;
     height:18px;
     cursor:pointer;
     float:left;
     margin-top:1px;
    }
    #searchbox .searchtip {
     color:#999;
    }
    /* navigation END */

     

    这个虽然是写的针对iNove主题的,但其实其他主题的实现方法都是一样的,主要都是修改header.php和sytle.css文件,只要认真研究下想实现漂亮的导航都是很简单的。