码迷,mamicode.com
首页 > 其他好文 > 详细

20191105 前端学习总结

时间:2019-11-22 00:36:25      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:max   方法   word   列表   css   html   rowspan   学习总结   table   

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.

 

 

20191105 前端学习总结

标签:max   方法   word   列表   css   html   rowspan   学习总结   table   

原文地址:https://www.cnblogs.com/Wardenclyffe/p/11909270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!