发表于： 2018-12-14 17:20:40
1 721
今天完成的事情：
1. 在一行上面的3块文字，完成左中右布局
2. 完成图片、分隔线和input输入框在同一行的布局
3. input输入框宽度自适应
4. 在input输入框加入提示文字，并且在输入框获得焦点时，提示文字消失。
5. input输入框获得焦点时，不显示边框。
6. 完成任务4.
明天计划的事情：
准备学习任务5的相关内容。
遇到的问题：（遇到什么困难，怎么解决的）
在图片和输入框中间增加分割线，分割线不能居中显示？
最初方案1：左边img，中间使用div做分割线，右边使用input输入框。默认div分隔线是靠近上方显示，没有居中。通过margin-top调整div分隔线。发现，img和输入框也跟着一起向下移动。分隔线居中了，图片和input在歪到下面去了。
解决方案：花费大量时间，法案1无法实现。只能修改方案，使用方案2. 修改分隔线实现方法，将左边img放到1个DIV里面，分隔线通过这个div的border-right来实现。
收获：
1. 同一行3块文字的左中右显示。
2. 输入框宽度自适应。使用width: calc(100% - 8rem);的方式来实现。
3. 在input输入框加入提示文字，并且在输入框获得焦点时，提示文字消失。
4. input输入框获得焦点时，不显示边框。
返回列表
评论