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>……< ...
随机推荐
- Unix/Linux环境C编程入门教程(41) C语言库函数的文件操作详解
上一篇博客我们讲解了如何使用Linux提供的文件操作函数,本文主要讲解使用C语言提供的文件操作的库函数. 1.函数介绍 fopen(打开文件) 相关函数 open,fclose 表头文件 #in ...
- spring mvc 安全
1,使用 spring form 标签 防 csrf 攻击 2,标明请求方法:RequestMethod.GET,RequestMethod.POST, PATCH, POST, PUT, and D ...
- SPRING+JNDI+C3P0 in tomcat6
Tomcat 中Jndi是使用Tomcat自带的连接池,由于客户要求,抛弃Tomcat自带的连接池.使用c3p0 .经过几个小时调试,解决方案如下: 环境:Tomcat 6 下面来看Jndi 与 c3 ...
- DirectX 开发环境配置
想使用DirectX开发游戏,前提是要搭建DirectX的开发环境啦. 下面我们就一起学习下DirectX开发环境搭建 1. 首先是DirectX SDK安装, 下载地址是: http://www ...
- 期望dp-hdu-4336-Card Collector
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4336 题目大意: 有n种卡片,每包中至多有一种卡片,概率分别为p1,p2,...pn,可能有的没有卡 ...
- [HeadFirst-HTMLCSS学习笔记][第十二章HTML5标记]
考虑HTML结构 HTML5即是把原来<div>换成一些更特定的元素.能够更明确指示包含什么内容. (页眉,导航,页脚,文章) article nav 导航 header footer t ...
- iOS 面试题汇总
1. Object-c的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么? 答: Object-c的类不可以多重继承;可以实现多个接口,通过实现 ...
- 0118——UILabel和导入字体
UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(10, 100, 300, 100)]; 1.设置文字颜色 label.textC ...
- 关于自定义UICollectionViewLayout的一点个人理解<一>
自定义UICollectionView,主要会用到以下几个方法: - (void)prepareLayout; 第一次加载layout.刷新layout.以及- (BOOL)shouldInvalid ...
- mysql Fatal error encountered during command execution
由于在操作中使用了自定义参数. 所以得在连接字符串中加上Allow User Variables=True: 表示允许用户自定义参数.