发表于: 2018-07-25 23:22:30
1 569
一、今天完成的事:
1.继续任务6,根据任务步骤逐步学习;
2.完成了页面的头部和底部,头部使用css雪碧图显示图标;
二、明天的计划:
继续任务6,继续学习bootstrap;
三、遇到的问题:
1.对bootstrap的默认样式修改很吃力,暂时放弃使用bootstrap制作按钮组,明天写主题部分时再尝试用bootstrap布局;
2.对底部两个上面是图片,下面是文字的按钮,想不明白怎么实现。开始先用的div加span实现样式,后来单独写demo,用button实现,之后发现在原来的基础上直接加button,再设置button样式即可。
3.底部按钮实现背景加图标的时候,开始在其父元素里面设置的背景色,然后button设置的图片,发现无法显示,后来查看background属性,原来button可以直接设置背景图片加图标;
四、收获:
1.头部按钮通过css雪碧图实现,学会了怎么设置图标大小以及图标位置;
2.学会了怎么设置上面是图标下面是文字的button。以前设置的button都只有文字或者只有图标,这次底部按钮需要实现上面是图标,下面是文字,确实想了好长时间,最后边想边写demo发现其实很简单。想法加操作才能更好的解决问题;
3.分享一下background的用法:
定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-origin 规定背景图片的定位区域。
background-clip 规定背景的绘制区域。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
评论