成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

這是今天有人發(fā)郵件問的一個問題,最開始的想法是用ul列表來實(shí)現(xiàn);但是這樣用出現(xiàn)兩個比較麻煩的地方：

1、如果用UL還布局，右邊一欄比較麻煩；
2、文字外邊的邊框自適應(yīng)比較麻煩；
3、很可能要定死高度；

所以，細(xì)細(xì)地看一看這個布局，想一想還是用DL.DT.DD作是合理的：

1、布局合理一些；
2、將來擴(kuò)展很方便；
3、CSS一定很少；

試著寫了寫，看一看還行！在可控范圍內(nèi)！

布局布分當(dāng)然不用說了：

<h1>標(biāo)題</h1>  
<div>  
  <dl>  
    <dt><a >·博客里的文章是我自己寫的！</a></dt>  
    <dd>作者：張三</dd>  
  </dl>  
  <dl>  
    <dt><a >·博客里的文章是我自己寫的！</a></dt>  
    <dd>作者：張三</dd>  
  </dl>  
  <dl>  
    <dt><a >·博客里的文章是我自己寫的！</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> 

看一下效果：
test ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx test ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx ·我是女生！博客里的文章是我自己寫的！ xxx
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
如果說定寬？
標(biāo)題 ·博客里的文章是我自己寫的！ 作者：張三 ·博客里的文章是我自己寫的！ 作者：張三 ·博客里的文章是我自己寫的！ 作者：張三 ·博客里的文章是我自己寫的！ 作者：張三 ·博客里的文章是我自己寫的！ xxx ·博客里的文章是我自己寫的！ xxx ·博客里的文章是我自己寫的！ xxx 標(biāo)題 ·博客里的文章是我自己寫的！ xxx ·博客里的文章是我自己寫的！ xxx ·博客里的文章是我自己寫的！ xxx ·博客里的文章是我自己寫的！ xxx ·博客里的文章是我自己寫的！ xxx ·博客里的文章是我自己寫的！ xxx ·博客里的文章是我自己寫的！ xxx
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
相關(guān)的例子，我以前也寫過一個：