為模版添加簡單的導航欄

nav  写这个主要是给比我还新的新手看得,基本上会写页面的都可以忽略掉。
  BloggingPro China现在使用的模版原来是没有导航栏的,之后为了方便来访者才添加了现在这个简单的导航栏。具体步骤如下:

  1. 编辑模版目录下的header.php,在合适的位置(一般来说放在<div id=”wrapper”>上面就可以了)增加下面这段代码:
    [html]

    [/html]

  2. 编辑模版目录下的style.css,追加以下内容:
    [css]/* menu */
    #menu {
    position: relative;
    height:1.7em;
    line-height:1.7em;
    width:450px;
    padding: 0 0 0 20px;
    margin: -30px 0 0 0;
    z-index:2;
    }

    #menu ul {
    margin:0;
    padding:0;
    }

    #menu li {
    float:left;
    margin:0;
    padding:0;
    list-style-type:none;
    border-right:0px solid;
    white-space:nowrap;

    }

    #menu li a {
    display:block;
    padding:0 5px;
    text-transform: uppercase;
    font-size:12px;
    letter-spacing:1px;
    color: #000;
    }

    #menu li a:hover {
    text-decoration: underline;
    }[/css]

  就这么简单,以后要加新的导航内容,只要参照第一步就可以了。我的css写的比较简单,各位可以自己适量修改,比如增加背景色/图片什么的。至于工具还是老样子推荐:Firefox + Web Developer

Technorati Tags: , ,

5 Responses to “為模版添加簡單的導航欄”

Leave a Reply

Note: Commenter is allowed to use '@User+blank' to automatically notify your reply to other commenter. e.g, if ABC is one of commenter of this post, then write '@ABC '(exclude ') will automatically send your comment to ABC. Using '@all ' to notify all previous commenters. Be sure that the value of User should exactly match with commenter's name (case sensitive).