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

这是一个非常不错的效果，在实际制作中也非常常见css fieldset 样式，我们看下边的截图：

或许你想到可以用照片来实现这种的效果css fieldset 样式，但照片除了重量稍大，语义上也更缺乏。这样的效果如何用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[]

<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[]

*{

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;

}

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-138692-1.html