纯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/archive/2011/06/17/2083405.html

纯CSS实现的蓝色竖向导航代码相关推荐

css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片第二步: 在网页区添加样式定义 [code] /* = ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
纯css仿淘宝京东导航菜单栏
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
html背景样式代码,12种纯CSS实现的背景图案样式代码
这是使用纯css实现的背景图案样式,可以作用于任何元素甚至文本背景. 使用方法: 1使用NPM安装并下载pattern.css. 2导入pattern.css. 3.或在html文档中加载patter ...
快递信息css3手风琴代码_用纯CSS实现手风琴效果的示例代码
昨天在做一个旅游页面的项目,前端页面实现的过程中遇到这样一个需求.需要把一组图片形成手风琴的展示效果.认真的思考一遍后,决定就用普通的HTML+CSS就可以实现这个需求.今天趁着空闲时间稍微梳理了一下 ...
html边框闪烁代码,纯css实现动态边框的示例代码
背景这几天工作中遇到一个交互需求,要求实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,如图: 动态边框思路看到这个效果,我首先想到的是设置元素的border属性,可惜border ...
HTML怎么制作镂空文字遮罩,用纯CSS实现镂空效果的示例代码
近来研究了一下镂空效果. background-clip: text 背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都 ...
HTML下拉菜单怎么做成横向,纯css实现横向下拉导航菜单(可做左侧类目导航)
[实例简介] [实例截图] [核心代码] 无标题文档 *{ margin:0; padding:0;}/*通用选择器样式*/ body{ font-family:"微软雅黑";}/ ...
漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...

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

纯CSS实现的蓝色竖向导航代码相关推荐

最新文章

热门文章