首页 > 开发 > CSS > 正文

CSS实例:用fieldset、legend实现文字写在边线上的效果

2024-07-11 08:40:33
字体:
来源:转载
供稿:网友
  这是一个非常不错的效果,在实际制作中也比较常用,我们看下面的图片:


  或许你想到可以用图片来实现这样的效果,但图片除了体积稍大,语义上也很欠缺。这样的效果如何用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代码:

示例代码 [www.CuoXIn.com]
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表