Div+CSS布局執行個體:用dl dt dd來製作列表

來源:互聯網
上載者:User
文章目錄
  • Tags:
關於用DIV+CSS來製作列表的時候,大家最常用的是用ul和li來編寫,但是這樣用出現兩個比較麻煩的地方:

  1、如果用UL還布局,右邊一欄比較麻煩;
  2、文字外邊的邊框自適應比較麻煩;
  3、很可能要定死高度;

  所以,細細地看一看這個布局,想一想還是用DL.DT.DD作是合理的:

  1、布局合理一些;
  2、將來擴充很方便;
  3、CSS一定很少;

 

  試著寫了寫,看一看還行!在可控範圍內!

  布局布分當然不用說了:

原始碼如下:

用DL、DT和DD來製作列表

<h1>標題</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部分

*{ 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;}
 

 

Tags:
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.