首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架，HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</div>
</body>
</html>
现在设置div及连接的样式，代码如下：
<title>双竖线菜单</title>
<style type="text/css">
#menu {
120px; /*宽*/
font-size:14px; /*字体大小*/
background-color:#CCC; /*背景颜色*/
margin:0 auto; /*水平居中*/
padding:8px; /*内边距*/
}
#menu a,#menu a:visited{ /*链接样式*/
display:block; /*按块显示*/
background-color:#FFF;
height:1em; /*导航的高度*/
padding:4px 8px; /*上下边距、左右边距*/
text-decoration:none; /*没有下划线*/
margin:8px 0; /*外边距*/
border-left:8px solid #9ab; /*左边框*/
border-right:8px solid #9ab; /*右边框*/
color:#000; /*字体颜色*/
}
#menu a:hover {
color:red;
border-left:8px solid #000;
border-right:8px solid #000;
}
</style>
</head>
这时的菜单在浏览器窗口中就居中显示了，如图：
