到今使用黑糖主题也有一段时间了,在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. 最重要的一点教训:随时准备好备份,这是血的教训