项目记录

3.15(房屋委托)

  • 每个栅格布局的框架,都有自己的“如何定义每行”的规则,比如目前用的这个项目的插件就是am-g规则,在每行开始的div容器里添加一个class = 'am-g',然后再在这个容器里用class = am-u-sm-*布局,才能保证不乱。
  • background-position其实就是对图片中的内容进行一个定位显示,其值接收xy轴位置的数字,如果超过两个参数,那么需要在每个数值前加上leftbottomrighttop关键字,比如:background-position: left 10px bottom 10px
  • 每个样式只做一件事情,切记切记。其次,代码尽量不要重复,变量定义在一个文件中,函数定义在一个文件中,一些个公有的样式(比如标题、描述、头图等不同界面都有的)抽出来,提高工作效率,减少重复性代码,也别让自己的代码写的那么难受(现在挺难受的)

3.25 (关于我)

在写时间轴样式的时候,不同的浏览器错位的方式也不同(心塞),最后通过:before解决的,然而,这个“最后”还是有问题,因为日期的长度(比如1和0)不同,导致iphone5等部分手机还是有错误,真正的最后是把显示时间的元素width给固定,这个页面才算是完成了:

<div>
    <span class="time">2017.02</span>
    <span class="cut_off_rule"></span>
    <span class="detail">公司总部成立</span>
</div>
.time {
    display: inline-block;
    width: 49px;
    height: 22px;
}

.cut_off_rule {
    top: 9px;
    width: 6px;
    height: 6px;
    background: #f37b1d;
    border-radius: 50%;
    content: "";
    display: inline-block;
    left: 59px;
}

.detail {
    display: inline-block;
    border-left-width: 2px;
    padding-bottom: 15px;
}

其他的是一些css和sass熟练度的问题,用多了就好了,sass是真的好用,还有Koala这个软件也同样给力,可以给css、js代码压缩,图片压缩推荐智图

最近一段时间也没有关注后端了。。(泪奔)

4.1(官网首页改版)

之前一段时间都在写移动端的H5,昨天突然写PC端突然不知所措(难道这两个区别很大吗?不大)。

其实一路写下来基本都ok,但是有个地方虽然不是bug,也不是什么大问题,但是记录一下也比较好。

官网写完,产品经理看了之后,就说:这个地方应该给个鼠标移动后DIV放大的效果。项目经理听了之后回复:这么写的意义在哪里?这DIV中的图片又不是看不清,放大了干什么。。

小提示:项目经理坐我左边,产品经理做我右边。。

虽然我不知道意义在哪里,但是既然有需求了,并且这个需求是可以实现的,于是乎我就去撸了。

  • 一开始我的想法是利用:hover给当前div再定义一个样式,把widthheight同时放大指定值,结果不行,错位了,而且照这个想法写下来也比较麻烦。
  • 然后我就度娘了,发现只要一个transform就能搞定(之前我也有用过这个属性,用于图片90度旋转的),我才发现我是如此的经验不足。

n分钟之后......

写了,效果也达到了,但是但是但是,当鼠标离开的时候,并没有按照transition预期的效果走:

发现了没,鼠标离开的时候,:hover的样式已经无效了,那怎么解决?其实很简单,那就不要在className:hover下添加transition,把transition放在className中就行,className:hover就只做transform的事情。

Last modification:April 1st, 2018 at 09:23 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 林洋洋

Leave a Comment