css动画+表格+表单

1.表格

1.table  所有的表格元素  都在table标签里面编写
    属性: 写在标签内部
        border 声明 表格边框
            标题没有边框
            表格行没有边框
            只有表格  单元格 有边框
            border 里面的数值 控制的是 最外层的边框
            是table 独有的属性
    cellspacing控制单元格之间的距离
            是table 独有的属性
    cellpadding  控制单元格内部的内边距
2.样式
    border-collapse:collapse;   样式初始化
        caption  定义表格标题    文字居中
        thead  定义表头行
        th定义 表头行里面的  标准单元格
               文字居中     文字加粗
    tbody  定义 表格的内容区域
            tr  定义表格行
        行合并  rowspan 将下面行的 同列单元格 合并到 本单元格中
        被合并的单元格  不在下面行出现(被合并的单元格 不在写 td)
        列合并  colspan 将同行 本单元格的后面列的 若干单元格合并
        被合并的单元格  不在下面行出现(被合并的单元格 不在写 td)
        td  定义表格标准单元格
   tfooter  定义表格尾部 行
         单元格没有特殊的标签 就使用td

\color{red}{总结:} thead和tr都是定义行 但是 thead专门用来定义表头 tr一般用来定义内容区域的行 同理 th跟td 一个作为表头单元格 一个是内容单元格

2.表单

    1.form
            action  定义提交的网址  也算是路径
            method 定义提交的请求方式
                get
                    优点:速度快  给服务器造成的压力小
                    缺点:保密性差  对传输文件大小有限制
                post
                    优点:保密性好   可以上传大文件
                    缺点:速度慢  给服务器造成的压力大
    2.input 元素
            属性
                name  定义input元素的名称  作为提交给服务器的参数名
                value  定义input元素的值   作为提交给服务器的参数名对应的值
            类型  type
                text  文本框
                    placeholder  定义文本框内 默认展示的值
                 password  密码框
                        在里面输入的值会以星号或者小点展示
                 button 按钮
                 checkbox  复选框 checked默认状态  checked="checked"
                 radio   单选框  name值必须一样
                 file 上传文件
                 reset  重置  清空表单中所有已输入的内容
                 submit  提交  向服务器发送表单数据 
                select/option 创建单选或多选菜单 必须组合使用
                textarea 生成一个可以多行输入的文本框
                    cols 定义文本的宽度
                    rows 定义文本的行数

3.动画

  1. 动画名
    animation-name:active;
  2. 完成动画所需时间
    animation-duration:10s;
  3. 动画速度
animation-timing-function:ease-in;低速开始
animation-timing-function:ease-out;低速结束
animation-timing-function:ease-in-out;低速开始和结束
animation-timing-function:linear;匀速
  1. 动画开始时间
    animation-delay:1s;
  2. 播放次数(n/infinite)
    animation-iteration-count:infinite;无限次
  3. 播放方向
animation-direction:nomal;正常
animation-direction:reverse;反向
animation-direction:alternate;奇数次正向
animation-direction:alternate-reverse;奇数次反向
animation-direction:inherit;继承
  1. 动画停留位置
animation-fill-mode:none;默认值
animation-fill-mode:forwards;结束位置
animation-fill-mode:backwards;开始位置
  1. 复合写法
animation:active 5s ease-in 2 2s normal forwards;
动画名 完成时间 速度 播放次数 延迟时间 播放方向 停留位置
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容