dl,dt,dd制作的CSS垂直菜单

感觉跟ul和li有点类似,不过也算是一种新思路,源码如下:

dl,dt,dd制作的CSS垂直菜单

#menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(file:///E|/ceshi/media/bottom.gif) no-repeat bottom left;}
#menu dt {margin:0; padding: 10px; font-size: 1.4em; font-weight:bold; color: #fff; border-bottom:1px solid #fff; background: #69c url(file:///E|/ceshi/media/top.gif) no-repeat top left;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; border-bottom:1px solid #fff; background: #47a;}
#gallery a, #gallery a:visited {color:#fff; text-decoration:none; display:block; padding:5px 5px 5px 20px;
background: #47a url(file:///E|/ceshi/media/arrow.gif) no-repeat 10px 10px; width:125px;
}
#gallery a:hover {background: #258 url(file:///E|/ceshi/media/arrowr.gif) no-repeat 11px 10px; color:#9cf;}
ol li {font-size:11px;}

Gallery
Paul Cezanne
Henri Matisse
Vincent van Gogh
William Turner
John Constable
Claude Monet

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • dl,dt,dd制作的CSS垂直菜单

    感觉跟ul和li有点类似,不过也算是一种新思路,源码如下: dl,dt,dd制作的CSS垂直菜单 #menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(file:///E|/ceshi/media/bottom.gif) no-repeat bottom left;} #menu dt {margin:0; padding: 10px; font-size: 1.4em; font-we

  • div+css布局必了解的列表元素ul ol li dl dt dd详解

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>--</li> <li>--</li> <li>--</li> </ol> 表现为: 1-- 2-- 3-- ul 无序列表,表现为li前面是大圆点而不是123 <ul> <li>--</li> <li>--</li> </ul&

  • DL.DT.DD实现左右的布局简单例子第1/2页

    DL.DT.DD实现左右的布局简单例子第1/2页

    这是今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方: 1.如果用UL还布局,右边一栏比较麻烦: 2.文字外边的边框自适应比较麻烦: 3.很可能要定死高度: 所以,细细地看一看这个布局,想一想还是用DL.DT.DD作是合理的: 1.布局合理一些: 2.将来扩展很方便: 3.CSS一定很少: 试着写了写,看一看还行!在可控范围内! 布局布分当然不用说了: 复制代码 代码如下: <h1>标题</h1>  <div>    <

  • XHTML下用dl,dt,dd标签实现翻页的效果代码

    XHTML下用dl,dt,dd标签实现翻页的效果代码

    今天在标准之类的blog(http://www.aa25.cn)看到"纯CSS代码实现翻页" 的文章 dl { position:absolute; width:389px; height:154px; border:10px solid #eee; } dd { margin:0; width:389px; height:154px; overflow:hidden; } img { border:1px solid black } dt { position:absolute; r

  • jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

    jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

    功能很实用,代码非常的简单 效果1. 效果2. 样式代码如下: 复制代码 代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0 } span{ color:#FF2B13 } a{ text-decoration:none; color:#515050 } a:hover{ text-decorat

  • Div+Css(+Js)菜单代码及制作工具

    Div+Css(+Js)菜单代码及制作工具

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • css 二级菜单 实现代码集合 修正版

    css 二级菜单 实现代码集合 修正版

    css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla

  • 效果直逼flash的Div+Css+Js菜单

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • 以前写的两个CSS树形菜单

    第一次写的CSS树形菜单比较简单,只有二级目录,javascript代码总共不到十行,主要是靠CSS中的包含写法来实现的.演示地址:(1)http://www.cnlei.org/mycode/csstreemenu/index.html(2)http://cnlei.iecn.net/mycode/csstreemenu/index.html下载链接:(1)http://www.cnlei.org/mycode/csstreemenu/csstreemenu.rar(2)http://cnle

  • 快速制作CSS导航菜单教

    快速制作CSS导航菜单教

    随着网页标准化观念深入人心,越来越多的网站采用了CSS架构.CSS架构的网页不但符合W3C标准,并且还非常美观.标准化网页从漂亮的CSS菜单开始.众所周知,CSS菜单都是一段代码.一段代码的编写出来,生成漂亮菜单,今天给大家介绍一款小的软件:CSS Tab Designer! CSS Tab Designer是一款使用CSS来设计导航菜单的可视化软件,软件内置60多种不同风格的样式,只需修改现成样式模版,就能快速生成CSS菜单.特别值 得一提的是,软件生成的XHTML代码严格遵循网页标准,创建的

随机推荐