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):

  • 相关阅读:
    js对象数组(JSON) 根据某个共同字段 分组
    一个 函数 用来转化esSearch 的range 条件
    关于 vuex 报错 Do not mutate vuex store state outside mutation handlers.
    android listview 重用view导致的选择混乱问题
    android SDK和ADT的更新
    Android中adb push和adb install的使用区别
    pycharm中添加扩展工具pylint
    su Authentication failure解决
    Putty以及adb网络调试
    有关android源码编译的几个问题
  • 原文地址:https://www.cnblogs.com/phoebeyue/p/9215554.html
Copyright © 2011-2022 走看看