一、技術總結
1、公共樣式的設定
在開始項目之前，我們可以先大體了解一下項目中每個頁面的內容，比如字體樣式，段落結構，文字大小等。我們可以針對這些內容來設定一個固定的樣式文件。在開發中 就可以直接引入此文件，而無需再重復敲CSS代碼。
/*基本樣式*/ * { margin:0; padding:0; } body { font-family: "微軟雅黑"; } .clear { /*清除兩邊浮動*/ clear: both; } .fl { /*清除左浮動*/ float: left; } .fr { /*清除右浮動*/ float: rightright; } a { /*去掉鏈接的默認下劃線*/ text-decoration: none; } li { /*去掉列表默認樣式*/ list-style: none; }需要用到時就直接在類名后加上所要用到的類名即可：
<div html' target='_blank'>class="div01 lf"></div> <div class="div02 clear"></div>
2、整體布局
開發項目過程時，若事前先將每一頁的框架搭建好，而后期就只需把具體內容填充進去就可以了。而我就習慣用以下框架來實現頁面整體布局：
<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）、偽類選擇符的使用
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
