DivCSS布局實(shí)例用dldtdd來制作列表_DIV+CSS實(shí)例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
今天有人發(fā)郵件問的一個(gè)問題,最開始的想法是用ul列表來實(shí)現(xiàn);但是這樣用出現(xiàn)兩個(gè)比較麻煩的地方:
1、假如用UL還布局,右邊一欄比較麻煩;
2、文字外邊的邊框自適應(yīng)比較麻煩;
3、很可能要定死高度;
所以,細(xì)細(xì)地看一看這個(gè)布局,想一想還是用DL.DT.DD作是合理的:
1、布局合理一些;
2、將來擴(kuò)展很方便;
3、CSS一定很少;
試著寫了寫,看一看還行!在可控范圍內(nèi)!
布局布分當(dāng)然不用說了:
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;}
看一下效果:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
1、假如用UL還布局,右邊一欄比較麻煩;
2、文字外邊的邊框自適應(yīng)比較麻煩;
3、很可能要定死高度;
所以,細(xì)細(xì)地看一看這個(gè)布局,想一想還是用DL.DT.DD作是合理的:
1、布局合理一些;
2、將來擴(kuò)展很方便;
3、CSS一定很少;
試著寫了寫,看一看還行!在可控范圍內(nèi)!
布局布分當(dāng)然不用說了:
示例代碼 [m.dounai2.com]
<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>
<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部分:
示例代碼 [m.dounai2.com]
*{ 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;}
看一下效果:
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS實(shí)例:符合web標(biāo)準(zhǔn)的嵌入Flash的方法-JS調(diào)用
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- DIVCSS菜單:超炫的菜單一張圖片實(shí)現(xiàn)鼠標(biāo)的兩種狀態(tài)及CSS當(dāng)前頁效果
- CSS實(shí)例:常用的CSS隱藏文字的方法
- DIVCSS實(shí)例:一款不錯(cuò)的CSS翻頁效果(DIGG)
- DivCSS布局實(shí)例用dldtdd來制作列表
- CSS導(dǎo)航菜單:仿淘寶首頁導(dǎo)航條布局效果
- CSS圓角邊框純CSS制作
- DivCSS實(shí)例:一個(gè)效果很不錯(cuò)的CSS列表
- 一個(gè)非常棒的DIV CSS導(dǎo)航條效果!
- 用css網(wǎng)站布局之十步實(shí)錄!(二)
- 用css網(wǎng)站布局之十步實(shí)錄!(十)
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實(shí)例-DivCSS布局實(shí)例用dldtdd來制作列表。