发表于: 2017-03-06 21:23:54
1 729
一、今天完成的事情
1.完成Task-4,Task-5做了一半。
二、明天要做的事情
1.完成Task-5、Task-6.
2.初步了解JS的DOM结构
三、遇到的问题
1.让一个元素居中,需要给父元素一个text-align: center;,这里犯了一个常识性的错误,经常直接给元素,作一下检讨。父级元素的text-align会被子级元素的浮动或定位效果给覆盖掉,从而失效,通过一个左浮一个右浮顺利完成任务的头部。
2.通过观察展示效果,发现input里的placeholder属性里的内容在鼠标点击时会消失,移开后又会恢复,这里用了一个小小的JS:
onfocus="this.placeholder=''" /*点击的时候文本设置为空*/
onblur="this.placeholder='请输入手机号'" /*离开的时候文本显示出来*/
3.消除input的边框以及点击时显示的边框分别用到了border: 0;和outline: none;
4.这里要注意一下在展示效果里,背景颜色不是白色,是灰色的。
5.手机跟锁图片的旁边都有一条竖线,用键盘上的"|"效果不理想,这里用一个span,给其设置宽高以及一个灰色背景顺利完成。
四、收获
进一步熟练了页面布局,完善了一些编码上的疏漏跟错误习惯,对于浮动的理解更深了一步。 以上
评论