『飛秋』小項目心得交流
<!--[endif]-->
最近網站首頁改版，我負責前台頁面的編寫，一個很小的任務，從中我卻學習到了很多東西，現總結一下
和大家分享一下，希望對大家有用，也希望能得到進一步的提高。
<!--[endif]-->
總結index:
1. 本次首頁改版前期的策劃還算細緻完整
2. 美工、前台、後台大家分工合作其樂融融*美工和前台是十分密切的，美工的人要懂前台，前台的人要瞭解美工，這是必須要做到的
3. 相容是王道，但是為了相容不能不擇手段
4. 合理利用庫和架構，提高編碼的效率
5. 代碼問題匯總
index擴充:
<!--[endif]-->
一．策劃是重頭戲
1. 一個項目的進行沒有一個完整的細緻的規劃是不可能順利的實現的，一個網站後期的運營與前期的實現是密不可分的。
2. 好的策劃對於編碼的實現和日後的維護以及功能拓展等方面都是至關重要的。
那麼怎麼寫好一份策劃呢？對於此本人鐵拐李也不是很在行，希望有強勢的能夠積極加入進行支援。
我只說說自己的想法（只做參考與改正的對象）：
1. 首先你要明確為什麼要改版。是頁面風格不美觀還是網站效能欠缺還是雙方面的問題，如果問題過多那可以改名字叫網站重建了。
2. 要對症下藥，針對你改版的側重點來實行有效措施。比如網站是因為頁面架構要升級而改版，那麼我們的側重點就要放在美工上，做出一個符合改版要求的設計圖，如果是效能上要改版，那麼側重點要放在代碼的規範上。
3. 功能想的全一些，為日後維護鋪好路。
二．分工要明確，合作要密切
網站的建設絕對不是一個人可以搞定的事情，所以明確的分工很重要，俗話說“術業有專攻”幾個更好和起來可能就是“最好”了。但是分工不代表分開工作，其實大家是緊密聯絡的，只有密切的合作才能是開發進行的更為順利。比如前台與美工的關係，美工的出圖要規範，要利於代碼的書寫，不能“想當然”的去進行藝術創作，那麼前台要明白美工的設計思想與意圖，只有兩人的設計思路統一了開發才會事半功倍，我們本次改版的時候就出現了類似的問題：美工不知道png圖片在IE6下是不會透明的（需要修複），但是修複的效果不好，導致後期代碼書寫成了問題，後來就是因為這個地方浪費了很多時間。還有就是我作為一個前台開發人員沒有很好的理解美工的意圖，導航的地方美工的意圖是width：100%，而我理解成了固定寬度，於是又是糾結了一下，浪費了時間。所以：交流、合作是至關重要的
三．如何相容？
作為一個前台的開發人員，大家可能一直深受各種瀏覽器的“摧殘”，為了保證相容往往要採取一些措施，js修複、hacks等等各種手段一擁而上，最後只能說是效果實現了。書寫要規範，這句話說起來輕飄飄，做起來十分的艱難，有得問題是你無法預料的，除非你已經足夠的老道。想要三列高度一樣怎麼辦？js修複？還是採用什麼等高度自適應hack？簡單一點吧，來個固定高度吧。
四．合理使用js庫，提高了效率，增強了相容性。
本次開發我第一次正式的使用jQuery，感覺用起來非常的方便，省了很多麻煩，也不必為某些相容問題去苦惱了。不過初學還是用純js的好，畢竟要學好一門語言，光學API
是不行的。
<!--[endif]-->
五．代碼問題1兩說：
1. 如何讓父元素透明而子項目不透明呢？
效果預覽：
可能你會這樣做：
<!--[endif]-->
<!--[endif]-->
1 <body>
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:
1 <style type="text/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>
<!--[endif]-->
運行一下，似乎沒有達到預期的效果。。。怎麼回事呢？看來作為#text的子項目是難逃被“透明”的厄運了，既然如此我們變一下：
Html：
1 <body>
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:
1 <style type="text/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>
<!--[endif]-->
2. ***提升效能
雅虎的14條準則相信大家都聽說過，這也是提升一個網站效能的關鍵，平時要注意這些細節。感謝king！前輩在我做項目時給我的指點與協助。
飛秋官網：http://www.freeeim.com/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
