标签：比较 部分 固定 enter 兼容 弹性 好的 结果 写代码
哎，心累！
开始
本次本着自己养活自己的原则，接了三个学姐的毕业设计，都是是把她们的设计图编写成网页。实际都是一些布局规整，页面简介的网页。虽然一份网页有15页，但其实以正常速度大约两天就可以写完。所以毫无顾虑，接了三份，时间比较赶，差不多都三天之类要（不是同时接的）。
过程
第一个学姐的设计是关于美食方面的网页，十五张网页大概只有五种样式。一共是三个人做，但第一次经验不足，在分配任务时非常随意，没有按照网页样式来分配，本来里面有八张样式一样的网页，硬是我们三人一人两三张给做完了（header和footer是一个人早就做好的）。第一份毕业设计做完得还算快，五天完事了（没有一直做，因为有课也有其他事）。在合代码时我们只是检查了部分兼容性和动态效果实现，发现没问题直接发给那个学姐，结果得到的反馈是有大！！问·！！题！！，其实当时我也是懵逼的，虽然不是非常仔细的完成的网页，但大问题应该不至于吧，所以约了学姐见面谈。结果学姐一见面直接就跟我们讲网页与设计图严重不符，变形严重，布局偏差大，不能接受。拿出设计图和我们写的网页一比对真的有问题，所以只能抱歉的帮学姐修改网页。就从这里开始，让我意识到写网页需要注意很多很多东西。
一，修改代码真的是麻烦，不说别人的代码，自己的也看着累。
长篇的代码一行行怎得让人眼花缭乱，那么多的英文字母更是让人认不清谁是谁。所以在修改的时候，代码工具，切图工具以及浏览器调试工具一起上，能用浏览器调试工具调试是最好的，明了快速。遇上重新测像素的也还好，就怕自己的代码哪一块只要稍稍加了1px，都会让整个布局崩塌。所以自己的代码一定要注释清楚，样式命名直观（尽量给每一块代码或样式一个特殊的开头），重复样式写在一块，尽量减少代码行数。每张网页复用的header和footer用js引用过来，这样如果遇到修改，修改一次就够了。最后当然是别人的代码啦，看不懂就算了，尽量不在别人代码上做修改，而是让他本人来修改，这样来得比较快速高效。
二，做好网页自适应
这是这次写网页遇到的最大的问题。网页变形！这个变形倒不是指网页放大或缩小之后得布局文字混乱，只是每个div块高变矮8了或者变高了，紧接着页面上的图片就跟着变形了。这点让那些做UI的学姐简直无法接受，我们当时也一直没注意到这问题，而且也确实有网页出现了浏览器缩放后布局混乱（这就是没有做好自适应布局了啦，应该是用像素定位而且没有采用三栏布局），后来仔细一想，问题是设计图问题，因为学姐给的设计图是宽为1024的图，高固定，而我们在写代码时习惯将图片的高设置定值（ps测出来的值），宽设置为所在容器的100%。所以出现了在1366或者其他分辨率电脑上图片被压缩的情况。这个问题不是通过改变电脑分辨率来解决，而是如何在代码中能够解决才对。当然我只知道有弹性图片，这个问题我还不知道怎么解决啦。然后就是在写网页是尽量用居中div来包含其他div，这样网页的自适应也会比较好。
三，认真对待每张网页，做到尽量一比一还原设计图。
标签：比较 部分 固定 enter 兼容 弹性 好的 结果 写代码
原文地址：http://www.cnblogs.com/shuixiaohao/p/6905929.html
