<!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. Varnish 问题点 与 技术方案 Varnish 优劣分析

      A10 有没有能做热点统计   1 Varnish 分布式 HA  (目前没有HA) 2 Varnish 热点监控     (建议热点需要外部插件统计,API的话目前并木有发现,但是他自带一个伪热 ...

  2. java关闭资源，自制关闭资源工具类

    在网上看到一篇关于关闭资源的正确方式:http://blog.csdn.net/bornforit/article/details/6896775 该博文中的总结: (1)使用finally块来关闭物 ...

  3. Java排序算法(二)：简单选择排序

    [基本思想] 在要排序的一组数中.选出最小的一个数与第一个位置的数交换:然后在剩下的数中再找出最小的与第二个位置的数交换,如此循环至倒数第二个数和最后一个数比較为止. 算法关键:找到最小的那个数.并用 ...

  4. sublime配置python

    Sublime Text 2作为一款轻量级的编辑器,特点鲜明.方便使用,愈发受到普罗大众的喜爱.我个人近期也開始用了起来.同一时候,我近段时间还在学习Python的相关东西.所以開始用ST2来写Pyt ...

  5. （iOS）确保设置话筒模式成功 AudioSessionSetProperty

    本人编写过一个应用,须要把实时音频播放出来,而且要从话筒播放声音,为此,作下面操作: //Step 1: 初始化 AudioSessionInitialize(NULL,NULL, NULL, sel ...

  6. css3中rem和em是干嘛的

    css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...

  7. OpenCV与Socket实现树莓派获取摄像头视频至电脑

    OpenCV能够为我们带来便捷的图像处理接口,但是其处理速度在一块树莓派上肯定是不尽如人意的.尤其当我们想要使用复杂的算法时,只能把算法托到服务器上才有可能.这里介绍了一种方法,实现树莓派传输Mat至 ...

  8. 9.java 操作mongodb插入、读取、修改以及删除基础

    1 package mongodb; import java.net.UnknownHostException; import java.util.ArrayList; import java.uti ...

  9. UVALive - 6266 Admiral 费用流

    UVALive - 6266 Admiral 题意:找两条完全不相交不重复的路使得权值和最小. 思路:比赛的时候时间都卡在D题了,没有仔细的想这题,其实还是很简单的,将每个点拆开,连一条容量为1,费用 ...

  10. c#同步上下文SynchronizationContext学习笔记

    提供在各种同步模型中传播同步上下文的基本功能.同步上下文的工作就是确保调用在正确的线程上执行. 同步上下文的基本操作 Current 获取当前同步上下文 var context = Synchroni ...