项目列表dl、dt、dd使用

<!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使用的更多相关文章

HTML 列表 <ol><ul><li><dl><dt><dd>
<ol>标签-有序列表定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异在 HTML 4.01 中,ol 元素的 "compact&q ...
html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认在当前中打开链接地 ...
dl,dt,dd标签 VS 传统table实现数据列表
过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难.现在,越来越多的前端开发er们开始使用xHTML+CSS替代最 ...
dl dt dd标签
<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...
DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
HTML中的ul, ol,li , dl,dt, dd标签
ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...
dl,dt,dd标记在网页中要充分利用
dl,dt,dd标记在网页中要充分利用来源:网络整理时间:08-05-27 点击: 点击这里收藏本文我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签,很少 ...
html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍结构语法 dl dt dd案例 dl dt dd总结一. ...
Div+css中ul ol li dl dt dd使用
ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

随机推荐

SpringMVC拓展
### 原生SpringMVC有如下缺陷参数的JSON反序列化只支持@RequestBody注解,这意味着不能在controller方法中写多个参数,如下代码是不对的 public Map test ...
虚构造函数与prototype
注意,构造函数不能是虚的,不然不会生效?(构造函数里面调用虚的函数,也不会生效). 而虚构造函数,指的是通过一个虚函数,来调用clone方法,生成一个新的实例.而这个clone里面,一般调用的是拷贝构 ...
Class C++
为了尽量降低全局变量的使用并提供用户自己定义类型的功能.C++语言提供了一种新的语言机制---类(class).并以类作为构造程序的基本单位 #include<iostream> usin ...
20. idea刷新项目、清除项目缓存
转自:https://www.cnblogs.com/suiyisuixing/p/7723458.html 点击File -> Invalidate caches ,点击之后在弹出框中点击确认 ...
HtmlHelper的扩展分页方法
一.新建一个空MVC项目,命名为MVCAppPager 二.新建一个文件夹PageHelper,在文件夹下新建接口IPageList以及实现类PageList IPageList接口: public ...
15:Challenge 11（主席树裸题）
总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 262144kB 描述给一个长为N的数列,有M次操作,每次操作是以下两种之一: (1)修改数列中的一个数 (2)求 ...
Firefox 浏览器有用的插件
1.Undo Closed Tabs Button或Undo Closed Tabs Button (revived) 恢复关闭的标签页 2.NetVideohunter Video Download ...
U-BOOT启动流程分析--start_armboot函数（二）
第二阶段的功能: 初始化本阶段所需的硬件设备(主要设置系统时钟.初始化串口.Flash.网卡.USB) 检测系统内存映射(memory map) 将内核映像和根文件系统映象从Flash上读到RAM空间 ...
CSUOJ 1635 Restaurant Ratings
1635: Restaurant Ratings Time Limit: 1 Sec Memory Limit: 128 MB Description A famous travel web sit ...
[Python] Manipulate Data with Dictionaries in Python
Dictionaries may be familiar to you as hash maps. In this lesson, you will learn how to create them, ...

项目列表dl、dt、dd使用

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

随机推荐

热门专题