项目列表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>表现 ...

随机推荐

Android Recovery OTA升级（一）—— make otapackage
文件夹文件夹概述 make otapackage BUILT_TARGET_FILES_PACKAGE ota_from_target_files WriteFullOTAPackage Sign ...
会变得ActionBar,让你的ActionBar与众不同
话不多说先看两张图: github地址:https://github.com/Smalinuxer/android-SlideActionBar 原理什么的有时间再讲,或者自行看代码; 兴许还会补充新 ...
Android4.42-Settings源代码分析之蓝牙模块Bluetooth（上）
继上一篇Android系统源代码剖析(一)---Settings 接着来介绍一下设置中某个模块的源代码.本文依然是基于Android4.42源代码进行分析,分析一下蓝牙模块的实现.建议大致看一下关于S ...
Beta分布从入门到精通
近期一直有点小忙,可是不知道在瞎忙什么,最终有时间把Beta分布的整理弄完. 以下的内容.夹杂着英文和中文,呵呵- Beta Distribution Beta Distribution Defini ...
leetcode -day23 Construct Binary Tree from Inorder and Postorder Traversal & Construct Binary Tree f
1. Construct Binary Tree from Inorder and Postorder Traversal Given inorder and postorder travers ...
vue2.0-transition配合animate.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Python的主要库
本文在Creative Commons许可证下发布市面上的分析工具大致分为两大类,菜单式的工具和命令行式的工具.前者适合于初学入门,类似于跟团旅游,提供了固定的路线.分析套路比较固定化,点几下鼠标就 ...
hdparm
https://www.douban.com/note/244813504/ http://blog.sina.com.cn/s/blog_413d250e0101jtr7.html http://m ...
一个project师该怎样高效工作
1. 静. 在千头万绪,百般push.各种IM电话邮件狂轰滥炸中保持一个静字.找到最适合如今做的事情,情绪不要被外界所干扰.一次仅仅做一件事,不要被打断. 有的公司土鳖文化严重,领导一会儿要求你干这 ...
ORA-00922: 选项缺失或无效
1.错误描写叙述 SQL> create table info_stu from select t.stu_id,t.stu_name,t.stu_age from info t; create ...

项目列表dl、dt、dd使用

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

随机推荐

热门专题