簡單的Menu制作
Blogging Pro China用的是Relaxation_3column这个模版，有人问如何添加像BPCN那样的菜单，在此写下。其实只是很简单的增加一列<li>，然后用css来控制这部分<li>的表现，如果要应用到其他模版，请自行修改css部分的相关代码。
在header.php合适位置添加如下代码：
[html]
style.css部分添加以下代码：
[css]#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]
海豚的WordPress Theme教程 part3
上回我们已经获得了header.php, index.php, sidebar.php, footer.php这四个文件，接下来我们要做的就是搭积木了。
header.php
[php]
- line1-5：用来描述页面的基本信息，诸如使用那一种标准，字符编码，还有页面标题。
- line7-13：一些meta标签信息和站点ico设定。
- line15-20：对css文件和rss订阅地址的设定，方便自动发掘程序。
- line22-24：我也不知道干吗的，反正个个模版都有-_-;。
- line29-35：标题部分。
真正在页面上看到的效果其实只有line29-35这一段，一开始只有Blog标题（左）和login链接（右），后来为了方便跳转到页底的Sub-Menu部分又增加了一个链接。标题图片KD02是直接在body里设定的。相应的CSS部分如下：
[css]
html, body {
margin: 0;
padding: 0;
}
body {
background: #fff url(images/bg.jpg) no-repeat center top;
font-size: 1em;
font-family:”Trebuchet MS”, “Lucida Grande”, Arial, Helvetica, sans-serif;
word-spacing: 0.15em;
letter-spacing: 0em;
line-height:1.3em;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#header {
float:left;
overflow:hidden;
display:inline-block;
font-size:0.8em;
background:#797979;
color:#fff;
height:20px;
width:100%;
}
.bloginfo a {
float:left;
color:#fff;
text-align:left;
padding:0 0 0 5px;
}
.admin a {
float:right;
color:#fff;
text-align:right;
padding:0 5px 0 0;
}
[/css]
part4我会很快跟上，这篇一开始因为调试显示代码浪费了很多时间。