发表于: 2019-05-20 21:24:43
1 843
今天完成了什么:
完成任务5页头部分。
完成了什么:
花了一天才完成任务6头部........
遇到了什么问题:
使用justify-content:space-between时,样式不会对齐,可是又设置了平分对齐,试了很久询问师兄才得知需添加个空的div。设置盒子的宽度等于右变图片的盒子外边距和它的宽,使三个盒子三等平分这才使得居中。
头部按钮在定位的时候还是不熟悉postion的使用,position:absoulte和relative作用傻傻分不清楚,后来第一个按钮给予了绝对定位absoulte,第二个按钮给予了相对定位relative才黏在一起。
后面文字盒子输入100%高的话文字跑上面去了不会居中对齐,后面添加了盒子行高和absoulte定位才使得居中覆盖整个按钮。
在利用雪碧图的时候一开始查了许久的资料才知道雪碧图怎么使用,用在线雪碧图生成器,把切好的图片放到一个文件夹命名好图片的名称然后拖动到生成器里面,点击生成,然后在盒子里引入background-image:{url生成的雪碧图名称}。下图是因为忘记设置宽高所以没得显示,一定要设置盒子大小的宽高,以及用background-size,repeat、position配合使用,
size是设置图片的大小。例如100%,200%。
repeat是为了不重复。
至于position在我理解就是引入要的图片在雪碧图生成的代码,然后不断的在html页面调用f12微调x轴,y轴的值找到要的图片才能显示出来。
在处理底部导航栏的时候,我的布局是想图片跟文字都是在一个button上,然后我发现切出来的图不太好控制,图片显示出来了另外几张雪碧图也显示出来了。所以重新切图,图片与图片之间空隙大了一些。样式还没下写下去,明天在调试看看。
收获了什么:
大概学会使用雪碧图,实际还不是很清楚,需要再多看下资料吧,感觉又很简单,不知道我上述的步骤正不正确。
相对定位和绝对定位还是要再认真了解,弹性盒子只管子集,如果用弹性盒子浮动属性会失效。
另外做题思路太慢吧,没啥经验挺烦的,一看到布局没任何逼数,只能一个个试这里用div好还是包裹起来用还是不用之类的- -
明天计划:
完成任务6部分。
评论