css圓角之有序列表dl、無序列表ul如何實現?_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
我們常可以看到許多列表或文章段落是圓角的。在傳統的制作中,我們往往通過背景圖片來營造出圓角的效果。運用div css進行網頁布局,我們應該讓編碼更有語義,結構更加的簡單,更重要的是可以適應寬度與高度的變化。有序列表dl、無序列表ul的圓角我們可以僅通過四個角的圖片來實現。我們看下面的這一張圖片:

我們將圓角的多出部分設置成“背景色”,這里的背景色指的是網頁的背景色或此DL、UL容器的背景色。而內部的顏色是透明的,我們可以根據不同的需要進行顏色的設置,而根本不需要去修改這四個圖片。
我們首先需要制作四張圖片備用,這四張圖片,分別是:topl.gif頂部的左側;topr.gif頂部的右側;botl.gif底部的左側,botr.gif底部的右側。這四張圖片分別定義在不同的背景容器里,營造出了圓角的效果。
我們來看有序列表DL的實現方法,我們看下面的XHTML代碼:
這是一個有序列表DL典型的代碼,只是在DD標簽中,我們另外加上了一個P標簽。這便于我們進行四個角落的圓角背景的設置。
將頂部的左側的背景定義在DL中;
將頂部的右側的背景定義在DT中;
將底部的左側的背景定義在DD中;
將底部的右側的背景定義在DD的P中。
我們來看下面的CSS代碼:
通過上面的CSS定義,我們就可以實現了DL有序列表的圓角布局的編寫,我們再將代碼細化一下,看看最終的運行效果:
[ 可先修改部分代碼 再運行查看效果 ]
我們根據上面的思路,可以很順利的制作出UL無序列表的圓角樣式。與上面不同的是,我們在最末一個列表項li定義底部右側的圓角。
我們來看以下代碼及其最終運行效果:
[ 可先修改部分代碼 再運行查看效果 ]
經過上面的學習,我們應該把握了圓角的一些用法,在其它容器里的應用,只需要靈活的編寫與定義就可以了。
此文參考了forest的文章,在此表示感謝。

我們將圓角的多出部分設置成“背景色”,這里的背景色指的是網頁的背景色或此DL、UL容器的背景色。而內部的顏色是透明的,我們可以根據不同的需要進行顏色的設置,而根本不需要去修改這四個圖片。
我們首先需要制作四張圖片備用,這四張圖片,分別是:topl.gif頂部的左側;topr.gif頂部的右側;botl.gif底部的左側,botr.gif底部的右側。這四張圖片分別定義在不同的背景容器里,營造出了圓角的效果。
我們來看有序列表DL的實現方法,我們看下面的XHTML代碼:
示例代碼 [www.zhaotila.cn]
<dl>
<dt></dt>
<dd><p></p></dd>
</dl>
<dt></dt>
<dd><p></p></dd>
</dl>
這是一個有序列表DL典型的代碼,只是在DD標簽中,我們另外加上了一個P標簽。這便于我們進行四個角落的圓角背景的設置。
將頂部的左側的背景定義在DL中;
將頂部的右側的背景定義在DT中;
將底部的左側的背景定義在DD中;
將底部的右側的背景定義在DD的P中。
我們來看下面的CSS代碼:
示例代碼 [www.zhaotila.cn]
.yuanjiao {background:#06c url(topl.gif) no-repeat; }
.yuanjiao dt{background:transparent url(topr.gif) 100% 0 no-repeat; }
.yuanjiao dd{background:#DCEAFC url(botl.gif) 0 100% no-repeat;}
.yuanjiao dd p{background:transparent url(botr.gif) 100% 100% no-repeat;}
.yuanjiao dt{background:transparent url(topr.gif) 100% 0 no-repeat; }
.yuanjiao dd{background:#DCEAFC url(botl.gif) 0 100% no-repeat;}
.yuanjiao dd p{background:transparent url(botr.gif) 100% 100% no-repeat;}
通過上面的CSS定義,我們就可以實現了DL有序列表的圓角布局的編寫,我們再將代碼細化一下,看看最終的運行效果:
代碼調試框 [www.zhaotila.cn]
[ 可先修改部分代碼 再運行查看效果 ]
我們根據上面的思路,可以很順利的制作出UL無序列表的圓角樣式。與上面不同的是,我們在最末一個列表項li定義底部右側的圓角。
我們來看以下代碼及其最終運行效果:
代碼調試框 [www.zhaotila.cn]
[ 可先修改部分代碼 再運行查看效果 ]
經過上面的學習,我們應該把握了圓角的一些用法,在其它容器里的應用,只需要靈活的編寫與定義就可以了。
此文參考了forest的文章,在此表示感謝。
相關DIV+CSS實例:
- 相關鏈接:
- 教程說明:
DIV+CSS實例-css圓角之有序列表dl、無序列表ul如何實現?
。