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>……< ...
随机推荐
- new SqlSessionFactoryBuilder().build(inputStream, properties)
SqlSessionFactory sqlSessionFactory =new SqlSessionFactoryBuilder().build(inputStream, properties); ...
- Unix/Linux环境C编程入门教程(42) 终端控制篇
函数介绍 getopt(分析命令行参数) 相关函数 表头文件 #include<unistd.h> 定义函数 int getopt(int argc,char * const argv[ ...
- 车祸 shit
今天上班的时候就觉得右眼在那跳,妈的,果不其然,回家路上自行车也跟人家撞上了,郁闷,裤子也坏了,腿也伤了.我还没反应过来,撞一起的是个女的,十七八岁吧,郁闷,什么破自行车.强烈呼吁不要去买小自行车了, ...
- [Immutable.js] Exploring Sequences and Range() in Immutable.js
Understanding Immutable.js's Map() and List() structures will likely take you as far as you want to ...
- [Cycle.js] Hyperscript as our alternative to template languages
Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can cr ...
- 智能路由——ESB
SOA之我见 SOA已然是企业级开发的必定之路.有人会问:我们有了OOP,还须要SOA吗?好吧我承认,这个问题也困扰了我非常久.现现在我得出的结论是:OOP是OOP,SOA是SOA. OOP是指面向对 ...
- solr热身
入博客园快满一年,居然没写一篇博客,好惭愧. 公司的搜索系统需要从Lucene.net(更新相当不给力)换成solr了,最近一直在学习solr,相关资料是相当的少啊,特别是还要在.net环境下开发.准 ...
- Emit技术使用实例及应用思路
System.Reflection.Emit提供了动态创建类并生成程序集的功能. 适用于.NET Framework 2.0及其以后的版本. 动态生成类在对于O/R Mapping来说有很大的作用,在 ...
- 自定义tableviewCell的分割线
第一种:addsubview UIView *line = [[UIView alloc]initWithFrame:CGRectMake(10, cellH-0.5, DEVW-10, 0.5)]; ...
- 使用 Require.js 引用第三方框架时遇到的一些情况
使用 Require.js 引用第三方框架时遇到的一些情况 在使用Require.js解析依赖的时候,会出现以下几种情况: 程序中的依赖关系 当前程序 依赖于 B包, B包 依赖于 A包 A包与B包两 ...