zoukankan      html  css  js  c++  java
  • fieldset标签

    fieldset定义和用法:

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

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

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

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

    fieldset、legend都是块元素。

    代码:

    <style>
    fieldset{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{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):

  • 相关阅读:
    reaver 破解wifi
    CDOJ 1255 斓少摘苹果 图论 2016_5_14
    CDOJ 1256 打表+数组 统计
    poj 3190 贪心+优先队列优化
    poj 2376 Cleaning Shifts 贪心 区间问题
    poj 3253 Fence Repair 贪心
    poj 3069 贪心+区间问题
    poj 3050 Hopscotch DFS+暴力搜索+set容器
    poj 2718 Smallest Difference(暴力搜索+STL+DFS)
    poj 3187 Backward Digit Sums
  • 原文地址:https://www.cnblogs.com/phoebeyue/p/9215554.html
Copyright © 2011-2022 走看看