<!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. Vs2012在Linux开发中的应用（1）：开发环境

    在Linux的开发过程中使用过多个IDE.code::blocks.eclipse.source insight.还有嵌入式厂商提供的各种IDE.如VisualDsp等,感觉总是不如vs强大好用.尽管 ...

  2. 关于Android手机MTP模式连接的一些设置（win7和ubuntu下，以红米1s为例）

    有些手机的MTP模式在电脑上识别不了,须要一些设置才干够,以下就网上收集来的一些设置方法集中贴过来: 一. win7下 參考:http://blog.ammrli.com/?p=1117 1.在设备管 ...

  3. elasticsearch搜索类型简单介绍

    简单搜索 GET请求很easy--你能轻松获取你想要的文档.让我们来进一步尝试一些东西.比方简单的搜索! 我们尝试一个最简单的搜索所有员工的请求: GET /megacorp/employee/_se ...

  4. hdu1879 继续畅通project（最小生成树）

    继续畅通project Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  5. EF数据迁移命令

    在包管理器控制台中输入命令“enable-migrations”,然后按Enter键!Visual Studio将生成一个名为“Configurations.cs”的文件; 你可以安全地忽略它,但你需 ...

  6. springboot 使用mybatis 通用Mapper，pagehelper

    首先需要maven导入需要的包,这里用的是sqlserver,druid,jtds连接数据库 <dependency> <groupId>com.alibaba</gro ...

  7. ZOJ 2588 Burning Bridges(求桥的数量，邻接表)

    题目地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2588 Burning Bridges Time Limit: 5 ...

  8. Docker安装配置教程

    Docker公开课 1 Docker介绍 1.1 Docker是什么 云计算\云服务 IAAS(基础设施即服务).PAAS(平台即服务).SAAS(软件即服务) Docker到底是什么呢? Docke ...

  9. 如何搭建Eclipse +Apache Tomcat配置Java开发环境

    Linux平台下如何搭建Eclipse +Apache Tomcat配置的Java开发环境 本文出自 "李晨光原创技术博客" 博客,请务必保留此出处http://chenguang ...

  10. 【Uva 1627】Team them up!

    [Link]: [Description] 给你n个人; 有一些人之间有认识关系 a认识b,b不一定认识a 让你把这n个人分成两组 使得这两组中的每一组: 组内的人与人之间都相互认识. 并且,使得两组 ...