20191105 前端学习总结

20191105学习总结
(一)列表合并
1.colspan: 横向合并,列合并
2.rowspan: 纵向合并,行合并
3.th:表头 会加粗,同时样式居中
td
th → tr → .....
td
td
tr → .....
td
4. table → tbody → ..........
td
tr → .....
td

td
tfoot → th → .....
td

5.border-collapse:collapse; 边框双实线变为单实线。
边框塌陷

6.*相比flex,表格布局的局限性很大。

(二)表单:form
1.<form action="#" method="get">
action提交路径 method提交的方法 get/post
<imput type="text" placeholder="提示文字">
文字框
"password" maxlength="6"
密码 输入的最大长度为6
......
"submit"
提交按钮
<imput type="button" value="按钮上的字">
<button>按钮上的字</button>
可发起提交的按钮
<input type="reset">
重置,但不等于清空。

2.二选一
<lable for="male">男</lable>
<input type="radio" name="gender" id="male">
<lable for="male">女</lable>
<input type="radio" name="gender" id="female">
男女二选一,交互更友好,点击文字即可。
lable不是表单控件,仅仅为了交互,扩大点击范围。

3.选择项
n1<input type="checkbox" name="...">
多选择项
n2<input type="checkbox" name="..." checked>
特殊属性|标志性属性 (即默认勾选)
n2默认勾选

4.标志性属性
form表达里后面加上readonly,表示只读,表示只能看,不能改。
form表达里后面加上disabled,表示禁用。
checked

5.下拉列表
<select>
<option value="">北京</option>
<option value="">天津</option>
<option value="">东京</option>
</select>

6.多行文本框
<textarea cols="30" rows="10">
</textarea>
边框可变的文本框
在css设置 resize:none;
边框不可变的文本框

7.上传文件
<input type="file">

(三)Html5的新增控件
1.color
2.email
3.date

(四)隐藏
1.display:none 连位置也不保留
2.visiblity:hidden 位置保留
3.rgba( , , , a) a表示透明度,0表示隐藏。
4.opacity=0 表示透明,可用来隐藏元素(一般不常用)。

(五)溢出隐藏
overflow:hidden;
蒙版图中:
translation:all linear .5s 用来0.5秒过渡
cursor:pointer 手型
4.

猜你喜欢

转载自www.cnblogs.com/Wardenclyffe/p/11909270.html
今日推荐