发表于: 2018-07-18 09:41:52
1 310
ps:写完一提交,发现变成了任务五的日报,其实我这是任务四的,写的有点晚了。。。
昨天,学习了任务四登录界面设计的相关内容
印象比较深的几个知识点有:
1、背景图片的设置:
background-image: url(); 选择背景图片
background-size: 宽 高;设置背景图片的尺寸
background-repeat: no-repeat/repeat-x/repeat-y;设置背景图片的重复性
background-position: left top;设置背景图片的位置
2、input框的默认显示字的设置:
创建<input />时可以通过设置 placeholder 来设置默认显示的字
在CSS中可以通过input::-webkit-input-placeholder { }来进行placeholder的样式设计
(因为手机浏览器大多是webkit内核所以选了这个)
3、width:100%问题:
有些时候没必要写width:100%,比如一个本来就打算让它占满一整行的块级元素
另外,在设置width:100%一定要考虑到其父容器的padding值
4、关于该任务中<header>部分的扩展性要求:
一开始“关闭”和“注册”我用的是float,“登录”水平居中用的是text-align: center;
结果发现这种方法并不可靠,因为,当我删除“关闭”(或“注册”)后,“登录”的水平居
中位置会往相应方向偏移(根据我的观察,是按减去剩下的有字的部分后,再居中的),这应
该text-align:center的实现方式有关,查了一下才知道,text-align:是以文字所处的line-box
为准而进行变动,而float虽然脱离了标准文档流,但依然会在标准文档流上占位置,从而影响到
了line-box,所以,我改用了absolute来对“关闭”和“注册”进行定位,效果还可以。
以上就是我昨天的一些比较有印象的收获了
今天应该会去学习下一个任务的相关知识吧,另外,在别的同学的日报里发现了Flex布局,听说这种布局也是响应式布局里经常用到的,我竟然还没用过!
评论