dl dt dd 实例

来源：互联网发布：中国各省历年gdp数据编辑：程序博客网时间：2024/04/29 17:46

<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;}

0 0