DIV+CSS中标签dl dt dd常用的用法

最新推荐文章于 2023-07-07 00:19:43 发布

青椒灬炒蛋

最新推荐文章于 2023-07-07 00:19:43 发布

阅读量846

点赞数

分类专栏： java

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

转自：http://smallpig301.blog.163.com/blog/static/9986093201010262499229/

< dl>< /dl>用来创建一个普通的列表,

< dt>< /dt>用来创建列表中的上层项目，

<dd>< /dd>用来创建列表中最下层项目，

< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

实例一：

效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns=" http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<style>  
  
body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}  
*{ margin:0; padding:0;}  
h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}  
  
#Methods1{ width:900px; background:#ccc; padding-bottom:20px;}  
#Methods1 dl{margin:20px 0 0 20px; float:left;  background:red;}  
#Methods1 dt{width:180px; margin:10px; height:120px; background:#FFF;}  
#Methods1 dd{width:180px; margin:0 0 10px 10px; height:30px; line-height:30px; background:#FFFFFF; text-align:center;}  
  
</style>  
</head>  
<body>  
<h1>用法一：</h1>  
<div id="Methods1">  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>标题交给我DD</dd>  
  </dl>  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>标题交给我DD</dd>  
  </dl>  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>标题交给我DD</dd>  
  </dl>  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>标题交给我DD</dd>  
  </dl>  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>标题交给我DD</dd>  
  </dl>  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>标题交给我DD</dd>  
  </dl>  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>标题交给我DD</dd>  
  </dl>  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>标题交给我DD</dd>  
  </dl>  
</div>  
  
</body>  
</html>

实例二：

效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns=" http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<style>  
  
body{ font-size:12px; line-height:1.8; width:900px; margin:auto;}  
*{ margin:0; padding:0;}  
h1{ background:red; font-size:14px; height:35px; line-height:35px; padding-left:20px; color:white;}  
h2{ font-size:14px; height:35px; line-height:35px;}  
  
#Methods2{ width:900px; background:#ccc;}  
#Methods2 dl{width:860px; height:200px; margin:20px; background:red;}  
#Methods2 dt{width:180px; height:180px; float:left; margin:10px; background:#FFF;}  
#Methods2 dd{width:610px; height:160px; float:left; margin:10px 10px 10px 0; padding:10px 20px; line-height:20px; background:#FFFFFF; text-align:left;}  
.More{ position:absolute; right:120px; margin-top:10px;}  
  
</style>  
</head>  
<body>  
  
<h1>用法二：</h1>  
<div id="Methods2">  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>  
  <h2>标题</h2>  
  <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />  
  <a class="More">了解更多...</a>  
 </dd>  
  </dl>  
  <dl>  
    <dt><a href="#">图片交给我DT</a></dt>  
    <dd>  
  <h2>标题</h2>  
  <span>内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--</span><br />  
  <a class="More">了解更多...</a>  
 </dd>  
  </dl>  
</div>  
</body>  
</html>  
<wbr style="LINE-HEIGHT: 28px"></wbr>

更多效果

http://blog.csdn.net/simaweier/article/details/41075801

青椒灬炒蛋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
DIV+CSS中标签dl dt dd常用的用法

转自：http://smallpig301.blog.163.com/blog/static/9986093201010262499229/&lt; dl&gt;&lt; /dl&gt;用来创建一个普通的列表,&lt; dt&gt;&lt; /dt&gt;用来创建列表中的上层项目，&lt;dd&gt;&lt; /dd&gt;用来创建列表中最下层项目，&lt; dt&gt;&lt; /dt&
复制链接

扫一扫