到今使用黑糖主题也有一段时间了，在1.52的基础上，自个也修改了好多样式，喜欢折腾吧，过程有过痛苦与无耐，那是因为好多知识都还没学好，在运用的时候总得找度娘N遍，有时因为大意，删错了文件，导致全乱了，差点都放弃了。最后还是有点欣慰，这些月的付出总算是没白费–自个觉得好看多。

在折腾的时候，会温习到好多知识点，挺伤脑的，下面记记这过程中的一些想到的、用到的东西：

1. 使用过渡transition效果，能使得视觉上优美些，同时也是一些特效的辅助。比如：透明度的用法，能使元素有渐渐出来或隐藏的视觉
2. 颜色上的应用很难感觉，简单又不复杂的时候，都多半是灰白系，用得比较多的有：#333、#666#、#F5F5F5等等，背景色透明用到rgba(0,0,0,.5)，通过设置最后的透明参数来达到效果。白色的透明用：hsla(0,0%,100%,.5)
3. 在前端布局的时候，考虑到了几种客户端的分辨率，PC、平板、手机，在CSS中设置@media断点来设置不能的屏显示不同的效果。其中手机：<767px;平板：<1024px;PC端取平板大些也行了。
4. margin用的时候，要注意在PC端的时候可能视觉上还行，可在手机上的时候，或许要变样了，用rem作单位会好些。
5. 元素边框设置圆角与否有时会大大影响视觉，border-radius：0时会有扁平的效果，50%的时候会有圆形的效果（宽高相等）.
6. 定位position的使用会让元素更加方便设置位置、达到特殊的效果。用得比较多的就是绝对定位：absolute，用这个的时候要明确其父元素的位置，父元素一般设来：relative。另一种是fixed，回到顶部或上下篇效果的时候会用到。
7. 伪元素before、after也是个大有用处的东西，能省掉好多标签。用的时候清楚其父元素的属性。比如文章页中线条的动画就要用到它。
8. ：hover的过渡也是挺常用的，虽然在jquery中也能实现这个效果，不过在css中能做到就在CSS中做吧。这个如果是父元素的hover，则可以改变其子元素CSS。
9. css运用的时候，尽可能避免代码重复，比如二个元素都设置一样的属性的时候，就写在一块，避免分开来写，维护的时候改也方便，目标是尽可能只改一个值就能达到想要的效果。
10. 变换效果transform，也是需要熟悉的一个属性，线条的长或高变换效果的时候，scale(0,1)到scale(1,1)等。同时在实现元素的垂直居中时，就大有用场，比如：top:50%;transform:translateY(-50%)，动画默认从中间开始，通过transform-origin: 0 0可调整为从左上角开始。
11. jquery在查找元素的时候，find()，children()，sibling，parent()，添加元素：append等。对这些还不是好熟，只能用的时候找找百度。
12. 取滚动条的位置：scrollTop = $(document).scrollTop();取鼠标的位置：$(document).mousemove(function (e) {e.pageX}
13. 巧妙设置元素的左或底边距，能有向侧边隐藏的效果，比如设left:-10%，出现的时候Left:33px;
14. 图片的放大与缩小效果，用scale来达到，包含图片的容器注意设来overflow:hidden;
15. 文字不换行显示：overflow:hidden;text-overflow:ellipsis;white-space:nowrap，为使文字都在一行内显示，不破坏网页布局。
16. 背景图像的切换效果，做的只是背景图位置的切换：background-position:0 -42px,就能显示42px下的东西，从而实现图像的切换，如网站的logo切换。
17. 动画设置：@keyframes，切换有from与to，或指定时间的样式：5%{} 10%{} …
18. 这几个字体挺好看的：font-family: Georgia,’Microsoft JhengHei’,’微软雅黑’;
19. 最重要的一点教训：随时准备好备份，这是血的教训