WordPress-簡單的Menu制作

由 发表于 ┊1,647 PV

其实只是很简单的增加一列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;
}