发表于: 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,给其设置宽高以及一个灰色背景顺利完成。

四、收获

  进一步熟练了页面布局,完善了一些编码上的疏漏跟错误习惯,对于浮动的理解更深了一步。   以上


返回列表 返回列表
评论

    分享到