发表于: 2018-07-02 00:13:05

1 739


今天完成的事情:

学习了表单元素并且完成了任务四;

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中使用注释(不使用注释有时自己都搞不清了,太乱)



返回列表 返回列表
评论

    分享到