发表于: 2019-08-11 09:32:45

1 1003


今天完成的事情学习了雪碧图,按钮的边框设置,完成了任务中的head和footer部分,加深了对flex布局的                                  使用以及按钮的设置

明天计划的事情学习列表知识,将列表头和列表完善,完成中间部分。

遇到的问题

在head中采用flex布局,但是两个按钮居中,一个logo右侧对齐,仅仅是align-items只做到三个在一块居中显示,最后对logo采用了相对定位做到右侧对齐

用ps做雪碧图(精灵图)比较麻烦,在网上找到一个制作网站https://www.toptal.com/developers/css/sprite-generator比较方便

收获:

1、background-color属性更改按钮的背景颜色

2、border-radius属性为按钮添加圆角,border属性可以添加颜色

3、  :hover将鼠标移到按钮上时,使用选择器更改按钮的样式,transition-duration属性确定“悬停”效果的速     度

4、  box-shadow属性为按钮添加阴影

5、  opacity: (添加透明度)

    cursor: not-allowed(添加一个禁止标志)

6、删除边距并添加float:left到每个按钮以创建按钮组

7、background-position 属性设置背景图像的起始位置(x|y),默认(0 0)

8、background-position属性的用法:若起始位置左上角(0 0),需要用到那个图,将雪碧图左移或者上移至目标位置,即background-position:-xpx -ypx;






返回列表 返回列表
评论

    分享到