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上即时公布的。