效果图
双竖线网页完成步骤
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>双竖线</title>
<style type="text/css">
#menu{ 120px;
background:#CCC;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
margin:0 auto;
padding:8px;
}
#menu a,#menu a:visited{ display:block;
height:1em;
background-color:#FFF;
padding:4px 8px;
color:#000;
text-decoration:none;
margin:8px 0px;
border-left:8px solid #9ad;
border-right:8px solid #9ad;}
#menu a:hover{ color:red;
border-left:8px solid #000;
border-right:8px solid #000;}
</style>
</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>
</body>
</html>