发表于: 2018-07-25 23:22:30

1 570


一、今天完成的事:

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'); 也是允许的。



返回列表 返回列表
评论

    分享到