這是一個(gè)非常不錯(cuò)的效果，在實(shí)際制作中也比較常用，我們看下面的圖片：


　　或許你想到可以用圖片來實(shí)現(xiàn)這樣的效果，但圖片除了體積稍大，語義上也很欠缺。這樣的效果如何用xhtml css實(shí)現(xiàn)呢？首先我們通過fieldset設(shè)置一個(gè)方框（也譯作域），然后通過特定的標(biāo)簽legend域標(biāo)題，設(shè)置一個(gè)標(biāo)題，并對(duì)它們進(jìn)行相應(yīng)的樣式定義即可實(shí)現(xiàn)這樣效果。我們首先來了解一下fieldset方框、legend域標(biāo)題這兩個(gè)標(biāo)簽的知識(shí)。

HTML元素 fieldset方框

　　Draws a box around the text and other elements that the field set contains.
　　在字段集包含的文本和其它元素外面畫一個(gè)方框。

　　fieldset元素用于對(duì)表單中的元素進(jìn)行分組并在文檔中區(qū)別標(biāo)出文本。它與窗口框架的行為有些相似。fieldset在 Internet Explorer 4.0 及以上版本的HTML 和的腳本中可用。
　　fieldset元素元素是塊元素。 并且需要關(guān)閉標(biāo)簽，即必須成對(duì)出現(xiàn)：<fieldset></fieldset>。

HTML元素 legend域標(biāo)題

　　Inserts a caption into the box drawn by the fieldSet object.
　　在 fieldSet 對(duì)象繪制的方框內(nèi)插入一個(gè)標(biāo)題。

　　legend元素必必位于fieldset內(nèi)的第一個(gè)元素。在 Internet Explorer 4.0 及以上版本的 HTML 和腳本中可用。
　　legend元素是塊元素。并且需要關(guān)閉標(biāo)簽，即必須成對(duì)出現(xiàn)：<legend></legend>。

我們開始著手制作這樣的一個(gè)小實(shí)例，我們看下面的xhtml代碼：


　　這是一個(gè)簡(jiǎn)單的頁面，所有的代碼處于一個(gè)fieldset方框內(nèi)，方框內(nèi)的第一個(gè)元素為legend域標(biāo)題，另外就是一個(gè)無序列表ul，隨機(jī)加了一些內(nèi)容。我們看下面的css是如何定義的：


　　整體的布局聲明：文字大小12px，邊距與填充均為零。
　　fieldset方框的設(shè)置：填充與邊距都是10px。設(shè)置寬度為270px。文字顏色深灰色#333。邊框?yàn)橐幌笏氐乃{(lán)色#06c虛線。
　　legend域標(biāo)題的設(shè)置：文字顏色為藍(lán)色#06c，文字加粗，背景色為白色#fff。
　　對(duì)無序列表ul及列表項(xiàng)li進(jìn)行相關(guān)的一些設(shè)置。

　　我們定義fieldset的邊框的樣式border，在IE6里邊框會(huì)與legend里的文字重合疊加，而默認(rèn)的樣式則不會(huì)。我們給legend一個(gè)背景遮擋邊框，這里是background:#fff;

我們看運(yùn)行效果：


　　或許你對(duì)此效果還不滿足，我們?cè)僮饕恍┱{(diào)整。讓它看起來更加的完美。
　　我們?cè)O(shè)置legend的邊框?yàn)橐粋�(gè)象素的灰色實(shí)線：border:#b6b6b6 solid 1px;
　　并對(duì)legend設(shè)置了上下與左右的填充：padding:3px 6px;
　　我們看最終的運(yùn)行效果圖片，看上去舒適多了：


完整的最終代碼：


　　說明：用fieldset來進(jìn)行這樣的布局或許不符合語義，fieldset必須用在form標(biāo)簽里面。fieldset是一個(gè)比較“冷”的東西，對(duì)它的了解也很少，此問題等待以后發(fā)掘吧，有相關(guān)更新我會(huì)在mb5u.com上即時(shí)公布的。