zoukankan      html  css  js  c++  java
  • 表单高级和表格高级

     
    一、表单高级
    表单的组成:表单域,表单元素,提示信息
    表单域<form name="" method="" action=""></form>
    表单元素<input type"text " value=""/>
    提示信息 如:用户名 密码
    取消IE浏览器点击后的虚线框:input:focus{outline:none;}
     
     
    1、提示信息标签
    <label for=“绑定控件id名”></label>
    功能:label元素用来定义标签,为页面上的其他元素制定提示信息。要将label元素绑定到其他的控件上,可以将label元素的for属性设置为与该控件的id属性值相同
    2、表单字段集
    <fieldset></fieldset>
    功能:相当于一个方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。
    3、字段级标题
    <legend></legend>
    功能:legend元素可以在fildset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素
     
    二、表格高级
    作用:显示数据
    (一)关于表格的css属性
    1、单元格间距(该属性必须给table添加)
    border-spacing:value;
    2、合并相邻单元格边框
    border-collapse:separate(边框分开)/collapse(边框合并)
    3、无内容单元格显示、隐藏
    empty-cells:show(显示)/hide(隐藏)
    4、表格布局算法(加快运行的速度)
    table-layout:auto/fixed(固定宽度,不会随内容多少改变单元格宽度)
    5、表格标题
    <caption>标题内容</caption>
    表格标题位置:caption-side:top/right/bottom/left
    说明:left,right,top,bottom位置只有火狐识别,top,bottom IE7以上版本支持,IE7及以下版本不支持其他属性值,只识别top
    6、表格布局元素
    表格基本组成
    table(表格)  tr(行) td(列)
    th 表格列标题(放在tr里)
     
     
    html里tabled的重要属性
    1)
    colspan="所要合并的单元格的列数"  横向合并
    rowspan="所要合并的单元格的行数"  纵向合并
    2)
    水平对齐方式:align="left/center/right";
    3)  垂直对齐方式:valign="top/middle/bottom";
    4)rules="rows/cols/all/none/groups"添加分隔线
    说明:
    rows:位于行之间的线条
    cols:位于列之间的线条
    all:位于行和列之间的线条  
    none:没有线条
    groups:位于行组和列组之间的线条
     
    2、数据行分组
    <thead></thead>  表头
    <tbody></tbody>  表体
    <tfoot></tfoot>  表尾
    说明:一个table中,只能包含一个thead,一个tfoot,但可包含多个tbody。
     
    3、数据列分组
    <colgroup span="value"></colgroup>
    <col span="value"/>
     
    说明:
    1)col和colgroup元素会根据从左到右的顺序依次对数据表格进行列分组
    2)span属性显示指定相邻几列组成一组,span属性值默认为1,默认时仅定义一列为一组
    3)可以通过给table添加rules="groups"属性来给分组列添加组分割线
    注意:虽然col和colgroup具有相同的功能,但是,我们只能使用colgroup元素来决定表格内容部分割线(rules)应该处于的位置,而col没有这个功能
     
     
    4、css伪类选择器:nth-child()
    :nth-child(5)选择器匹配属于其父元素的第N个子元素,不论元素的类型。
    odd 奇数  even 偶数
    IE8不识别
    eg:tbody tr:nth-child(odd){background:#fef0f5;}   tbody下的行数为奇数的行
  • 相关阅读:
    14.2.2.4 InnoDB Record, Gap, and Next-Key Locks
    Linux_PXE服务器_RHEL7
    Linux_PXE服务器_RHEL7
    Caused by: java.net.SocketException: Connection reset
    mysql read committed
    Linux_OpenSSH远程连接
    Linux_OpenSSH远程连接
    dns nsswitch.conf
    Python基本语法_强制数据类型转换
    Python基本语法_强制数据类型转换
  • 原文地址:https://www.cnblogs.com/dxiaofei/p/5994590.html
Copyright © 2011-2022 走看看