DL.DT.DD

HTML与CSS布局实例

最新推荐文章于 2025-09-05 14:01:23 发布

转载最新推荐文章于 2025-09-05 14:01:23 发布 · 681 阅读

文章标签：

#border #float #xhtml #html #div #css

HTML 专栏收录该内容

11 篇文章

订阅专栏

html:

<h1>标题</h1> <div> <dl> <dt><a href="32" mce_href="32">·文章Title！</a></dt> <dd>作者：张三</dd> </dl> <dl> <dt><a href="3232" mce_href="3232">·文章Title！</a></dt> <dd>作者：张三</dd> </dl> <dl> <dt><a href="3232" mce_href="3232">·文章Title！</a></dt> <dd>作者：张三</dd> </dl>........... </div>

css:

<mce:style></mce:style><style mce_bogus="1">*{ 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>

定宽：

<!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" /> <mce:style></mce:style><style mce_bogus="1">*{ margin:0; padding:0;} body{ font-size:12px; line-height:1.8; padding:10px;} dl{clear:both; margin-bottom:5px;float:left;width:100%} dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF} dd{ float:right} h1{clear:both;font-size:14px;} div{ width:500px; float:left;}</style> </head> <body> <h1>标题</h1> <div> <dl> <dt><a href="32" mce_href="32">·文章Title！</a></dt> <dd>作者：张三</dd> </dl> <dl> <dt><a href="3232" mce_href="3232">·文章Title！</a></dt> <dd>作者：张三</dd> </dl> <dl> <dt><a href="3232" mce_href="3232">·文章Title！</a></dt> <dd>作者：张三</dd> </dl> <dl> <dt><a href="eeqwewq" mce_href="eeqwewq">·文章Title！</a></dt> <dd>作者：张三</dd> </dl> <dl> <dt><a href="ewqewq" mce_href="ewqewq">·文章Title！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="ewqe" mce_href="ewqe">·文章Title！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="ewqe" mce_href="ewqe">·文章Title！</a></dt> <dd>xxx</dd> </dl> </div> <h1>标题</h1> <div> <dl> <dt><a href="#" mce_href="#">·文章Title！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#" mce_href="#">·文章Title！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#" mce_href="#">·文章Title！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#" mce_href="#">·文章Title！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#" mce_href="#">·文章Title！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#" mce_href="#">·文章Title！</a></dt> <dd>xxx</dd> </dl> <dl> <dt><a href="#" mce_href="#">·文章Title！</a></dt> <dd>xxx</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" /> <title></title> <mce:style></mce:style><style mce_bogus="1">*{ margin:0; padding:0;} #box{ margin:10px; padding:10px; float:left; border:1px solid #CCC; background:#FFFFCC; font-size:12px; line-height:1.9;} dl{ background:#CCCC00; margin:0; width:120px; text-align:center; float:left; margin:5px;} dt{ background:#CC0033;}dt img{display:block; margin:0 auto;} dd{ background:#FFFF00; }</style> </head> <body> <div id="box"> <dl> <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" mce_src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt> <dd>母亲节-祝福短信</dd> </dl> <dl> <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" mce_src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt> <dd>母亲节-祝福短信</dd> </dl> <dl> <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" mce_src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt> <dd>母亲节-祝福短信</dd> </dl> <dl> <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" mce_src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt> <dd>母亲节-祝福短信</dd> </dl> <dl> <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" mce_src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt> <dd>母亲节-祝福短信</dd> </dl> </div> </body> </html>