表格和表单

来源:互联网 发布:淘宝阿里巴巴 编辑:程序博客网 时间:2024/06/08 09:10

一、表格

1、表格标签:

table 表格thead 表格头tbody 表格主体tr 表格行th 元素定义表头td 元素定义表格单元

2、表格样式重置

1、table{border-collapse:collapse;} 单元格间隙合并
2、th,td{padding:0;}重置单元格默认填充
3、colspan 属性规定单元格可横跨的列数。
<td colspan="2"></td>
4、rowspan 属性规定单元格可横跨的行数。
<td rowspan="2"></td>
5、给表格加边框

1、<table border="1">给表格加边框,不能改变颜色2、可以自定义边框样式td,th{    border:1px solid red;    padding:0;}

5、边框合并

table{        border-collapse: collapse;//边框合并    }

二、表单

1、表单元素

<input type="…… " name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
textarea 文本域

2、小知识点

1、输入框的样式outline:none;可去除input外围光圈;
2、改变输入框提示如下:

input::-webkit-input-placeholder{    color: blue;    text-align:center;}

3、文本域

textarea{    outline:none;    resize:none;/*是否让用户调整文本域大小*/    padding:none;}

4、表单元素的name属性是用来和后台交互的,后台和js就是通过name来锁定元素然后取值赋值的。
5、一般label和input radio和CheckBox联合使用,label的for属性和input的id相同即可把两者关联起来,点击文字时就选中了radio和checkbox。

三、补充

1、怎么给以为页面添加标题图片?
在HTML的head里面添加<link rel="icon" href="xxxxxx.ico"/> 用link标签引入文件rel属性值为icon引入标题图片,href为图片地址,图片是ico格式。
2、a标签的伪类
a:link,定义正常链接的样式;
a:visited,定义已访问过链接的样式;
a:hover,定义鼠标悬浮在链接上时的样式;
a:active,定义鼠标点击链接时的样式。

<style>         /*a{            border:1px solid red;             a:link 链接颜色              a:active 点击那一刻              a:hover 鼠标悬停         }*/         a:link{            color: red;         }         a:active{            color:blue;         }         a:hover{            color:yellow;         }         a:visited{            color:green;         }        </style>

鼠标样式cursor ;例如当鼠标移动到某元素上时变为小手,在该元素的style里面加上cursor:pointer;即可。