<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列表说明dl dt dd</title>

    <style type="text/css">

        body {

            margin:0;

            padding: 0;

            font: 14px/16px "microsoft yahei";

        }

        .box {

            width: 780px;

            margin:0 auto;

        }

        .box dl  /*类似于ul*/

        {

            display: block;

            border-bottom: 1px solid #696464;

            padding-bottom: 6px;

            overflow: hidden;

        }

        /*dt主要用于分类标题*/

        .box dl dt

        {

            display: block;

            float: left;

            width: 60px;

            text-align: right;

            height: 22px;

            line-height: 22px;

            padding-right: 6px;

        }

        .box dl dt a

        {

            color: #e4393c;

            font-weight: bold;

            text-decoration: underline;

            font-size: 10pt;

        }

        /*dd主要用于分类标题--说明、详细列表*/

        .box dl dd

        {

            display: block;

            overflow: hidden;

        }

        .box dl dd a

        {

            display: block;

            float: left;

            border-left: 1px solid #CCC;

            color: #635F5F;

            font-size: 9pt;

            padding: 0 8px;

            height: 14px;

            line-height: 14px;

            margin: 4px 0;

        }

    </style>

</head>

<body>

<div class="box">

    <dl>

        <dt><a href="#">电子书</a></dt>

        <dd>

            <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>

            <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>

            <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>

            <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>

            <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>

            <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>

        </dd>

    </dl>

    <dl>

        <dt><a href="#">数字音乐</a></dt>

        <dd>

            <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>

            <a href="#">乡村民谣</a> <a href="#">有声读物</a>

        </dd>

    </dl>

    <dl>

        <dt><a href="#">音像</a></dt>

        <dd>

            <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>

        </dd>

    </dl>

    <dl>

        <dt><a href="#">文艺</a></dt>

        <dd>

            <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a

                href="#">艺术</a>

        </dd>

    </dl>

    <dl>

        <dt><a href="#">人文社科</a></dt>

        <dd>

            <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>

            <a href="#">哲学/宗教</a> <a href="#">社会科学</a>

        </dd>

    </dl>

    <dl>

        <dt><a href="#">经管励志</a></dt>

        <dd>

            <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>

        </dd>

    </dl>

</div>

</body>

</html>

html+css

项目列表dl、dt、dd使用的更多相关文章

  1. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  2. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  3. dl,dt,dd标签 VS 传统table实现数据列表

    过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难.现在,越来越多的前端开发er们开始使用xHTML+CSS替代最 ...

  4. dl dt dd标签

    <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...

  5. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  6. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  7. dl,dt,dd标记在网页中要充分利用

    dl,dt,dd标记在网页中要充分利用 来源:网络整理 时间:08-05-27 点击: 点击这里收藏本文 我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签,很少 ...

  8. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  9. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

随机推荐

  1. Java基础学习总结（25）——Log4j快速入门教程

    log4j是一个优秀的日志组件,基本上所有的java开发项目都会用到它.下面将自己学习的一些心得总结一下,方便以后学习. log4j在项目中都不会单独使用,至少是我写过的java项目中没有.一般来说l ...

  2. [CSSinJS] Convert Sass (SCSS) Styled Button to CSSinJS with JavaScript Templates and Variables

    This is an introduction to CSSinJS that doesn't require any JavaScript knowledge, just a basic CSS. ...

  3. C++关于二进制位操作小结

    #include <iostream> using namespace std; //二进制位逆序. int Grial(int x) { int n = 32; int count = ...

  4. 一个工作快八年的老IT人士这几年沉浮总结的职场经验教训

    曾经我挺喜欢写博客,认为把心中的想法表达出来非常畅快.而且还能和网上非常多人沟通交流,如今我更喜欢把想法留在心中.博客非常久没更新了,刚才闲来无事.看看职场话题版块发现非常多人都挺迷茫的,所以我写一些 ...

  5. hdu1280 前m大的数（数组下标排序）

    前m大的数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  6. Python: PS 图层混合算法汇总

    本文用 Python 实现了PS 中的图层混合算法,把很多常见的图层混合算法都汇总到了一起,比起以前写的算法,就是用矩阵运算代替了很耗时的for 循环,运行效率有所提升.具体的代码如下: import ...

  7. excel导入数据的

    .aspx 文件 <form id="form1" runat="server"> <div> <asp:FileUpload I ...

  8. [USACO07JAN]平衡的阵容Balanced Lineup RMQ模板题

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 50000 + ...

  9. 紫书 例题 9-4 UVa 116 ( 字典序递推顺序）

    这道题在递推方式和那个数字三角形有一点相像,很容易推出来 但是这道题要求的是字典序,这里就有一个递推顺序的问题 这里用逆推,顺推会很麻烦,为什么呢? 如果顺推的话,最后一行假设有种情况是最小值,那么你 ...

  10. CCF模拟题 字符串匹配

    字符串匹配 时间限制: 1.0s 内存限制: 256.0MB 问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当选项打开时,表示同一个字母的大写 ...