memories in ShenZhen

On the way

老话说,人生天地间,若白驹之过隙,忽然而已,确实如此。来深圳的日子不算久,且不说我原先的感受怎么样,毕竟如人饮水,冷暖自知。至少,现在,我的心情不错,因为走出去才愈发觉得,深圳,其实是个好地方。
几个朋友说我来深圳之后长大了,可不是,我自认是个出淤泥而不染的孩子,当然这淤泥有好的,有坏的,而我,皆不染。好的,学不来,坏的,不会学。
我不是个闲不住的人,只是周末在宿舍呆一天下来,心情就不美丽了。所以我只好让自己多出门走走。不管是一个人还是友人相伴。
深圳大学,即使是周末,田径场内外也是充斥着来自体育老师或者是教练的嘶吼,然后就是一批嫩孩子疾驰而去,返回原点,如此反复。还有许多上班族像我一样趁着周末,在这个已经不属于我们的地方,或单纯的散步、跑步来解压,或借机感念时光。
szdx
中山公园,是我寄几趁着周末阳光明媚,带上百度地图按图索骥,这一路的风景,我很喜欢,因为,马路很宽敞,很干净,林荫大道也就是行人的地盘,没有骑自行车的或者摩托车的跟我抢,甚至路人也只有三三两两。三公里多的路程我也确实走了些弯路,不过不碍事,因为我不觉得耽误我的时间。中山公园好不热闹,有老人家唱戏的,欧巴桑们跳广场舞的,老师带着学生在草地上玩撕名牌游戏,还有小孩子们的游乐园,但于我似乎也没什么特别的,不过景致也算怡人,是个休闲的去处。
zsgy
2016.11.19,我从深大徒步经过高新园,大冲,白石洲,世界之窗,最后到华侨城,共是5公里。本以为今天会下雨,没想到我一出门,一如既往的阳光明媚,好在有习习的凉风。(不得不提醒我自己,有一个出门总忘记戴帽子的怪病,希望下次能记得)一路上我拍了不少照片,由于本人不上镜,对,是因为摄像头识别不了本人的美貌,所以,本人的相册里只有风景。一路浪到华侨城,总是能看见那些孤傲独立的大厦,似乎每一座都有其独具匠心的设计,虽然有点距离感,但是有景致相衬,倒不显得那么高冷了。我一直在说,深圳适合生存,不适合生活,其实不然。大城市必然有她自己的一套生活方式。我进了华生活馆,这个地方于我目前的生活状态大相径庭。在我看来,属于比较奢华的地方。二楼似乎叫成长馆,从英语培训机构到学毛笔字,学画画,学芭蕾,甚至有一个叫形象管理会所(具体店名不清楚),大概就是帮忙对女士或者先生们的形象进行适当的改造或者是建议之类的。
每一次出门走走,都会有点新的感想,悟到透了,也就长大了,记录自己的悟的过程,只要不矫情,我相信,是有帮助的。
11.19
11.19
工作不止是为了生存,还为了生活。旅行不在远近,且不止是为了发现美,还为了活出自我。
明天是本小主的生日,应该是25岁的生日了。这一天仍是平常的一天,但我总要做点什么来证明它是有意义的,毕竟,每一天,都不可辜负。

bottom element

比较HTML元素固定在页面底部的几种做法

需求一

例如:移动端商城的购车车中,需要把结算以及金额统计等元素放在页面底部,要求:(1)当页面内容不足一屏的时候,在屏幕可视区的底部出现;(2)当页面内容大于一屏,也就是有垂直滚动条时,在文档的最后显示。

解决方式

  1. 使用position:absolute;,定位为bottom:0
  2. 使用position:relative
  3. 使用flex属性实现。

利弊解析

  1. position:absolute只能把元素定位到第一屏的底部,但不会随着滚动条的出现跑到文档最底部,满足需求(1),不满足需求(2)。
  2. position:relative只能满足需求(2),不能满足需求(1),可以配合js实现。
  3. flex即可满足需求(1),也可满足需求(2),重点阐述。

实例:使用flex属性实现元素位于页面底部

//stylesheet
.wOutSide{
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;bottom: 0;left: 0;right: 0px
}
.wWrapper {
    min-height: 100%;
    width: 100%;
    position: relative;
    /**父元素display设置为flex**/
    display:flex;
    display:-webkit-flex;
    /**父元素的布局是垂直方向**/
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
}
.wInSide{
    width:100%;
    flex:1;
    -webkit-flex: 1;
}
//html结构为:
<div class="wOutSide">
    <div class="wWrapper">
        <div class="wInSide"></div>
        <footer></footer>
    </div>
</div>

效果如下(先为不足一屏;再为超过一屏)

betweenScreen overScreen

installation of SASS

基于windows系统的SASS安装

安装步骤

  1. 首先要安装ruby,Ruby Installer
  2. 打开终端cmd,执行gem install sass
  3. 查看是否安装成功sass -v

安装过程遇到的情况

  1. 执行命令gem install sass 报错如下: install error
  2. 1是由于路径被强掉,可用淘宝镜像一试gem sources -a http://ruby.taobao.org,结果报错如下:sass_taobao_fail
  3. 于是改用腾讯云gem sources -a http://gems.ruby-china.org/代替,完美!install success
  4. 执行命令sass -v 测试是否安装成功,完美! sass_v

webstorm shortcut key

webstorm 的快捷键使用

查找替换

  1. ctrl + shift + N 通过文件名快速查找工程内的文件。
  2. ctrl + shift + alt + N 通过一个字符快速查找位置。
  3. ctrl + f 在文件内快速查找代码
  4. f3 查找下一个
  5. f3 + shift 查找上一个
  6. ctrl + r 文件内代码替换。
  7. ctrl + shift + R 指定目录内代码批量替换。
  8. ctrl + shift + F 指定目录内代码批量查找。

界面操作

  1. alt + 向前/向后 切换代码选项卡。
  2. ctrl + f4 关闭当前选项卡。
  3. ctrl + shift + f12 代码编辑最大化。

代码编辑

  1. ctrl + D 复制当前行。
  2. ctrl + W 选中单词。
  3. alt + insert 新建一个文件或其他
  4. ctrl + Y 删除一行代码
  5. shift + enter 重新开始一行
  6. ctrl + alt + L 格式化代码。
  7. ctrl + b 跳到变量声明处。
  8. ctrl + / 行注释
  9. ctrl + shift + / 块注释。
  10. ctrl + shift + i 显示当前css或js函数的详细信息。
  11. ctrl + . 折叠选中的代码块
  12. ctrl + -/+ 折叠项目中的任何代码块,不是选中折叠,自动识别折叠。

导航

  1. esc 进入代码编辑区域。
  2. ctrl + G 到指定行的代码。
  3. ctrl + ]/[ 光标到代码块的后面/前面。
  4. alt + up/down 上一个/下一个方法。
  5. ctrl + shift + i

npm useage

npm 的用法

npm基本命令

npm install <package name> <--save(-S) || --save-dev(-D)> package name是可选的,没有的时候默认按照package.json的配置安装
npm uninstall <package name> 卸载包
npm update <package name> 更新包
npm init <--yes> 初始化node项目(其实就是创建package.json这个文件)

示例

  1. npm i nrm -g 在全局安装nrm这个包.
  2. npm install 在当前目录下查找package.json 这个文件, 如果没找到这个文件,则报错, 找到则根据它的依赖安装。
  3. npm install nrm -g --registry=https://registry.npm.taobao.org –registry指定源,单次有效。
  4. nrm use taobao 使用淘宝源(加快国内下载速度)

链接

npm.taobao.org

小记-弹出层

弹出层超过一屏滚动时防止body滚动(Android,iPhone5+)
1、 Android:

*    弹出层显示时:
    $("body,html").attr("style","overflow-y:hidden;height:100%");
*    弹出层隐藏时:
    $("body,html").attr("style","");

2、 iPhone5+:

*    只需在body上添加以下样式(允许独立的滚动去和触摸回弹)即可:
    -webkit-overflow-scrolling:touch;