毕业工作一个月的总结

原创 AJZ51 随笔 心得 693阅读 2017-07-20 11:29:13 举报

作为一名应届毕业生,实习学的都是js+jq写前台逻辑,跳槽有点原因也是想学习更多的新东西。
实习期的十个月里给我带来了很大的优势,以便于我还没实习完就重新找到了一份新的工作。
到今天是我第二份工作的第一个月。这个月也是有所有收获的。

一、完美的底部绝对布局(sticky footer)
当时的情况是:我有一个底部div想放在文档的内容底部,但是有时候内容很少就会跑上去。所以当内容少时就至于屏幕的底部
纯css实现:body,html{heigth:100%} body-content{min-height:100%; height:auto}
解决链接:http://blog.csdn.net/jacketinsysu/article/details/44513835

二、flex布局(display:flex)
1.flex-direction:row(默认) || row-reverse || column || column-reverse()
2.flex-wrap:nowrap || wrap || wrap-reverse
3.flex-flow属性是flex-direction和flex-wrap的简写
4.justify-content:flex-start || flex-end || center || space-between || space-around
5.align-items:flex-start || flex-end || center || beseline || strech
6.align-content:flex-start || flex-end || center || space-between || space-around
还有其他的几个属性比较少用可以看下面我找资料学习时候看到很好的链接
学习链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

三、水平垂直居中、高度自适应的弹框
HTML:
<div class="modal-bg">
<div class="modal-box">
<div class="modal-content">
</div>
</div>
</div>
CSS:
.modal-bg{
background: rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom:0;
}
.modal-box{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90%;
display: table;
height: auto;
}
.modal-content{
max-height:90%;
overflow:auto;
}

四、animation动画
在项目中遇到需要做一个洗牌和翻牌的动画
animation的兼容性这里就不详细说了
主要说说用法吧
animation: name duration timing-function delay iteration-count direction;

animation-name:绑定在keyframe 选择器的名称
animation-duration:动画所花费的时间
animation-timing-function:速度曲线
animation-delay:动画开始之前的延迟
animation-iteration-count:动画应该播放的次数
animation-direction:否应该轮流反向播放动画。

keyframe 选择器才是真正写动画的效果

.ani_9 {
animation: box9 1.5s linear 0.35s infinite;
animation-iteration-count: 1;
animation-fill-mode: forwards;
/动画在播放之前或之后,forwards当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。/
animation-play-state: running;/播放状态/
}

@keyframes box9 {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(-1.7rem, -2.5rem);
}
30%{
transform: translate(-1.7rem, -2.5rem);
}
50%{
transform: translate(0, 0);
}
}

.fliping{
animation: filpBox 0.5s linear 0s infinite;
animation-iteration-count: 1;
}
@keyframes filpBox{
0% {
transform: rotateY(0deg);
}
25% {
transform: rotateY(180deg);
}
50%{
transform: rotateY(270deg);
}
100%{
transform: rotateY(360deg);
}
}
我会重写写一篇动画的文章总结

五、一些css属性巩固
1.ul-li的序号位置:list-style-position:inside ||outside(默认)||inherit
2.首行缩进:text-indent
如果想除了首行以外的都缩进2个字符可以设置text-indent:-2
3.字与字的间距:letter-spacing

六、LocalStorage保存
1.用来本地储存,比cookie储存空间大
注意:浏览器会把LocalStorage的值类型限定为String类型,我们一般会将JSON数据存入LocalStorage中,
所以JSON.stringify()这个方法,来将JSON转换成为JSON字符串
读取后将JSON字符串转成JSON对象,JSON字符串
常用:
存:LocalStorage.setItem('userid','1')
取:LocalStorage.getItem('userId')
清除:LocalStorage.clear()
删除某个键值:LocalStorage.removeItem('userId')

七、重点学习了vue.js
1.组件的学习(弹框例子)
有需要找我要吧
2.路由的学习(博客例子)
①main.js引入安装路由的功能
import Vue form ‘vue’
improt $ from 'jquery'
import VueRouter from 'vue-router'
import App from './app.vue'

②进入路由各个组件
importList from './list.vue'
import Post from './post.vue'

③Vue.use(VueRouter)

④定义路由
var router = new VueRouter({
routers:[
{ path:'./list',component:'List' }
{path:'./post',component:'Post'}
]
})
⑤ 初始化Router
new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
})

八、接下来要学习Sacss和深入学习vue.js和weekpack

九、预加载和懒加载
这块我会抽时间写出来

以上就是我一个月上班通过项目巩固的以及没项目自学的小知识,请各位大神指导!!

评论 ( 7 )
最新评论
AJZ51 6F 2017-07-27 09:45:12 7F

是啊。那永远是别人的东西。谢谢你的鼓励,我会继续努力的

rollcat 2017-07-26 14:12:23 6F

写的不错,勤于思考有自己的思想,加油!想起曾经自己面试一个H5,问他实现一个左部固定,右侧可以随页面宽度自适应的布局?他说bootstrap已经实现这个了,好吧。。。。。问他做一个不确定高宽的弹窗居中显示,他说bootstrap都做好了我为什么要去做?

fwk1203 4F 2017-07-20 18:07:29 5F

加油!

AJZ51 3F 2017-07-20 17:30:08 4F

现在转正有4k,看能力吧。实习重要好好学咯。我也是渣渣,现在在学vue

fwk1203 2F 2017-07-20 17:13:06 3F

那你现在毕业工资是多少,我明年就毕业了

AJZ51 1F 2017-07-20 15:44:52 2F

我实习一年的,在佛山实习1600 然后半年后就2500 现在毕业了在珠海了

fwk1203 2017-07-20 15:00:08 1F

你实习工资是多少