发表于： 2017-03-05 19:40:44
1 852
今天完成的事情
- 完成下拉框的编写，主要做的就是清除select的默认属性，关键代码如下：
border: solid 1px #000;
/很关键：将默认的select选择框样式清除/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/在选择框的最右侧中间显示小箭头图片/
background: url(“http://ourjs.github.io/static/2015/arrow.png“) no-repeat scroll right center transparent;
/为下拉小箭头留出一点位置，避免被文字覆盖/
padding-right: 14px;
关于箭头，使用的是背景图。 - 修改任务六的bug，底部span宽度不够，增加宽度。头部添加outline修改默认样式。
- 实现文字过长出现屏幕截断效果，实现时宽度设置为百分比效果比较好。
明天计划的事情
- 任务七页面结构的编写
- 学习css3的动画效果。
- 学习html5音频标签。
遇到的问题
- 如何用css模拟bootstrap的下拉框，bootstrap的下拉框是用js实现的，但是我们要用css实现，所以选择了select标签，但是select标签的文字直接设置文本居中没有效果，向师兄请教后使用padding撑开来实现效果。
- 实现左边宽度自适应，右边宽度固定的布局时，想使用margin-right和float属性来实现，结果发现没有用，后来发现是结构的问题，应该先margin-right，再给右侧设置浮动，这样才不会影响到margin值。如果不用浮动的话，也可以采用flex布局。
收获
- 小课堂上师兄讲解了bootstrap的栅格系统，并且介绍了row类的作用以及为什么可以清除padding，bootstrap的缺点是样式权重过大，需要我们华很大的精力来覆盖他。
- 学会了 appearance:none和outline这一属性。清除聚焦时的样式：
outline:none
清除默认样式：
appearance：none
返回列表
评论