快捷導(dǎo)航

DL.DT.DD實現(xiàn)左右的布局簡單例子

更新時間：2007年12月11日 19:04:23 作者：

<!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> <style> *{ 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   class="vvxyksv9kd"   id="box">   <dl>     <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt>     <dd>母親節(jié)-祝福短信</dd>   </dl>   <dl>     <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt>     <dd>母親節(jié)-祝福短信</dd>   </dl>   <dl>     <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt>     <dd>母親節(jié)-祝福短信</dd>   </dl>   <dl>     <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt>     <dd>母親節(jié)-祝福短信</dd>   </dl>   <dl>     <dt> <img src="http://pics.taobao.com/bao/album/promotion/magicbean_070529.gif" /> </dt>     <dd>母親節(jié)-祝福短信</dd>   </dl>   </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

我不是十分確定這樣的布局是不是合理，但從代碼量和結(jié)構(gòu)看還不錯。希望有更合理的方面一起交流！