CSS蓝色竖导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS蓝色竖导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为CSS蓝色竖导航，属于站长常用代码" />
<title>CSS蓝色竖导航</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(images/bottom.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(images/top.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(images/arrow.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: urlimages/(arrow.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 5px; WIDTH: 125px; COLOR: #fff; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#gallery A:hover {
	BACKGROUND: url(images/arrowr.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.baidu.com/menus/definition.html#">paul cezanne</a> 
  <dd><a title="henri matisse" 
  href="http://www.baidu.com/menus/definition.html#">henri matisse</a> 
  <dd><a title="vincent van gogh" 
  href="http://www.baidu.com/menus/definition.html#">vincent van gogh</a> 
  <dd><a title="william turner" 
  href="http://www.baidu.com/menus/definition.html#">william turner</a> 
  <dd><a title="john constable" 
  href="http://www.baidu.com/menus/definition.html#">john constable</a> 
  <dd><a title="claude monet" 
  href="http://www.baidu.com/menus/definition.html#">claude monet</a> 
</dd></dl></div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)