本文主要是介绍dl dt dd 实例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<body><div class="head"><div class="logo">前端开发教程</div></div><div class="nav"><ul><li class="current"><a href="#">CSS</a></li><li><a href="#">HTML</a></li><li><a href="#">JavaScript</a></li><li><a href="#">jQuery</a></li><li><a href="#">Ajax</a></li></ul></div><div class="tab"><div class="dc"><dl><dt>CSS 基础教程</dt><dd class="current"><a href="#">CSS 简介</a></dd><dd><a href="#">CSS 基础语法</a></dd><dd><a href="#">CSS 高级语法</a></dd><dd><a href="#">CSS 派生选择器</a></dd><dd><a href="#">CSS id 选择器</a></dd><dd><a href="#">CSS 类选择器</a></dd><dd><a href="#">CSS 属性选择器</a></dd><dd><a href="#">CSS 创建</a></dd></dl><dl><dt>CSS 样式</dt><dd><a href="#">CSS 背景</a></dd><dd><a href="#">CSS 文本</a></dd><dd><a href="#">CSS 字体</a></dd><dd><a href="#">CSS 链接</a></dd><dd><a href="#">CSS 列表</a></dd><dd><a href="#">CSS 表格</a></dd><dd><a href="#">CSS 轮廓</a></dd></dl><dl><dt>CSS 盒子模型</dt><dd><a href="#">CSS 盒子模型概述</a></dd><dd><a href="#">CSS 内边距</a></dd><dd><a href="#">CSS 边框</a></dd><dd><a href="#">CSS 外边距</a></dd><dd><a href="#">CSS 外边距合并</a></dd></dl><dl><dt>CSS 定位</dt><dd><a href="#">CSS 定位概述</a></dd><dd><a href="#">CSS 相对定位</a></dd><dd><a href="#">CSS 绝对定位</a></dd><dd><a href="#">CSS 浮动</a></dd></dl><dl><dt>CSS 选择器</dt><dd><a href="#">CSS 元素选择器</a></dd><dd><a href="#">CSS 选择器分组</a></dd><dd><a href="#">CSS 类选择器详解</a></dd><dd><a href="#">CSS ID 选择器详解</a></dd><dd><a href="#">CSS 属性选择器详解</a></dd><dd><a href="#">CSS 后代选择器</a></dd><dd><a href="#">CSS 子元素选择器</a></dd><dd><a href="#">CSS 相邻兄弟选择器</a></dd><dd><a href="#">CSS 伪类</a></dd><dd><a href="#">CSS 伪元素</a></dd></dl></div><div class="right"></div><div class="content"><h2>CSS简介</h2><hr/><div class="pageto"><a href="#">上一章</a><a href="#">下一章</a></div><hr class="hrc"/><h3>你应该知道这些知识</h3><p>在继续之前，你应该有一个以下基本认识：</p></div></div>
</body>*{padding:0px;margin:0px;
}
body{padding:0px;font:14px normal 'Microsoft YaHei';height:3000px;
}
a{text-decoration:none;
}
a:link{color:#000000;
}
.tab dl{margin-left:8px;display:inline;width:240px;
}
.tab dl dt{font:16px normal 'Microsoft YaHei';background:#39F; display:inline-block;width:200px;height:20px;padding:10px;margin-bottom:10px;
}
dd{margin-left:30px;line-height:25px;
}.head{width:60%;height:80px;margin:0px auto;background:#39F;padding-top:30px;
}
.logo{font-size:30px;font-family:'微软雅黑';color:#FFF;text-indent:30px;//缩进
}
.tab{width:60%;height:1800px;border:1px solid #CCC;margin:0px auto;
}
.nav{width:60%;height:20px;margin:0px auto;margin-bottom:20px;margin-top:10px;
}
.nav ul{list-style:none;font-size:20px;
}
.nav li{float:left;margin-left:30px;
}
.nav li.current{border-bottom:3px solid #cc0000;
}
.nav li a:hover{border-bottom:3px solid #cc0000;
}.content{margin-top:10px; margin-left:15px;clear:both;width:98%;
}
h2{font-weight:normal;
}
hr{width:98%;
}
.pageto a{display:block;float:left;width:60px;height:25px;background:#F5F5F5;margin-left:30px;text-align:center;margin-top:5px;padding-top:5px;margin-bottom:5px;
}
.hrc{width:98%;border:3px solid #CCC;
}
.right{height:1100px;background:#FF0;width:570px;float:right;
}
.tab div{float:left;
}这篇关于dl dt dd 实例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
