好幾天沒更新博客了，剛實戰完一個HTML+CSS的簡單項目。經過幾天的摸索，發現收益良多。之前只是單純得寫demo，看知識點，沒有親自實戰項目。但實戰過後才會了解，如何才能更好地提升自己的技術。針對這次項目開發，我總結了以下內容：
一、技術總結
1、公共樣式的設定
在開始項目之前，我們可以先大體了解一下項目中每個頁面的內容，比如字體樣式，段落結構，文字大小等。我們可以針對這些內容來設定一個固定的樣式文件。在開發中 就可以直接引入此文件，而無需再重復敲CSS代碼。
CSS Code復制內容到剪貼板- /*基本樣式*/
- * {
- margin:0;
- padding:0;
- }
- body {
- font-family: "微軟雅黑";
- }
- .clear { /*清除兩邊浮動*/
- clear: both;
- }
- .fl { /*清除左浮動*/
- float: left;
- }
- .fr { /*清除右浮動*/
- float: rightright;
- }
- a { /*去掉鏈接的默認下劃線*/
- text-decoration: none;
- }
- li { /*去掉列表默認樣式*/
- list-style: none;
- }
需要用到時就直接在類名後加上所要用到的類名即可：
XML/HTML Code復制內容到剪貼板- <div class="div01 lf"></div>
- <div class="div02 clear"></div>
2、整體布局
開發項目過程時，若事前先將每一頁的框架搭建好，而後期就只需把具體內容填充進去就可以了。而我就習慣用以下框架來實現頁面整體布局：
XML/HTML Code復制內容到剪貼板- <body>
- <div id="header"></div><!--頁面頂部內容-->
- <div id="nav"></div><!--導航部分-->
- <div id="content"></div><!--頁面中間內容-->
- <div id="footer"></div><!--頁面底部-->
- </body>
一般來說，設定好頁面大體框架後，剩下的就直接一塊一塊地填充進去就方便些了，這樣開發起來思路也比較清晰。當然還要設定相應的CSS樣式，但這個要視項目的具體 要求來做。
3、切圖要素
當大體布局弄好後，接下來應該就是從切圖開始入手了，雖然沒有太多技術性的操作，但也有些要注意的地方。比如在切圖中，要特別注意的是尺寸。雖然有些是比較細微 的部分，需要耐心處理。因為細節性的問題往往也會導致結果的不同。其實不要認為差不多就可以了，有時候差一點就是差一點，當效果不盡人意的時候，到頭來還是得再去花時間去修改。再者，在保存切圖時，由於會自動生成一個images文件，所以我們不用再自己新建目錄，或者也不用進入到某個目錄中，不然它還是會在相應的位置出現images這個文件夾。
4、命名、代碼書寫規范
規范的命名有助於提高代碼可讀性。在網上也有挺多相關的規范，在這裡我也簡單羅列幾點：
（1）、直觀命名
當在設計Web頁面以及需要對一個div進行標識的時候，最自然的想法就是使用可以描述元素所在頁面位置的詞匯來對其命名。
例如： top-panel
horizontal-nav
left-side
（2）、結構化命名
例如： main-nav
subnav
（3）、基於成員的命名規范
基於成員的命名規范是指按照文件,文件夾的從屬關系,通過歸類的方法進行命名,這樣可以使文件的排列具有較強的邏輯性.
例如:一個圖片文件是在鼠標點擊之前為"file_on".而在點擊後的圖片文件命名為"file_off"根據這個類別命名.更加的清晰.
5、學會制作“雪碧圖”
在項目開發中少不了會加入許多小圖標，小圖片。若一張張切下來後保存起來後，使用起來也比較麻煩，加之所占內存也大，如此一來頁面加載速度就慢了許多。這可不是 什麼好事，大大降低了用戶體驗度。所以，我們可以事先把小圖片切下來放在同一張頁面，到時候開發時就只需要把這張圖片引入即可。然後再跟進情況調整背景圖片的位 置，利用background-position這個屬性可以設置。
6、知識點的清晰
在做項目時，我由於對某些知識點不夠熟悉，不能熟練運用，所以導致開發速度慢。當我們熟練掌握了一個知識點後，是可以快速地寫出代碼實現相應的效果。在這個項目開發過程中，我主要是對以下知識點不夠熟悉：
（1）、關系選擇符的使用
（2）、偽類選擇符的使用
特別是E:first-of-type與E：first-child 。其實它兩最大的區別在於前者是父元素下的第一個結構標簽，而後者不需要一定是第一個結構標簽。如下例子：
XML/HTML Code復制內容到剪貼板- <div class="test">
- <!-- <a href="#">測試</a> -->
- <p>p標簽</p>
- <a href="#">a標簽</a>
- <a href="#">a標簽</a>
- </div>
a:first-child是.test下的第一個結構標簽，而且是a標簽，不是則不起效果 。
a:first-of-type不需要是第一個子元素只需要.test下的a標簽的第一個即可。
（3）、CSS屬性之opacity、z-index 、display
a、opacity
在這次項目開發中，有一個效果是需要用到遮蔽層的效果。如下圖。一開始我的做法是寫兩個div，然後將第二個div設置透明。然後再用hover後，將它透明度調回不透明。 同時也將第二個div定位，與第一個div重合。但我發現這樣寫下來代碼多且容易亂。而參考了其他小伙伴的代碼，發現其實靈活運用z-index也可以做到此效果。下面是具體實現
CSS代碼：
CSS Code復制內容到剪貼板- .div1 {
- width: 200px;
- height: 200px;
- background-color: #ccc;
- position: relative;
- font-size: 20px;
- text-align: center;
- line-height: 200px;
- }
- .div2 {
- width: 200px;
- height: 200px;
- position: absolute;/*使其與父元素重合*/
- top:0;
- left:0;
- background: rgba(21,85,144,0.2);
- opacity: 0;/*先設置為透明*/
- transition: all 0.3s;/*過渡效果*/
- cursor: pointer;
- }
- .div2:hover {
- opacity: 1;
- }
HTML代碼：
- <div class="div1">
- 請把鼠標放在這裡
- <div class="div2"></div>
- </div>
b、z-index
檢索或設置對象的層疊順序。
並級的對象，此屬性參數值越大，則被層疊在最上面。
如兩個對象的此屬性具有同樣的值，那麼將依據它們在HTML文檔中流的順序層疊，寫在後面的將會覆蓋前面的。
必須定position屬性值為absolute、relative或fixed，此取值方可生效。
c、display
none：隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline：指定對象為內聯元素。block：指定對象為塊元素。
list-item：指定對象為列表項目。
inline-block：指定對象為內聯塊元素。（CSS2）
二、心態總結
經過這次的項目練習，我發現其實很多時候不是直接的能力問題，而是態度問題。一開始，十幾個頁面要趕在幾天內完成，我對自己最後做出的結果是懷疑的。但我也想到，假如以後工作了，也避免不了會"高壓"作業。也就是會可能在短時間內把工作任務完成到位。過程總是堅辛的，但往往別人看重的只有結果。結果沒出來，就是工作沒到位，雖然如此說來挺殘酷的，但事實確實如此。這次的項目完成力度大概90%，還差一些效果沒有實現。但後來發現還得做浏覽器兼容，這確實是個頭疼的問題。雖然麻煩，但這也是必不可少的一部分。針對這次的項目練習，我總結了以下幾點，我認為自己可以提升的地方：
1、熟悉並熟練使用每個HTML便簽和CSS屬性。我認為導致開發速度慢的原因之一是因為自己對知識點的掌握不夠。比如說，要實現某個效果，但卻由於想不起來用到了哪些屬性，或者忘記了屬性名稱，又得花時間去查找資料。無形中時間就耗掉了。
2、減少冗余，優化代碼。可以省略的還是省略為好，因為代碼多了占用內存，頁面加載速度也會變慢。在寫代碼的過程中，也可以先思考一下有什麼比較簡潔的寫法，提高代碼書寫速度。當然這也是一點點積累出來的，練習多了自然也會慢慢了解如何才會提高代碼書寫速度以及降低冗余。
3、切圖速度。也許是比較少用設計工具，對軟件界面的操作不太熟悉。但切圖其實也不需要太高技術，但需注意的一點是准確性。同時也能提高專注度。
4、多思多練、不恥下問。在遇到一個技術難題時，我通常的做法是先自己想，實在想不出的可以百度，參考網上的，然後再實現自己的。若網上的資料不太清晰或者不太理解的情況下。我覺得還是問同學或老師，通過互相交流學習，其實是可以比較快速地了解知識點，並且發現自己不足之處。同時學習借鑒別人做的好的方面。
5、培養嚴謹的態度
關於細節性的問題，是很多人都比較容易忽略的。而我自己看來，我並不覺得自己是個嚴謹的人。有些時候還是因為自己的粗心而導致結果不佳。所以，在認識了這點之後，我會時時刻刻提醒自己。不能因為追求速度而忽略了一些看似無關緊要的東西。
以上這篇HTML+CSS項目開發經驗總結(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
- 上一頁:淺談script在html中的擺放位置
- 下一頁:淺談HTML中的標記