入职三个星期技术总结。
2015-04-25 09:30
190 查看
闲来无事,所以写这篇文章记录一下自己三个星期以来所获取的知识点,好让自己温故而知新。
首先回首自己第一份项目,这个东西是纯HTML+CSS页面,(以后我工作中应该就会有很多不用JS效果的展示页面需要我做,例如下面那个X10),所以要好好概况下这个东西。
1. *{margin:0px;padding:0px} body{font-family: Microsoft YaHei;} a{text-decoration: none;}
首先这些预设的东西,要写好,字体啊,字体尺寸啊,行距啊,链接样式啊之类的,在写页面之前就规定好的话,那么接下来就会省心好多。
2.有关全屏的问题,这个太容易解决了,就是内容一层(固定1200或者其他),背景一层,背景包住内容,然后WIDTH100%。OK,如果外层框规定了1200px居中的话,那么背景层就要手动设定为1920px,margin-left:-360px((1920-1200)/2), 而最外层肯定有一个width 100% overview hidden套住,因为这样就可以去掉滚动条。
3.绝对定位让一个框架定死在一个地方上面,挺好用的,记得上层要relative。
4.float:left的应用问题,好多横向布局我都用了float:left,因为的确这样也省心好用,反正float:left是在该文档流中听听话话,也没什么不好,当然也用过display inline-block取缔,发现也很好用,怎么说呢,可以设定宽度啊,高度啊,之类的块元素属性,也同时让该元素可以跟其他元素并排,绝对是个好东西,所以复杂点的时候用这个好点,简单的话直接float:left搞定咯。
5.背景图的使用:终于明白点解一万个图标可以放在一起了;用背景url("images/icon.png") no-repeat scroll left -375px transparent (横向位置左边,竖的方向-375)。这样取一个图标。(当然要限定高度和宽度刚好够这个图标出现啊。。。)
6.有关font的属性的运用,family 啊size啊,行距啊,行高啊,word-wrap啊word-break啊,写文字的时候一定要想起他们。
7.最好就是一个内容一个框,这样改规格的时候该那个框就是了,内容就放在框里面,不然内容很容易零散和崩溃的。
8.能用最最最正常普通的方法实现需求就别用其他白痴方法强行实现需求,不然改需求的时候你知道蛋疼。
9.JS中声明变量记得加VAR,不然就是全局变量了,记得加;还有,记得补全括号花括号,不然找个半死。
10.注意重用!!不要随便遍历N次。。会死人的。
11.任何方法先想好思路,然后再逐步解决,总会有方法的。接下来就是看你的技术熟练度了。。。
12.不能觉得麻烦和急躁,慢慢来啊。做了再说。
13.left大法:最外层1000%;然后里层定义一个10%,这样就可以直接left:0%,-100%;用起来,加个计数器,简单轻松。
14.SL大法,最外层定义一个宽度,里层定义最大宽度,然后就会出现SCROLL框,然后直接用scrollleft控制位移,OK
首先回首自己第一份项目,这个东西是纯HTML+CSS页面,(以后我工作中应该就会有很多不用JS效果的展示页面需要我做,例如下面那个X10),所以要好好概况下这个东西。
1. *{margin:0px;padding:0px} body{font-family: Microsoft YaHei;} a{text-decoration: none;}
首先这些预设的东西,要写好,字体啊,字体尺寸啊,行距啊,链接样式啊之类的,在写页面之前就规定好的话,那么接下来就会省心好多。
2.有关全屏的问题,这个太容易解决了,就是内容一层(固定1200或者其他),背景一层,背景包住内容,然后WIDTH100%。OK,如果外层框规定了1200px居中的话,那么背景层就要手动设定为1920px,margin-left:-360px((1920-1200)/2), 而最外层肯定有一个width 100% overview hidden套住,因为这样就可以去掉滚动条。
3.绝对定位让一个框架定死在一个地方上面,挺好用的,记得上层要relative。
4.float:left的应用问题,好多横向布局我都用了float:left,因为的确这样也省心好用,反正float:left是在该文档流中听听话话,也没什么不好,当然也用过display inline-block取缔,发现也很好用,怎么说呢,可以设定宽度啊,高度啊,之类的块元素属性,也同时让该元素可以跟其他元素并排,绝对是个好东西,所以复杂点的时候用这个好点,简单的话直接float:left搞定咯。
5.背景图的使用:终于明白点解一万个图标可以放在一起了;用背景url("images/icon.png") no-repeat scroll left -375px transparent (横向位置左边,竖的方向-375)。这样取一个图标。(当然要限定高度和宽度刚好够这个图标出现啊。。。)
6.有关font的属性的运用,family 啊size啊,行距啊,行高啊,word-wrap啊word-break啊,写文字的时候一定要想起他们。
7.最好就是一个内容一个框,这样改规格的时候该那个框就是了,内容就放在框里面,不然内容很容易零散和崩溃的。
8.能用最最最正常普通的方法实现需求就别用其他白痴方法强行实现需求,不然改需求的时候你知道蛋疼。
9.JS中声明变量记得加VAR,不然就是全局变量了,记得加;还有,记得补全括号花括号,不然找个半死。
10.注意重用!!不要随便遍历N次。。会死人的。
11.任何方法先想好思路,然后再逐步解决,总会有方法的。接下来就是看你的技术熟练度了。。。
12.不能觉得麻烦和急躁,慢慢来啊。做了再说。
13.left大法:最外层1000%;然后里层定义一个10%,这样就可以直接left:0%,-100%;用起来,加个计数器,简单轻松。
14.SL大法,最外层定义一个宽度,里层定义最大宽度,然后就会出现SCROLL框,然后直接用scrollleft控制位移,OK
相关文章推荐
- 技术人生:入职半年总结
- ASP操作Excel技术总结
- Oracle Flashback技术总结
- 记事本 (一)2012-2013年技术总结
- 网络技术基础概念和个人笔记总结(1)
- 网络技术相关总结 推荐
- PHP中9大缓存技术总结(转载 http://www.php100.com/html/php/lei/2015/0919/8969.html)
- 新员工入职培训感受总结
- 入职PHP程序员月薪10000,要掌握哪些技术?
- 个人技术总结文章
- 音视频技术总结——HLS协议
- 大型分布式网站架构技术总结
- 上传jar包到私服(仅限于翼支付公司工作流程使用)和涉及的技术总结
- XML总结(2)-Schema技术
- 银行核心系统软件开发技术终极总结
- HOOK技术的一些简单总结
- 一位阿里技术的总结
- 后台server常用技术学习总结
- 不同局域网内经Internet的P2P通信技术总结
- .net项目技术选型总结