WordPress-簡單的Menu制作

其实只是很简单的增加一列li,然后用css来控制这部分li的表现,如果要应用到其他模版,请自行修改css部分的相关代码

在header.php合适位置添加如下代码:

1
2
3
4
5
6
7
8
<div ID="menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div ID="wrapper">

style.css部分添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#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;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注