项目列表dl、dt、dd使用

最新推荐文章于 2022-07-30 23:09:06 发布

weixin_33738555

最新推荐文章于 2022-07-30 23:09:06 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuerdong/p/7838994.html

本文介绍了一种使用HTML和CSS实现列表布局的方法，通过dl、dt和dd元素组织内容，并利用CSS进行样式美化，适用于创建分类清晰的导航菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>