发表于: 2018-07-02 00:13:05
1 740
今天完成的事情:
学习了表单元素并且完成了任务四;
1.<form>元素:用于创建HTML表单,包含所有的表单元素,有两个属性:action和method;
action属性:规定提交表单时,向何处发送表单;值是一串URL,可以是绝对路径或相对路径,没有URL的话可以使用”#“占位符;
method属性:规定如何发送表单数据;有两个值:”get“和”post“;
2.<input>元素:用于搜集用户信息,根据type不同的属性值,输入字段可以有很多种形式;本次任务使用了type=”text“、type=”password“和type=”button“;
text:定义单行的输入字符,可以输入文本;
password:用于输入密码,默认为掩码形式,在页面中以黑点呈现;
button:点击按钮,本身并没有用处(点击后没有任何反应),大多数情况下利用JS为其添加操作;通过value属性可以改变按钮上的字符;
3.placeholder属性:用于在input元素中显示预期值的提示消息;提示会在内容为空时出现,在获得焦点时消失;
4.maxlength属性:规定输入字符的最大长度,值为数字值;在提示为”请输入手机号“的input元素中进行了使用,将字符长度限制在了11位;
5.placeholder属性的字体和颜色是可以改变的:;
6.outline(轮廓)属性:绘制于元素周围的一条线,位于边框边缘的外围,起到突出元素的作用;不会占据空间,也不一定是矩形;
outline的属性:outline-color、outline-width、outline-style;不设置其中某个也不会出现问题;
本任务主要用于消除当点击input元素时所产生的焦点,outline:none;(所以焦点其实就是边框边缘的轮廓?)
7.对于input元素自身所携带的边框使用border:none;解决;
8.在设计图片与输入框时,使用了div元素进行包装,但是其内的图片和输入框却没有保持平行,使用vertical-align:middle;中间对齐(vertical-align属性只能用于inline元素,对block元素无效),对图片还设定了max-width:100%;
9:图片与输入框中间的分隔线使用了图片的右边框进行设定;
10.对于最下面的”忘记密码“使用float:right;搞定;并且设定了30%的下外边距,使得在移动端页面保持在上部;
明天完成的事情:
任务五,进军!!!
遇到的问题:
总体还是比较简单的,主要还是围绕在关于页面的细节处理上;
对于基础知识还是不够,有些东西还是经常忘记;
收获:
表单元素的构造;
一些新的css样式;
开始在css中使用注释(不使用注释有时自己都搞不清了,太乱)
评论