资讯专栏INFORMATION COLUMN

css之表格,表单

scola666 / 1730人阅读

摘要:一表格一表格定义定义表格由标签来定义每个表格均有若干行由标签定义每行被分割为若个单元格由标签定义字母指表格数据即数据单元格的内容数据单元格可以包含文本图片列表段落表单水平线等待基本结构基本结构表格标签表格标签定义表格定义表格的表头定义表格的

一.表格

1.定义

表格由标签来定义.每个表格均有若干行(由tr标签定义),每行被分割为若个单元格(由td标签定义).字母td指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本、图片、列表、段落、表单、水平线等待

2.基本结构

3.表格标签

      定义表格
         定义表格的行
定义表格列的组
      定义表格的页眉
      定义表格的主体
      定义表格的页脚

4.常用属性

table
-- border: :表格外框及单元格外框
-- cellpadding: :单元格的内边距
-- cellspacing: :单元格之间的间距,最小为0
-- rules:rows、cols、groups、all:边框规则

td
-- rowspan: :行合并(该单元格占多行)
-- colspan: :列合并(该单元格占多列)
-- width: : %:列宽占比

caption
-- align: left | right | top | bottom:标题方位

5.表格实现垂直水平居中

.sup {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}
.sub {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

二.表单

1.概念

表单是一个包含表单元素的区域.
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)等等

2.基本结构

3.常用类型标签

  • 文本框
  • 密文框
  • 单选框
  • 复选框
 篮球
 足球
 乒乓球 
 棒球
  • 下拉选项



  • 多行文本输入

  • 按钮











4、全局属性

  • required:必填项
  • pattern:正则

5.伪类

  • focus:获得焦点

三.音频

1.基本语法

2.常用属性

定义表格的表头
定义表格单元格
定义表格标题
属性 描述
autoplay autoplay 自动播放
controls controls 音频控件
loop loop 循环
muted muted 静音
preload auto metadata none 预加载
src URL 音频源

四.视频

1.基本语法

2.常用属性

属性 描述
width pixels 宽度
height pixels 高度
controls controls 视频控件
autoplay autoplay 自动播放
loop loop 循环播放
muted muted 静音
poster URL 图像占位
src URL 视频源
preload auto metadata none 预加载
  • source属性
属性 描述
src URL 视频源
type MIME_type MIME类型

五.形变

平移
transform:translate(x,y) | translateX(num) | translateY(num)
缩放
transform:scale(x,y) | scaleX(num) | scaleY(num)
旋转
transform: rotateX(角度) | rotateY(角度) | rotateZ(角度);
倾斜
transform:skew(角度x,角度y) | skewX(角度x) | skewY(角度y)

六.浏览器适配

  • -o-:Opera浏览器
  • -ms-:IE浏览器
  • -moz-:Firefox浏览器
  • -webkit-:Chrome、Safari、Android浏览器
径向渐变
.box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: -webkit-radial-gradient(red, yellow);
}

倒影
-webkit-box-reflect: below | above | left | right;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1743.html

相关文章

  • HTMLbody标签中的相关标签补充

    摘要:一列表标签列表标签分为三种。二表格标签表格标签用表示。单元格和单元格之间的距离外边距,像素为单位。例如表示当前单元格在水平方向上要占据两个单元格的位置。输入标签文本框输入标签文本框用于接收用户输入。一 列表标签   列表标签分为三种。   1、无序列表,无序列表中的每一项是     英文单词解释如下:       a.ul:unordered list,无序列表的意思。       b.l...

    felix0913 评论0 收藏0
  • HTML+CSS复习HTML基础篇

    摘要:规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。 一些说明 写在前面:HTML和CSS,当你了解所有规则后,你应该多写页面并记录你出现的问题,这才是学习HTML和CSS的最佳方法 这是我学习一段时间之后,再次回顾HTML,希望大家也对HTML有不一样的认识 我把HTML标签分成两大类,重要的和不重要的,...

    genefy 评论0 收藏0
  • HTML+CSS复习HTML基础篇

    摘要:规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。 一些说明 写在前面:HTML和CSS,当你了解所有规则后,你应该多写页面并记录你出现的问题,这才是学习HTML和CSS的最佳方法 这是我学习一段时间之后,再次回顾HTML,希望大家也对HTML有不一样的认识 我把HTML标签分成两大类,重要的和不重要的,...

    MrZONT 评论0 收藏0
  • HTMl基础

    摘要:每个表格均有若干行由标签定义,每行被分割为若干单元格由标签定义。字母指表格数据,即数据单元格的内容。数据单元格可以包含文本图片列表段落表单水平线表格等等。表格最重要的目的是显示表格类数据。规定在提交表单时所用的方法默认。 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STRE...

    番茄西红柿 评论0 收藏0
  • html标签

    摘要:结束标签会有斜线。也有一部分标签是单独呈现的,比如等。表单还可以包含和标签。 一, 以浏览器为客户端,写服务器 import socket sk = socket.socket() sk.bind((127.0.0.1,8080)) sk.listen(5) while 1 : conn , addr = sk.accept() data = conn.recv(9...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<