[武汉|荣耀师兄]JS-张智|2018年06月29日的日报-技能树.IT修真院

发表于： 2018-06-29 22:47:52

1 663

今天完成的事情：完成任务四的内容，对任务四进行总结：

首先认识header的使用，<header>定义文档的页眉（介绍信息）。一般用在<body>标签内。

<body>

</body>

给header 标签添加布局使得“注册”在左边，“登录”为黑体位于中间，“关闭”在右边。

然后学习input的用法：

<form >

</form>

主要使用的属性：type：用来规定input元素的类型。本次任务主要用到type="text"。type="password"

name：name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据。

placeholder:placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失。

再使用ps直接导出所需的png。插入input里，首先使用背景图片的方法，发现得不到想要的效果，于是使用盒子模型概念，图片是一个小盒子在左边，input是个盒子在右边，一个大盒子套住，在进行css修饰，就可以得到任务的效果。

明天计划的事情：（进行任务五的内容，复习前面知识点，学习flex布局）
遇到的问题：（

在使用strong标签时，不可以对其进行设置大小与margin，padding。百度发现其为行内元素，不可以通过css改变宽高。需设置display：block，设置后得到所需效果

。；在使用input标签时，我设了宽度是100%，就导致input的username那一行一直独占一行，对其进行display：inline-block设置也无法改变，经过尝试，发现对任务理解错误，并不需要把input设置成宽度100%，于是设置65%

，然后发现边框使用的结果与任务要求不符，直接border-right：1px solid #EFF0F4; 不能得到任务的那种边框长度只有一半的效果，我的想法是尝试用右边的input来设置border-left，把input的height降低，可以使得border-left变短，看起来只有大的div的一半，结果不是很理想，于是还是用图标的边框来设置，想法是用一个大的div嵌套一个小的div，设置margin与padding-right=1rem，利用Chrome调试效果如图，可以做出任务的效果。