『飞秋』小项目心得交流
『飛秋』小項目心得交流
<!--[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/
總結
以上是生活随笔為你收集整理的『飞秋』小项目心得交流的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .NET平台常用的开发组件
- 下一篇： 快速WinForm开发