CSS 之dl dt dd模擬表格實例代碼

2024-07-11 08:27:08

字體：大中小

來源：轉載

供稿：網友

隨便搜下，幾十萬條。貼出dl dt dd模擬表格實例，不推薦在實際項目中使用，可以了解dl dt dd的用法。測試瀏覽器：IE6/IE7/IE8/FF3.0
CSS:

復制代碼

代碼如下:
dl,dt,dd{
margin:0;
background:#fff5fa;
font-size:14px;
}
dl{
margin:0 auto;
width:50%;
border:1px solid #f8b3d0;
border-bottom:none;
}
dt{
font-weight:800;
background:#ff99cc;
color:#fff;
}
dt,dd{
line-height:30px;
padding:0 0 0 10px;
border-bottom:1px solid #f8b3d0;
height:30px;
overflow:hidden
}
dd{
text-indent:3em;
}
.fff{
background:#fff
}
dt span,dd span{
display:block;
float:right;
font-size:14px;
border-left:1px solid #f8b3d0;
text-indent:0em;
width:80px;
text-align:center;
}

Xhtml:

復制代碼

代碼如下:
<dl class=hb>
<dt>下載地址更新時間ks5u生物同步課課練（人教版必修一）</dt>
<dd class=fff>——11.2第一節從生物圈到細胞生物圈到細生物圈到細生物圈到細生物圈到細生物圈到細生物圈到細生物圈到細</dd>
<dd>——11.3第二節細胞的多樣性和統一性</dd>
<dd class=fff>——11.4單元測評</dd>
<dd>——11.5歐美代議制的確立與發展</dd>
<dd class=fff>——11.6中國古代文化史</dd>
<dd>——11.7近代中國的政治、經濟及思想解放的潮流</dd>
<dd class=fff>——11.9近代中國政治發展史</dd>
<dd>——11.10近代中國經濟發展史</dd>
<dd class=fff>——11.11近代中國思想解放潮流</dd>
<dd>——11.12現代西方的政治、經濟與科技文化</dd>
<dd class=fff>——11.13羅斯福新政與二戰后的世界經濟</dd>
<dd>——11.14二戰后世界政治格局的演變</dd>
<dd class=fff>——11.1619世紀以來的世界文學藝術與科技</dd>
<dd>——11.17現代中國的政治、經濟及思想文化</dd>
<dd class=fff>——11.18現代中國政治發展史 </dd>
<dd>——11.19現代中國物質文明發展史（中國近現代社會生活的變遷、科技等）</dd>
<dd class=fff>——11.30古希臘羅馬的政治制度</dd></dl>

上一篇：創建超鏈接及css 樣式設置

下一篇：CSS 用ul li做圓角表格

發表評論

共有條評論