css案例学习之ul li dl dt dd实现二级菜单
效果
代码实现
<!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" />
<title>二级菜单</title>
<style type="text/css"> /* 整体设置*/
#menu {
margin:;
padding:;
width:610px;
list-style-type:none;
font:14px Arial;
} #menu li {
float:left;
padding:;
margin: 1px ;
width:150px;
} /* 设置菜单项*/
#menu li dl {
width:150px;/*ie6*/
margin: ;
padding: 10px ;
background: #cb6 url(images/bottom.gif) no-repeat bottom left;
} #menu li dt a,#menu li dd a{ display:block;} /* 设置菜单项的dt */
/* 设置菜单项的dt */
#menu li dt {
margin:;
padding: 5px;
text-align:center;
border-bottom:1px solid #b00;
background:#ed8 url(images/top.gif) no-repeat top left;
} #menu li dt a ,#menu li dt a:visited {
display:block;
color:#;
text-decoration:none;
} /* 设置菜单项的dd */
#menu li dd { margin:;
padding:;
color: #fff;
background: #47a;
} #menu li dd.last {
border-bottom:1px solid #b00;
} #menu li dd a, #menu li dd a:visited {
height:1em;
display:block;
color:#fff;
text-decoration:none;
padding:4px 5px 4px 20px;
background: #47a url(images/arrow.gif) no-repeat 10px 10px;
} /*关闭子菜单*/ #menu li dd { display:none;} /* 设置鼠标响应 */ #menu li:hover dd { display:block;} #menu li dd a:hover {
background: #;
color:#9cf;
} </style>
</head> <body>
<ul id="menu">
<li>
<dl>
<dt><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl>
</li>
</ul>
</body>
</html>
针对ie6进行后期优化
<!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" />
<title>二级菜单</title>
<style type="text/css"> /* 整体设置*/
#menu {
margin:;
padding:;
width:610px;
list-style-type:none;
font:14px Arial;
} #menu li {
float:left;
padding:;
margin: 1px ;
width:150px;
} /* 设置菜单项*/
#menu li dl {
width:150px;/*ie6*/
margin: ;
padding: 10px ;
background: #cb6 url(images/bottom.gif) no-repeat bottom left;
} #menu li dt a,#menu li dd a{ display:block;} /* 设置菜单项的dt */
#menu li dt {
margin:;
padding: 5px;
text-align:center;
border-bottom:1px solid #b00;
background:
} #menu li dt.orange { background:#fa5 url(images/top.gif) no-repeat top left;}
#menu li dt.yellow { background:#ee5 url(images/top.gif) no-repeat top left;}
#menu li dt.green { background:#5e5 url(images/top.gif) no-repeat top left;}
#menu li dt.blue { background:#5cf url(images/top.gif) no-repeat top left;} #menu li dt a ,#menu li dt a:visited {
display:block;
color:#;
text-decoration:none;
} /* 设置菜单项的dd */
#menu li dd { margin:;
padding:;
color: #fff;
background: #47a;
} #menu li dd.last {
border-bottom:1px solid #b00;
} #menu li dd a, #menu li dd a:visited {
display:block;
color:#fff;
text-decoration:none;
padding:4px 5px 4px 20px;
background: #47a url(images/arrow.gif) no-repeat 10px 10px;
height:1em;
} /*关闭子菜单*/ #menu li dd { display:none;} /* 设置鼠标响应 */ #menu li:hover dd , #menu li a:hover dd { display:block;} #menu li:hover, #menu li a:hover { border:;}/*ie6*/ #menu li dd a:hover {
background: #;
color:#9cf;
} /*针对ie6的设置*/
#menu table { border-collapse:collapse;
padding:;
margin:-1px;
font-size:1em;
} </style>
</head> <body>
<ul id="menu">
<li>
<!--[if lte IE ]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="orange"><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl>
<!--[if lte IE ]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE ]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="yellow"><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl>
<!--[if lte IE ]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE ]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="green"><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl>
<!--[if lte IE ]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE ]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="blue"><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl>
<!--[if lte IE ]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>
css案例学习之ul li dl dt dd实现二级菜单的更多相关文章
- HTML 列表 <ol><ul><li><dl><dt><dd>
<ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- Div+css中ul ol li dl dt dd使用
ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...
- HTML中的ul, ol,li , dl,dt, dd标签
ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...
- html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...
- 【HTML】dl dt dd
摘要 看到没怎么使用过的html 标签,记录下 定义 dl 类似于 ul ,无任何样式,自定义列表容器, ul 为无序列表容器,ol 为有序列表容器 dt dd 类似于 li ,无任何样式,为帮助实现 ...
- html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...
- dl,dt,dd,ul,li,ol区别
dl.dt.dd也是列表项,不过它们被忽视得比较厉害,人们只知道ul.ol.li,却经常漠视它们的存在,其实有时候,dl.dt.dd也是非常好用的,这两个家族是近亲,很多地方都是一模一样. dl类似u ...
- ol,li,ul,dl,dt,dd
块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...
随机推荐
- VC运行库版本不同导致链接.LIB静态库时发生重复定义问题的一个案例分析和总结
转帖:http://blog.csdn.net/whygosofar/article/details/2821875 MSDN中对于在不同的配置下Link的LIB作了说明: C Runtime Lib ...
- 深入浅出Node.js (4) - 异步编程
4.1 函数式编程 4.1.1 高阶函数 4.1.2 偏函数用法 4.2 异步编程的优势与难点 4.2.1 优势 4.2.2 难点 4.3 异步编程解决方案 4.3.1 事件发布/订阅模式 4.3.2 ...
- juicer模板引擎使用
http://www.juicer.name/ <script src="~/Scripts/jquery-1.8.2.min.js"></script> ...
- 《Algorithms 4th Edition》读书笔记——2.4 优先队列(priority queue)-Ⅶ(延伸:堆排序的实现)
2.4.5 堆排序 我们可以把任意优先队列变成一种排序方法.将所有元素插入一个查找最小元素的有限队列,然后再重复调用删除最小元素的操作来将他们按顺序删去.用无序数组实现的优先队列这么做相当于进行一次插 ...
- sudo nopasswd
preface,不问头条,但汝读荐,诚意满满的!
- MySQL的备份和还原
MySQL的备份和还原 备份:副本 RAID1,RAID10:保证硬件损坏而不会业务中止: DROP TABLE mydb.tb1; 备份类型: 热备份.温备份和冷备 ...
- java匿名内部类,多态,接口练习
1多态以及接口调用方法: public class Interface { public static void main(String[] args) { Al x = new Al(); jian ...
- Duanxx的STM32学习:STM32命名规则
- 高性能WEB开发(6) - web性能測试工具推荐
WEB性能測试工具主要分为三种.一种是測试页面资源载入速度的,一种是測试页面载入完成后页面呈现.JS操作速度的,另一种是整体上对页面进行评价分析,以下分别对这些工具进行介绍,假设谁有更好的工具也请一起 ...
- linux cache swap 以及 虚拟内存等
提出四个问题及解答: 1)若进程在运行过程中,物理内存不足会发生什么? 2)为何进程在占用物理内存不变的情况下,系统的物理内存会增加? 3)为何程序的大小大于实际占用的物理内存?(假如程序30M,却只 ...