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

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:55:12

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

DL.DT.DD實(shí)現(xiàn)左右的布局簡(jiǎn)單例子:這是今天有人發(fā)郵件問的一個(gè)問題,最開始的想法是用ul列表來(lái)實(shí)現(xiàn);但是這樣用出現(xiàn)兩個(gè)比較麻煩的地方： 1、如果用UL還布局，右邊一欄比較麻煩； 2、文字外邊的邊框自適應(yīng)比較麻煩； 3、很可能要定死高度；所以，細(xì)細(xì)地看一看這個(gè)布局，想一想還是用DL.DT

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀DL.DT.DD實(shí)現(xiàn)左右的布局簡(jiǎn)單例子:這是今天有人發(fā)郵件問的一個(gè)問題,最開始的想法是用ul列表來(lái)實(shí)現(xiàn);但是這樣用出現(xiàn)兩個(gè)比較麻煩的地方： 1、如果用UL還布局，右邊一欄比較麻煩； 2、文字外邊的邊框自適應(yīng)比較麻煩； 3、很可能要定死高度；所以，細(xì)細(xì)地看一看這個(gè)布局，想一想還是用DL.DT

這是今天有人發(fā)郵件問的一個(gè)問題,最開始的想法是用ul列表來(lái)實(shí)現(xiàn);但是這樣用出現(xiàn)兩個(gè)比較麻煩的地方：
1、如果用UL還布局，右邊一欄比較麻煩；
2、文字外邊的邊框自適應(yīng)比較麻煩；
3、很可能要定死高度；
所以，細(xì)細(xì)地看一看這個(gè)布局，想一想還是用DL.DT.DD作是合理的：
1、布局合理一些；
2、將來(lái)擴(kuò)展很方便；
3、CSS一定很少；
試著寫了寫，看一看還行！在可控范圍內(nèi)！
布局布分當(dāng)然不用說了：

<h1>標(biāo)題</h1> 
<div> 
 <dl> 
 <dt><a href="32">·博客里的文章是我自己寫的！</a></dt> 
 <dd>作者：張三</dd> 
 </dl> 
 <dl> 
 <dt><a href="3232">·博客里的文章是我自己寫的！</a></dt> 
 <dd>作者：張三</dd> 
 </dl> 
 <dl> 
 <dt><a href="3232">·博客里的文章是我自己寫的！</a></dt> 
 <dd>作者：張三</dd> 
 </dl>........... 
</div>

CSS部分：

<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>

看一下效果：

<!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="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
</div> 
<h1>test</h1> 
<div> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·我是女生！博客里的文章是我自己寫的！</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" /> 
<style> 
*{ 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>標(biāo)題</h1> 
<div> 
 <dl> 
 <dt><a href="32">·博客里的文章是我自己寫的！</a></dt> 
 <dd>作者：張三</dd> 
 </dl> 
 <dl> 
 <dt><a href="3232">·博客里的文章是我自己寫的！</a></dt> 
 <dd>作者：張三</dd> 
 </dl> 
 <dl> 
 <dt><a href="3232">·博客里的文章是我自己寫的！</a></dt> 
 <dd>作者：張三</dd> 
 </dl> 
 <dl> 
 <dt><a href="eeqwewq">·博客里的文章是我自己寫的！</a></dt> 
 <dd>作者：張三</dd> 
 </dl> 
 <dl> 
 <dt><a href="ewqewq">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="ewqe">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="ewqe">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
</div> 
<h1>標(biāo)題</h1> 
<div> 
 <dl> 
 <dt><a href="#">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
 <dl> 
 <dt><a href="#">·博客里的文章是我自己寫的！</a></dt> 
 <dd>xxx</dd> 
 </dl> 
</div> 
</body> 
</html>

相關(guān)的例子，我以前也寫過一個(gè)：

<!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 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>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：布局 dt dl

熱門焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門推薦