发表于: 2020-02-02 22:53:59

1 1217


今日完成的事

优化代码,删除一些不必要的样式,重复样式


header头部使用定位方式完成

实现课后 扩展性:去掉header的三块文字的任意一两个,剩下的一两个都还在原位置上不会受到影响。


用<button></button>标签代替<input type="submit">标签完成登录按钮

   css样式较input要多一些


拓展学习简单了解<button></button>、<input type="button">、<input type="submit">三者的不同 

参考资料https://www.zhihu.com/question/20839977/answer/16354924


将字体大小,样式高度全部减半,效果任务效果展示较为接近

(依然不理解为何不按照原图高度设计)


上传代码至github并同步至服务器


遇到的问题

当中间文字开启绝对定位并使left:50%;文字并不在中心位置

原因

文字左侧的宽度为总体宽度的50%

解决方法

使用margin-left给予文字一个字体大小的负值即可向左平移至相对中心位置

margin-left:-1.8rem;


遇到的问题

当定位头部三个文字的高度时,通过计算后文字实际位置偏下

原因

默认情况下,文字的实际高度不等于文字的高度

参看资料https://blog.csdn.net/a2013126370/article/details/82786681

在这里插入图片描述解决办法

文字大小为font-size:1.6rem; 同时设置line-height:1.6rem;通过计算即可将文字定位至中心位置    定位top值为(高度-文字大小)/2


明日的计划

着手task5



收获

了解的三种按钮的不同


了解line-height并会简单应用


学会了使用绝对定位确定页面的中心


返回列表 返回列表
评论

    分享到