Top

项目列表dl、dt、dd使用

效果图如下

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>列表说明dl dt dd</title>
  6     <style type="text/css">
  7         body {
  8             margin:0;
  9             padding: 0;
 10             font: 14px/16px "microsoft yahei";
 11         }
 12         .box {
 13             width: 780px;
 14             margin:0 auto;
 15         }
 16         .box dl  /*类似于ul*/
 17         {
 18             display: block;
 19             border-bottom: 1px solid #696464;
 20             padding-bottom: 6px;
 21             overflow: hidden;
 22         }
 23         /*dt主要用于分类标题*/
 24         .box dl dt
 25         {
 26             display: block;
 27             float: left;
 28             width: 60px;
 29             text-align: right;
 30             height: 22px;
 31             line-height: 22px;
 32             padding-right: 6px;
 33         }
 34         
 35         .box dl dt a
 36         {
 37             color: #e4393c;
 38             font-weight: bold;
 39             text-decoration: underline;
 40             font-size: 10pt;
 41         }
 42         /*dd主要用于分类标题--说明、详细列表*/
 43         .box dl dd
 44         {
 45             display: block;
 46             overflow: hidden;
 47         }
 48         .box dl dd a
 49         {
 50             display: block;
 51             float: left;
 52             border-left: 1px solid #CCC;
 53             color: #635F5F;
 54             font-size: 9pt;
 55             padding: 0 8px;
 56             height: 14px;
 57             line-height: 14px;
 58             margin: 4px 0;
 59         }
 60     </style>
 61 </head>
 62 <body>
 63 <div class="box">
 64     <dl>
 65         <dt><a href="#">电子书</a></dt>
 66         <dd>
 67             <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
 68             <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
 69 
 70             <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
 71             <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
 72 
 73             <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
 74             <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
 75         </dd>
 76     </dl>
 77 
 78     <dl>
 79         <dt><a href="#">数字音乐</a></dt>
 80         <dd>
 81             <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
 82             <a href="#">乡村民谣</a> <a href="#">有声读物</a>
 83         </dd>
 84     </dl>
 85     <dl>
 86         <dt><a href="#">音像</a></dt>
 87         <dd>
 88             <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
 89         </dd>
 90     </dl>
 91     <dl>
 92         <dt><a href="#">文艺</a></dt>
 93         <dd>
 94             <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
 95                 href="#">艺术</a>
 96         </dd>
 97     </dl>
 98     <dl>
 99         <dt><a href="#">人文社科</a></dt>
100         <dd>
101             <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
102             <a href="#">哲学/宗教</a> <a href="#">社会科学</a>
103         </dd>
104     </dl>
105     <dl>
106         <dt><a href="#">经管励志</a></dt>
107         <dd>
108             <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
109         </dd>
110     </dl>
111 </div>
112 </body>
113 </html>
posted @ 2016-09-18 00:21  Avenstar  阅读(380)  评论(0)    收藏  举报