當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

『飞秋』小项目心得交流

發(fā)布時(shí)間：2025/3/15 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了『飞秋』小项目心得交流小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

『飛秋』小項(xiàng)目心得交流

最近網(wǎng)站首頁改版，我負(fù)責(zé)前臺頁面的編寫，一個(gè)很小的任務(wù)，從中我卻學(xué)習(xí)到了很多東西，現(xiàn)總結(jié)一下

和大家分享一下，希望對大家有用，也希望能得到進(jìn)一步的提高。

總結(jié)index:

1.?????? 本次首頁改版前期的策劃還算細(xì)致完整

2.?????? 美工、前臺、后臺大家分工合作其樂融融*美工和前臺是十分密切的，美工的人要懂前臺，前臺的人要了解美工，這是必須要做到的

3.?????? 兼容是王道，但是為了兼容不能不擇手段

4.?????? 合理利用庫和框架，提高編碼的效率

5.?????? 代碼問題匯總

index擴(kuò)展:

一．策劃是重頭戲

1.?????? 一個(gè)項(xiàng)目的進(jìn)行沒有一個(gè)完整的細(xì)致的規(guī)劃是不可能順利的實(shí)現(xiàn)的，一個(gè)網(wǎng)站后期的運(yùn)營與前期的實(shí)現(xiàn)是密不可分的。

2.?????? 好的策劃對于編碼的實(shí)現(xiàn)和日后的維護(hù)以及功能拓展等方面都是至關(guān)重要的。

那么怎么寫好一份策劃呢？對于此本人鐵拐李也不是很在行，希望有強(qiáng)勢的能夠積極加入進(jìn)行支援。

我只說說自己的想法（只做參考與改正的對象）：

1.?????? 首先你要明確為什么要改版。是頁面風(fēng)格不美觀還是網(wǎng)站性能欠缺還是雙方面的問題，如果問題過多那可以改名字叫網(wǎng)站重建了。

2.?????? 要對癥下藥，針對你改版的側(cè)重點(diǎn)來實(shí)行有效的措施。比如網(wǎng)站是因?yàn)轫撁婕軜?gòu)要升級而改版，那么我們的側(cè)重點(diǎn)就要放在美工上，做出一個(gè)符合改版要求的設(shè)計(jì)圖，如果是性能上要改版，那么側(cè)重點(diǎn)要放在代碼的規(guī)范上。

3.?????? 功能想的全一些，為日后維護(hù)鋪好路。

二．分工要明確，合作要密切

網(wǎng)站的建設(shè)絕對不是一個(gè)人可以搞定的事情，所以明確的分工很重要，俗話說“術(shù)業(yè)有專攻”幾個(gè)更好和起來可能就是“最好”了。但是分工不代表分開工作，其實(shí)大家是緊密聯(lián)系的，只有密切的合作才能是開發(fā)進(jìn)行的更為順利。比如前臺與美工的關(guān)系，美工的出圖要規(guī)范，要利于代碼的書寫，不能“想當(dāng)然”的去進(jìn)行藝術(shù)創(chuàng)作，那么前臺要明白美工的設(shè)計(jì)思想與意圖，只有兩人的設(shè)計(jì)思路統(tǒng)一了開發(fā)才會事半功倍，我們本次改版的時(shí)候就出現(xiàn)了類似的問題：美工不知道png圖片在IE6下是不會透明的（需要修復(fù)），但是修復(fù)的效果不好，導(dǎo)致后期代碼書寫成了問題，后來就是因?yàn)檫@個(gè)地方浪費(fèi)了很多時(shí)間。還有就是我作為一個(gè)前臺開發(fā)者沒有很好的理解美工的意圖，導(dǎo)航的地方美工的意圖是width：100%，而我理解成了固定寬度，于是又是糾結(jié)了一下，浪費(fèi)了時(shí)間。所以：交流、合作是至關(guān)重要的

三．如何兼容？

作為一個(gè)前臺的開發(fā)者，大家可能一直深受各種瀏覽器的“摧殘”，為了保證兼容往往要采取一些措施，js修復(fù)、hacks等等各種手段一擁而上，最后只能說是效果實(shí)現(xiàn)了。書寫要規(guī)范，這句話說起來輕飄飄，做起來十分的艱難，有得問題是你無法預(yù)料的，除非你已經(jīng)足夠的老道。想要三列高度一樣怎么辦？js修復(fù)？還是采用什么等高度自適應(yīng)hack？簡單一點(diǎn)吧，來個(gè)固定高度吧。

四．合理使用js庫，提高了效率，增強(qiáng)了兼容性。

　　本次開發(fā)我第一次正式的使用jQuery，感覺用起來非常的方便，省了很多麻煩，也不必為某些兼容問題去苦惱了。不過初學(xué)還是用純js的好，畢竟要學(xué)好一門語言，光學(xué)API

　　是不行的。

? 
五．代碼問題1兩說：

1.?????? 如何讓父元素透明而子元素不透明呢？

效果預(yù)覽：

　　　? 可能你會這樣做：

?1 <body>
?2 <div id="box">
?3???? <div id="imgBox">
?4 <img src="首頁項(xiàng)目（新精簡）/images/ad2.png" />
?5???????? <div id="text">//背景透明
?6???????????????? //下面的文字域不透明
?7???????????? <h4>標(biāo)題</h4>
?8???????????? <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容、。。</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>

?

運(yùn)行一下，似乎沒有達(dá)到預(yù)期的效果。。。怎么回事呢？看來作為#text的子元素是難逃被“透明”的厄運(yùn)了，既然如此我們變一下：

Html：

?1 <body>
?2 <div id="box">
?3???? <div id="imgBox">//z-index:1
?4 <img src="首頁項(xiàng)目（新精簡）/images/ad2.png" />
?5???????? <div id="text">//z-index:3
?6???????????? <h4>標(biāo)題</h4>
?7???????????? <p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容、。。</p>
?8???????? </div>
?9???????? <div id="textInner"></div>//背景層放到#text外邊，與他是兄弟關(guān)系，彼此互不影響,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>

2.?????? ***提升性能

雅虎的14條準(zhǔn)則相信大家都聽說過，這也是提升一個(gè)網(wǎng)站性能的關(guān)鍵，平時(shí)要注意這些細(xì)節(jié)。感謝king！前輩在我做項(xiàng)目時(shí)給我的指點(diǎn)與幫助。

飛秋官網(wǎng)：http://www.freeeim.com/

總結(jié)

以上是生活随笔為你收集整理的『飞秋』小项目心得交流的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。