小项目心得交流
最近网站首页改版，我负责前台页面的编写，一个很小的任务，从中我却学习到了很多东西，现总结一下
和大家分享一下，希望对大家有用，也希望能得到进一步的提高。
总结index:
1. 本次首页改版前期的策划还算细致完整
2. 美工、前台、后台大家分工合作其乐融融*美工和前台是十分密切的，美工的人要懂前台，前台的人要了解美工，这是必须要做到的
3. 兼容是王道，但是为了兼容不能不择手段
4. 合理利用库和框架，提高编码的效率
5. 代码问题汇总
index扩展:
一．策划是重头戏
1. 一个项目的进行没有一个完整的细致的规划是不可能顺利的实现的，一个网站后期的运营与前期的实现是密不可分的。
2. 好的策划对于编码的实现和日后的维护以及功能拓展等方面都是至关重要的。
那么怎么写好一份策划呢？对于此本人铁拐李也不是很在行，希望有强势的能够积极加入进行支援。
我只说说自己的想法（只做参考与改正的对象）：
1. 首先你要明确为什么要改版。是页面风格不美观还是网站性能欠缺还是双方面的问题，如果问题过多那可以改名字叫网站重建了。
2. 要对症下药，针对你改版的侧重点来实行有效的措施。比如网站是因为页面架构要升级而改版，那么我们的侧重点就要放在美工上，做出一个符合改版要求的设计图，如果是性能上要改版，那么侧重点要放在代码的规范上。
3. 功能想的全一些，为日后维护铺好路。
二．分工要明确，合作要密切
网站的建设绝对不是一个人可以搞定的事情，所以明确的分工很重要，俗话说“术业有专攻”几个更好和起来可能就是“最好”了。但是分工不代表分开工作，其实大家是紧密联系的，只有密切的合作才能是开发进行的更为顺利。比如前台与美工的关系，美工的出图要规范，要利于代码的书写，不能“想当然”的去进行艺术创作，那么前台要明白美工的设计思想与意图，只有两人的设计思路统一了开发才会事半功倍，我们本次改版的时候就出现了类似的问题：美工不知道png图片在IE6下是不会透明的（需要修复），但是修复的效果不好，导致后期代码书写成了问题，后来就是因为这个地方浪费了很多时间。还有就是我作为一个前台开发者没有很好的理解美工的意图，导航的地方美工的意图是width：100%，而我理解成了固定宽度，于是又是纠结了一下，浪费了时间。所以：交流、合作是至关重要的
三．如何兼容？
作为一个前台的开发者，大家可能一直深受各种浏览器的“摧残”，为了保证兼容往往要采取一些措施，js修复、hacks等等各种手段一拥而上，最后只能说是效果实现了。书写要规范，这句话说起来轻飘飘，做起来十分的艰难，有得问题是你无法预料的，除非你已经足够的老道。想要三列高度一样怎么办？js修复？还是采用什么等高度自适应hack？简单一点吧，来个固定高度吧。
四．合理使用js库，提高了效率，增强了兼容性。
本次开发我第一次正式的使用jQuery，感觉用起来非常的方便，省了很多麻烦，也不必为某些兼容问题去苦恼了。不过初学还是用纯js的好，毕竟要学好一门语言，光学API
是不行的。
五．代码问题1两说：
1. 如何让父元素透明而子元素不透明呢？
效果预览：
可能你会这样做：
2 < div id = " box " >
3 < div id = " imgBox " >
4 < img src = " 首页项目（新精简）/images/ad2.png " / >
5 < div id = " text " > // 背景透明
6 // 下面的文字域不透明
7 < h4 > 标题 < / h4>
8 < p > 内容内容内容内容内容内容内容、。。 < / p>
9 < / div>
10 < / div>
11 < / div>
12 < / body>
css:
2 #box {
3 width:500px;
4 margin:200px auto;
5 }
6 #imgBox {
7 position:relative;
8 width:212px;
9 height:225px;
10 }
11 #text {
12 position:absolute;
13 top: 0 ;
14 right: 0 ;
15 width:100px;
16 height: 100 % ;
17 color:#FFF;
18 background - color:# 000 ;
19 opacity:. 5 ;
20 filter:alpha(opacity = 50 );
21 }
22 #text h4, #text p {
23 opacity: 1 ;
24 filter:alpha(opacity = 100 );
25 background:none;
26 }
27 < / style>
运行一下，似乎没有达到预期的效果。。。怎么回事呢？看来作为#text的子元素是难逃被“透明”的厄运了，既然如此我们变一下：
Html：
2 < div id = " box " >
3 < div id = " imgBox " > // z-index:1
4 < img src = " 首页项目（新精简）/images/ad2.png " / >
5 < div id = " text " > // z-index:3
6 < h4 > 标题 < / h4>
7 < p > 内容内容内容内容内容内容内容、。。 < / p>
8 < / div>
9 < div id = " textInner " >< / div> // 背景层放到#text外边，与他是兄弟关系，彼此互不影响,z-index:2
10 < / div>
11 < / div>
12 < / body>
css:
2 #box {
3 width:500px;
4 margin:200px auto;
5 }
6 #imgBox {
7 position:relative;
8 width:212px;
9 height:225px;
10 z - index: 1 ;
11 }
12 #text {
13 position:absolute;
14 top: 0 ;
15 right: 0 ;
16 width:100px;
17 height: 100 % ;
18 color:#FFF;
19 z - index: 3 ;
20 }
21 #textInner {
22 position:absolute;
23 top: 0 ;
24 right: 0 ;
25 width:100px;
26 height: 100 % ;
27 background - color:# 000 ;
28 opacity:. 5 ;
29 filter:alpha(opacity = 50 );
30 z - index: 2 ;
31 }
32 < / style>
2. ***提升性能
雅虎的14条准则相信大家都听说过，这也是提升一个网站性能的关键，平时要注意这些细节。感谢king！前辈在我做项目时给我的指点与帮助。