css圓角之有序列表dl、無(wú)序列表ul如何實(shí)現(xiàn)?_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
我們�?梢钥吹皆S多列表或文章段落是圓角的。在傳統(tǒng)的制作中,我們往往通過(guò)背景圖片來(lái)營(yíng)造出圓角的效果。運(yùn)用div css進(jìn)行網(wǎng)頁(yè)布局,我們應(yīng)該讓編碼更有語(yǔ)義,結(jié)構(gòu)更加的簡(jiǎn)單,更重要的是可以適應(yīng)寬度與高度的變化。有序列表dl、無(wú)序列表ul的圓角我們可以僅通過(guò)四個(gè)角的圖片來(lái)實(shí)現(xiàn)。我們看下面的這一張圖片:

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

我們將圓角的多出部分設(shè)置成“背景色”,這里的背景色指的是網(wǎng)頁(yè)的背景色或此DL、UL容器的背景色。而內(nèi)部的顏色是透明的,我們可以根據(jù)不同的需要進(jìn)行顏色的設(shè)置,而根本不需要去修改這四個(gè)圖片。
我們首先需要制作四張圖片備用,這四張圖片,分別是:topl.gif頂部的左側(cè);topr.gif頂部的右側(cè);botl.gif底部的左側(cè),botr.gif底部的右側(cè)。這四張圖片分別定義在不同的背景容器里,營(yíng)造出了圓角的效果。
我們來(lái)看有序列表DL的實(shí)現(xiàn)方法,我們看下面的XHTML代碼:
示例代碼 [hl5o.cn]
<dl>
<dt></dt>
<dd><p></p></dd>
</dl>
<dt></dt>
<dd><p></p></dd>
</dl>
這是一個(gè)有序列表DL典型的代碼,只是在DD標(biāo)簽中,我們另外加上了一個(gè)P標(biāo)簽。這便于我們進(jìn)行四個(gè)角落的圓角背景的設(shè)置。
將頂部的左側(cè)的背景定義在DL中;
將頂部的右側(cè)的背景定義在DT中;
將底部的左側(cè)的背景定義在DD中;
將底部的右側(cè)的背景定義在DD的P中。
我們來(lái)看下面的CSS代碼:
示例代碼 [hl5o.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;}
通過(guò)上面的CSS定義,我們就可以實(shí)現(xiàn)了DL有序列表的圓角布局的編寫(xiě),我們?cè)賹⒋a細(xì)化一下,看看最終的運(yùn)行效果:
代碼調(diào)試框 [hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
我們根據(jù)上面的思路,可以很順利的制作出UL無(wú)序列表的圓角樣式。與上面不同的是,我們?cè)谧钅┮粋(gè)列表項(xiàng)li定義底部右側(cè)的圓角。
我們來(lái)看以下代碼及其最終運(yùn)行效果:
代碼調(diào)試框 [hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
經(jīng)過(guò)上面的學(xué)習(xí),我們應(yīng)該把握了圓角的一些用法,在其它容器里的應(yīng)用,只需要靈活的編寫(xiě)與定義就可以了。
此文參考了forest的文章,在此表示感謝。
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大�。�
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- HowCSSLayoutWorks-如何進(jìn)行CSS布局
- CSS實(shí)例:ULli打造CSS橫向菜單藍(lán)色地平線
- Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁(yè)布局豆瓣首頁(yè)
- CSS JavaScript打造鼠標(biāo)懸停圖片漸顯效果!
- Div CSS實(shí)例:如何用CSS實(shí)現(xiàn)背景半透明效果
- DivCSS布局關(guān)于分辨率與100%自適應(yīng)問(wèn)題的探討!
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- DOV CSS表單:超炫的單選框與復(fù)選框效果!-Adam
- 使用fieldset、label標(biāo)簽制作form表單
- DivCSS實(shí)例:一個(gè)效果很不錯(cuò)的CSS列表
猜你也喜歡看這些
- 相關(guān)鏈接:
- 教程說(shuō)明:
DIV+CSS實(shí)例-css圓角之有序列表dl、無(wú)序列表ul如何實(shí)現(xiàn)?
。