CSS實例：用fieldset、legend實現文字寫在邊線上的效果

　　這是一個非常不錯的效果，在實際製作中也比較常用，我們看下面的圖片：

　　或許你想到可以用圖片來實現這樣的效果，但圖片除了體積稍大，語義上也很欠缺。這樣的效果如何用xhtml+css實現呢？首先我們通過fieldset設置一個方框（也譯作域），然後通過特定的標籤legend域標題，設置一個標題，並對它們進行相應的樣式定義即可實現這樣效果。我們首先來了解一下fieldset方框、legend域標題這兩個標籤的知識。HTML元素fieldset方框　　Drawsaboxaroundthetextandotherelementsthatthefieldsetcontains.　　在欄位集包含的文本和其它元素外面畫一個方框。　　fieldset元素用於對錶單中的元素進行分組並在文檔中區別標出文本。它與窗口框架的行為有些相似。fieldset在InternetExplorer4.0及以上版本的HTML和的腳本中可用。　　fieldset元素元素是塊元素。並且需要關閉標籤，即必須成對出現：<fieldset></fieldset>。HTML元素legend域標題　　InsertsacaptionintotheboxdrawnbythefieldSetobject.　　在fieldSet對象繪製的方框內插入一個標題。　　legend元素必必位於fieldset內的第一個元素。在InternetExplorer4.0及以上版本的HTML和腳本中可用。　　legend元素是塊元素。並且需要關閉標籤，即必須成對出現：<legend></legend>。我們開始著手製作這樣的一個小實例，我們看下面的xhtml代碼：

Example Source Code [www.52css.com]<fieldset><legend>52CSS.comCSS網頁布局</legend><ul><li>Div+CSS教程系統的講述了關於CSS布局的知識</li><li>CSS布局實例向你呈現了52css.com中的一些實例</li><li>CSS模板下載你可以查看一些模板</li><li>CSS酷站欣賞高手與大師的作品定會讓你有所收穫</li></ul></fieldset>

　　這是一個簡單的頁面，所有的代碼處於一個fieldset方框內，方框內的第一個元素為legend域標題，另外就是一個無序列表ul，隨機加了一些內容。我們看下面的css是如何定義的：

Example Source Code [www.52css.com]*{font-size:12px;margin:0;padding:0;}fieldset{padding:10px;margin:10px;width:270px;color:#333;border:#06cdashed1px;}legend{color:#06c;font-weight:800;background:#fff;}ul{list-style-type:none;margin:8px04px0;}li{margin-top:4px;}

　　整體的布局聲明：文字大小12px，邊距與填充均為零。　　fieldset方框的設置：填充與邊距都是10px。設置寬度為270px。文字顏色深灰色#333。邊框為一象素的藍色#06c虛線。　　legend域標題的設置：文字顏色為藍色#06c，文字加粗，背景色為白色#fff。　　對無序列表ul及列表項li進行相關的一些設置。　　我們定義fieldset的邊框的樣式border，在IE6裡邊框會與legend里的文字重合疊加，而默認的樣式則不會。我們給legend一個背景遮擋邊框，這裡是background:#fff;

Source Code to Run [www.zz5u.net 站長無憂]

　　或許你對此效果還不滿意，我們再作一些調整。讓它看起來更加的完美。　　我們設置legend的邊框為一個象素的灰色實線：border:#b6b6b6solid1px;　　並對legend設置了上下與左右的填充：padding:3px6px;　　我們看最終的運行效果圖片，看上去舒服多了：

推薦閱讀：