前端学习笔记一：关于一个新页面的开发

刚开始做前端开发，只是要整体做个页面，这次还是第一次，做下总结。

页面是一个新的页面，视觉设计师给了一份标注稿和视觉稿，还有一个ps程序的页面设计稿（后来发现这个很重要）。

开发上面使用： 

1。必须的html，css，js基础，同时还有模板开发语言基础；

2。最好能够熟悉各种字体，大小尺寸；

3。最好要熟悉前端现有的规范和基础库，这样做起来就会得心应手；

调试使用：

1。使用各种前端开发工具，比如调色器，PS截图；

2。firebug插件，这个很有用；

3。性能测试工具；

整个页面弄完，刚开始走了点弯路，不过在专业人士指点下，又绕回来了，整体布局很重要，目前公司前端的用的比较多的是div，盒结构，所以写的时候要注意多个浏览器测试，还有写前端的一些经验也要多向专业人士请教，比如整体页面就是952大小，最好使用静态像素不要使用％等，因为页面位置就这么点，线条等都要算像素，所以算术也要好哈 。

 

开发过程中比较好的开发方式是：

1。由于新的页面，完全可以自己先写个html的demo版本，调试显示符合要求了，再合并到模板上面去，这样可以减少后台代码或者业务的干扰；

2。视觉稿上面，如果出现了渐变色、隐性图片等背景，基本可以直接使用截图来处理；

3。引入外部文件的时候，要了解里面的有那些css处理，有些页面上面出现“莫名其妙”的问题，很有可能就是这个造成的；

4。盒模型，用的比较的多是 padding，float标签；做来定义层次关系和内部数据显示；

5。标签的命名最好也能有一定的含义和规则，但要保持css整体有一个结构组织性，这样看css也能大致了解层级关系；

6。写的时候，html代码最好格式化，标签的闭合，层级关系要清晰；自己好，看的人也好！

PS:css学习网站：http://www.w3school.com.cn/css/