当前位置导航:炫浪网>>网络学院>>网页制作>>HTML与CSS教程

定义列表+CSS制作的垂直菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="gb2312" />
<title>dl,dt,dd制作的CSS垂直菜单</title>
<style type="text/css">
body {
  font-size: 12px;
  margin: 0;
}
#menu dl {
  margin: 0 auto;
  padding: 0 0 10px 0;
  width: 150px;
  background: #69c;
}
#menu dt {
  margin: 0;
  padding: 10px;
  background: #69c;
  color: #fff;
  font-size: 1.4em;
  font-weight: bold;
  border-bottom: 1px solid #fff;
}
#menu dd {
  margin: 0;
  padding: 0;
  background: #47a;
  color: #fff;
  font-size: 1em;
  border-bottom:1px solid #fff;
}
#gallery a, #gallery a:visited {
  display:block;
  padding:5px 5px 5px 20px;
  width:125px;
  background: #47a;
  color:#fff;
  text-decoration:none;
}
#gallery a:hover {
  background: #258;
  color:#9cf;
}
</style>
</head>

<body>
<div id="menu">
  <dl id="gallery">
    <dt>Gallery</dt>
    <dd><a href="#" title="Paul Cezanne">Paul Cezanne</a></dd>
    <dd><a href="#" title="Henri Matisse">Henri Matisse</a></dd>
    <dd><a href="#" title="Vincent van Gogh">Vincent van Gogh</a></dd>
    <dd><a href="#" title="William Turner">William Turner</a></dd>
    <dd><a href="#" title="John Constable">John Constable</a></dd>
    <dd><a href="#" title="Claude Monet">Claude Monet</a></dd>
  </dl>
</div>
</body>
</html>

炫 浪 学 院
相关内容
赞助商链接