发表于: 2017-03-12 22:30:33
1 677
今天完成的事情:上午开始使用less编写任务11的代码,先用了半个小时将任务11的html文件部分的代码编写完成,然后用less将html中用到的类选择器等添加需要的样式。遇到了一些问题,上午基本将导航栏部分的代码编写完成了。下午又花了3个小时将form便签部分编写完成。然后对里头input的一些属性进行了补习,添加了手机号码字符的长度,没有填写时的提示,以及自动聚焦等。晚上看群里关于计算机基础的视频。
明天计划的事情:开始任务12的学习和代码编写。
遇到的问题:
第一个是上午在编写导航栏时时的问题,header标签里添加了两个div,分别左右浮动,填写“关闭”“注册”,还有一个span标签,填写“登陆”,对span设置了行高等于高度,但是中间的“登陆”和左右两侧的文字不在同一行,对比了以前任务5的布局,一模一样,但是那个却垂直居中了。研究了半天,上午用相对定位,设置top为负值调整了,也达到了效果,但是问题出在哪儿,不是很清楚,一直在尝试找出问题。下午又接着再搞,发现是左右两侧的浮动文字占用了一行,中间的span就下去了,这个有点出乎我的理解,因为按理说浮动是脱离文档的,span的文字在最上边才对,只能用span设置行高撑起来的,但是这个很明显浮动的左右div还是占位置的,span撑起来的就相对往下了,header本身的高度也就便大了。又对三个标签设置成inline-block,但是没有起作用。后来对父元素添加了清楚浮动的属性,得到了解决,但还是感觉不对,没有透彻地理解和解决问题。最后,无意中把行高和高度的设置都归到父元素了,三个标签的高度都去掉,只保留宽度和字体样式的属性,可以同时对三组问题调整垂直位置,感觉这样挺好,就就此打住了。至于问题的本质,还是没有得到透彻的答案,只能说是可以解决。
第二个就是input部分的布局样式了,我为了方便写input中左边图标后的竖线,在同一行使用了一个div放置图标并设置右侧边框+一个input标签用于输入相关内容。图标是作为背景添加的,可以省略自适应的调整问题。右侧的input标签用100%宽度减左侧div的宽度。标签都设置是inline-block和margin值,但是input标签并没有上去,有设置了右浮动,上去了,顶到了父元素顶部,和左侧div没有同时垂直居中显示。调整了半天,最终让他俩都浮动,再对父元素清楚浮动的方法实现了效果。不明白为什么内联块元素不能保持同一行?
收获:第一次使用less,虽然最后编写的less代码和生成的css代码都是130行上下,并没有感觉减少多少,但是后期维护肯定是维护less简单。附上今天任务11的成果。
评论