纯CSS实现的蓝色竖向导航代码

代码简介:纯CSS实现的蓝色竖向导航代码

代码内容:

<!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>
<title>纯CSS实现的蓝色竖向导航代码_网页代码站(www.webdm.cn)</title>
<STYLE type=text/css>
body {background: #fff;font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size: 12px;}
#menu DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://www.webdm.cn/images/20100916/bottom1.gif) #69c no-repeat left bottom; PADDING-BOTTOM: 10px; MARGIN: 0px auto; WIDTH: 150px; 

PADDING-TOP: 0px
}
#menu DT {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 1.4em; BACKGROUND: url(http://www.webdm.cn/images/20100916/top1.gif) #69c no-repeat left top; PADDING-BOTTOM: 10px; 

MARGIN: 0px; COLOR: #fff; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid
}
#menu DD {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; BACKGROUND: #47a; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 0px; BORDER-BOTTOM: #fff 1px solid
}
#gallery A {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(http://www.webdm.cn/images/20100916/arrow1.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 5px; WIDTH: 125px; COLOR: #fff; 

PADDING-TOP: 5px; TEXT-DECORATION: none
}
#gallery A:visited {
	PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: urlhttp://www.webdm.cn/images/20100916/(arrow1.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 5px; WIDTH: 125px; COLOR: #fff; 

PADDING-TOP: 5px; TEXT-DECORATION: none
}
#gallery A:hover {
	BACKGROUND: url(http://www.webdm.cn/images/20100916/arrowr1.gif) #258 no-repeat 11px 10px; COLOR: #9cf
}
OL LI {
	FONT-SIZE: 11px
}
</STYLE>
</head>

<body>
<div align="center">

<DIV id=menu>
<DL id=gallery>
  <DT>Art Gallery 
  <DD><A title="Paul Cezanne" 
  href="http://www.cssplay.co.uk/menus/definition.html#">Paul Cezanne</A> 
  <DD><A title="Henri Matisse" 
  href="http://www.cssplay.co.uk/menus/definition.html#">Henri Matisse</A> 
  <DD><A title="Vincent van Gogh" 
  href="http://www.cssplay.co.uk/menus/definition.html#">Vincent van Gogh</A> 
  <DD><A title="William Turner" 
  href="http://www.cssplay.co.uk/menus/definition.html#">William Turner</A> 
  <DD><A title="John Constable" 
  href="http://www.cssplay.co.uk/menus/definition.html#">John Constable</A> 
  <DD><A title="Claude Monet" 
  href="http://www.cssplay.co.uk/menus/definition.html#">Claude Monet</A> 
</DD></DL></DIV>


<p align="center"><p>很经典的CSS蓝色竖导航,方便实用。</p></p>
<p align="center"></p>
<br><br>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:http://www.webdm.cn/webcode/75836f1c-3f3e-4d32-acfd-5787da4aa24a.html

原文地址:https://www.cnblogs.com/webdm/p/2083405.html