发表于: 2018-08-13 22:34:22

1 681


Today

1.雪碧图在线制作 https://www.toptal.com/developers/css/sprite-generator

transform: scale(0.5,0.5);

我加了这个,因为图片截得有点大,缩小一半差不多.或者只写一个0.5也可以


6.button会根据上下文语义 决定是块元素还是行内元素,<a><input>都是行内元素.然后这三个其实都差不多,但是button有个默认样式,还要清除,太麻烦了...

然后这里就用<a>标签.<a>默认字体颜色还需要改动.增加

text-decoration: none;

清除a样式

7footer 用flex的space-between,加一个padding 缩短左右间隙


8.切圆形图时看到了border-radius 设置width的一半是画圆,然后画出下拉菜单的三角形是通过高宽为0的div设置border


9.头尾基本完成

Tomorrow

1.继续任务,修改下拉菜单样式

2.下面列表的内容只要完成一个,都是重复的.明天应该能做完任务


Gain

1.雪碧图运用吧

2.用css画一些常见图形

3.大概了解下拉菜单怎么写,具体样式明天再修改

Problem

1.footer 中间那个图标,设置了transform:scale.并且放在<a>标签中,但是鼠标放<a>标签的时候图片实际占据的位置还是原来的大小.在<a>里加overflow:hidden 没用.  


返回列表 返回列表
评论

    分享到