2016/11/8、9

做了什么

①研究devise的定制化,发现太复杂,研究了快一天后只能放弃

②完成Assignment的页面优化

③完成进度条的优化制作

学到了什么

①多VPN错乱怎么解决

原因:开了多态,也开了Lantern,错乱了

解决方法:关闭Lantern,只留多态

②图片突出背景外的css写法和富文本的输出方法

1、要写出图片突出到背景外的效果,一开始的思路是用z-index用图层的思路做,其实不用那么麻烦。只需要把图片写个负值的margin-top就可以实现了。(原来图片顶部应该和色块平齐,写了负值的margin-top实现的就是往上移动)

2、课程的描述部分输出了html语言。原因是<%= xxx %>输出的是普通文本,而如果是在编辑器编辑输出的则是富文本格式,要用sanitize,比如<%= sanitize(@course.description) %>

③如何定制循环中某一项为特例

例:执行循环,同时最后一个定制

<% @stuff.each_with_index do |thing, i| %>
  <% if (i + 1) == @stuff.length %>
    # ...last one stuff
  <% else %>
    # ...normal stuff
  <% end %>
<% end %>

原理:i为计数(也可换为其他字母或单词),每次新读取一个stuff都会计数(0,1,2...)。因此,要对最后一个进行定制,只需让i+1=length即可。其他的定制也是按照这个思路进行。

④用style定义css的区别写法

html语言内用等号,且class和style的间隔不能加<div class="small-progress-bar" style="margin-left:0px;" >

erb语言内用冒号:<%= link_to assignment_path( assignment), class: "" ,style:"height:85px; width:450px;" do %>

⑤垂直居中的一种写法+强行换行的写法(平时是靠各单词间的空格换行的)

.bar-title {
  height: 50px;
  width: 120px;
  background-color: #545965;
  border-top-left-radius:0.5em;
  border-bottom-left-radius:0.5em;
  float: left;
  display: table;

  .bar-title-text {
    color: #DCDCDC;
    text-align: center;

    width: 120px;
    word-break: break-all;
    display: table-cell;
    vertical-align: middle;

  }
}

垂直居中思路:display为table,在单元格里用vertical-align

强行断行的写法:word-break: break-all;

领悟

①一个东西研究太久还是研究不出来的话,不要过于执着。可以问别人,或者用其他方式解决。只要能解决问题,并且把办法嵌入到自己的组块中,都是有效的。

②遇到问题,先把能想到的全部解决方案写下来(如果解决的过程中灵感来了,也把新想到的方法写下来),大概限制自己一个时间,解决不了就先处理下一个问题。在一个问题上一直耗着是没有任何效益的。用相同的无效方法死磕同一个问题是经常犯的错误。所以,不是没有解决问题的能力,而是解决问题的方法出现了问题。

计划

明天起每天晚上拨出点时间在办公室里学学设计,从扁平化icon入手。