CSS实例教程用dldtdd来制作一个列表

作者:divcss教程吧      点击次数:610次     发布日期:2015-05-29

CSS实例教程用dldtdd来制作一个列表

直接给大家一个源代码:

<!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>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
</style>
</head>
<body>
<h1>test</h1>
<div>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
</div>
<h1>test</h1>
<div>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
  <dl>
    <dt><a href="#">·我是女生!博客里的文章是我自己写的!</dt>
    <dd>xxx</dd>
  </dl>
</div>
</body>
</html>

分享DIVCSS8