HTML元素 - fieldset(用fieldset、legend實現文字寫在邊線上的效果)

時間 2021-01-30

標籤 css html 框架 ide 佈局 this spa orm xml 欄目 HTML 简体版

原文原文鏈接

定義

在字段集包含的文本和其它元素外面畫一個方框。

註釋

此元素用於對錶單中的元素進行分組並在文檔中區別標出文本。

FIELDSET 元素與窗口框架的行爲有些類似。由於窗口框架沒有滾動條，將 overflow 屬性值設爲 scroll，顯示效果和值爲 hidden 相同。

此元素在 Internet Explorer 4.0 及以上版本的HTML 和的腳本中可用。

此元素是塊元素。

此元素須要關閉標籤。

----------------------------------------------------------------------------------------

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

這是一個很是不錯的效果，在實際製做中也比較經常使用，咱們看下面的圖片：

　　或許你想到能夠用圖片來實現這樣的效果，但圖片除了體積稍大，語義上也很欠缺。這樣的效果如何用xhtml+css實現呢？首先咱們經過fieldset設置一個方框（也譯做域），而後經過特定的標籤legend域標題，設置一個標題，並對它們進行相應的樣式定義便可實現這樣效果。咱們首先來了解一下fieldset方框、legend域標題這兩個標籤的知識。

HTML元素 fieldset方框

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

　　fieldset元素用於對錶單中的元素進行分組並在文檔中區別標出文本。它與窗口框架的行爲有些類似。fieldset在 Internet Explorer 4.0 及以上版本的HTML 和的腳本中可用。
　　fieldset元素元素是塊元素。而且須要關閉標籤，即必須成對出現：<fieldset></fieldset>。

HTML元素 legend域標題

　　Inserts a caption into the box drawn by the fieldSet object.
　　在 fieldSet 對象繪製的方框內插入一個標題。

　　legend元素必必位於fieldset內的第一個元素。在 Internet Explorer 4.0 及以上版本的 HTML 和腳本中可用。
　　legend元素是塊元素。而且須要關閉標籤，即必須成對出現：<legend></legend>。

咱們開始着手製做這樣的一個小實例，咱們看下面的xhtml代碼：

Example Source Code [www.52css.com]

<fieldset>
  <legend>52CSS.com CSS網頁佈局</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:#06c dashed 1px;
}
legend {
    color:#06c;
    font-weight:800;
    background:#fff;
}
ul {
    list-style-type: none;
    margin:8px 0 4px 0;
}
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.52css.com]

[ 可先修改部分代碼再運行查看效果 ]

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

完整的最終代碼：

Source Code to Run [www.52css.com]

[ 可先修改部分代碼再運行查看效果 ]

　　說明：用fieldset來進行這樣的佈局或許不符合語義，fieldset必須用在form標籤裏面。fieldset是一個比較「冷」的東西，對它的瞭解也不多，此問題等待之後發掘吧，有相關更新我會在 52css.com上即時公佈的。