码迷,mamicode.com
首页 > 其他好文 > 详细

fieldset标签

时间:2015-05-26 12:54:43      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

fieldset定义和用法:

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

fieldset、legend都是块元素。

代码:

<style>
fieldset{width:260px;margin:10px;font-size: 12px;border:1px dotted #f0f;}
legend{color: #f0f;font-size: 14px;}
li{list-style: none;color:#0cc;}
</style>

<fieldset>
 <legend>web前端开发</legend>
 <ul>
  <li>HTML:超文本标记语言</li>
  <li>CSS:层级样式</li>
  <li>JavaScript:脚本语言</li>
  <li>jQuery:js插件</li>
 </ul>
</fieldset>

效果图(Chrome):

技术分享

注意:

该标签的属性与样式与标准的一样。但在浏览器兼容方面有些差异:在IE6+中块的边框表现为圆角;在Firefox和chrome下都是直角。FF支持CSS3,所以解决FF下的圆角问题很简单:为fieldset标签的样式加上-moz-border-radius:5px即可;chrome同理:-webkit-border-radius:5px;

现在给代码添加圆角属性:

<style>
fieldset{width:260px;margin:10px;font-size: 12px;border:1px dotted #f0f;-moz-border-radius:5px;-webkit-border-radius:5px;}
legend{color: #f0f;font-size: 14px;}
li{list-style: none;color:#0cc;}
</style>
<fieldset> 
  <legend>web前端开发</legend> 
  <ul>  
   <li>HTML:超文本标记语言</li>  
   <li>CSS:层级样式</li>  
   <li>JavaScript:脚本语言</li>  
   <li>jQuery:js插件</li> 
  </ul>
</fieldset>

效果图(Chrome):

技术分享

fieldset标签

标签:

原文地址:http://my.oschina.net/zyxchuxin/blog/419984

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!