珠海市天惠設計制作有限公司，成立于1996年8月,是為拓展中國Internet領域應用而專門成立的高新技術企業(yè)，是企業(yè)電子商務術服務和解決方案綜合服務提供商。
網(wǎng)站建設開發(fā)web前端頁面在很多人眼里很簡單，大部分的人都會說不就是把效果圖變成網(wǎng)頁嘛，哪里需要那么多的時間，一點技術含量都沒有。確實html頁面沒有js那 么多復雜的交互，也不需要和后臺數(shù)據(jù)打交道，但并不能代表就沒有技術含量，也不是人人都能做好的。web前端頁面結構好壞直接會影響到css代碼的質量，也會影響 js和后臺的開發(fā)，還會影響到以后功能的擴展和代碼的優(yōu)化。
web前端頁面的工作很瑣碎，需要的不僅是基礎知識的扎實，知識面的廣泛，很重要的一點還要細心。下面我們就講講web前端頁面開發(fā)，開發(fā)中需要事項和常遇到的問題吧。
首先分析效果圖，細節(jié)上是否和站內風格統(tǒng)一；設計的元素是否便于實現(xiàn)；元素是否能復用。有問題及時和產(chǎn)品人員進行溝通，避免開發(fā)過程中的頻繁修改，影響工期和代碼的質量。這些都是為更好的布局和精簡css代碼做的必要工作。
合理布局很重要，如同大廈的地基，大廈的高度再于地基是否牢固，合理的布局能有更好的擴展性。結構要盡量簡潔，盡量減少結構中的嵌套，不要為了實現(xiàn)某種樣式添加多余的空標簽。
標簽盡量語義化，能夠讓代碼更加清晰。現(xiàn)在html5添加了更多的語義化標簽，像header，section等，大膽的使用吧。雖然html5對 于標簽的相互嵌套體現(xiàn)了很好的包容性，即使標簽沒有閉合，或是inline元素中包含一堆block元素也不會有問題，但是為了養(yǎng)成良好的習慣還是盡量做 到嚴格遵循xhtml的規(guī)范。
盡量少在web前端頁面寫inline css,會使web前端頁面代碼臃腫，不便于維護，有悖于樣式和結構相分離的初衷。
web前端頁面中推薦的兩種注釋：
<%!–jsp注釋,不會輸出,推薦使用–%>
另一個總和web前端頁面開發(fā)打交道的就是圖片。圖片分為兩種，一種是cssimage引用，另一種純Image的web前端頁面引用。
背景圖是通過樣式在web前端頁面上輸出，會web前端在頁面中產(chǎn)生請求，延長web前端頁面的渲染時間，為了解決這個問題，可以把類似的圖片進行合并，減少請求數(shù)。在進行合圖的時候，盡量把顏色相近的圖標放到一起，可以減少圖片的大小。
web前端頁面中直接引用的圖片盡可能少的縮放，非常影響web前端頁面的渲染速度；盡可能少的使用前端技術控制圖像顯示大小，對用戶不可見的部分就是浪費帶寬，浪費 錢，web前端頁面的渲染速度也肯定會受到影響，影響用戶體驗；在知道圖片寬高的情況下盡量在img中加上寬高，減少web前端頁面reflow造成的速度損耗。
靜態(tài)圖片一定要小，建議存成png8格式，在不影響圖片的顯示質量下，可以選擇128色或是更低的顏色輸出圖片。當然有的色彩比較豐富的圖片，存成jpg格式的更小，難道你會非選png的嗎？存儲完后圖片還能用一些壓縮工具進行無損壓縮（如：PNGGauntlet）。
對于圖片來說小就是原則，為什么呢，給你算個帳，節(jié)約10K看不出什么，100個用戶是1000K，10000個是100000K,那一億個用戶呢？全是白花花的銀子啊！
圖片有幾點需要注意：
1、我們在使用背景圖做圖標的時候通常會在web前端頁面加一個鉤子——img標簽，img標簽中的src中一定要寫上存在的圖片鏈接，人人網(wǎng)通常使用的是一像素的圖片代替（http://a.xnimg.cn/a.gif）。如果你忽略了這個地址，web前端頁面上會有一個404的請求，在ie6下直接顯示一個叉。
2、如果你的工程已經(jīng)上線，我們站內對靜態(tài)文件會有一個緩存機制。在開發(fā)過程中，經(jīng)常會遇到修改圖片的情況，如果你修改后的圖片不更改文件名或是在樣式中更改引用該圖片的版本號，對于用戶而言，他們仍然看不到修改后的圖片。所以，一定要記得修改文件名。
3、避免過小的背景圖平鋪。
4、盡量將圖片上的文字提取出來用代碼實現(xiàn)，便于圖片的復用和日后文案的修改；
css主要說一下注意事項。
1、class命名建議以功能而不是外觀命名，不建議使用大小，避免起容易沖突的名字，防止樣式被覆蓋。
2、CSS后代選擇器性能：.a{} > .b .a{}，查找匹配耗費cpu,代碼復雜，優(yōu)先級高，修改不方便；
3、編碼時盡可能使用縮寫，如padding：top right bottom left;border-width:1px 0;border-color:#CEE1EE;color:#F05;
4、使用CSS display:none隱藏的元素不會被搜索網(wǎng)站檢索，會影響到網(wǎng)站的SEO，可以使用text-indent:-9999em;來達到同樣效果。
5、減少overflow清除浮動的使用，避免使用無意義的空標簽清除浮動，通常站內使用clearfix來清除浮動。
6、border:none;替換border:0;的寫法；
7、使用css3的屬性來代替陰影或是圓角的圖片；
瀏覽器的兼容問題是web前端頁面開發(fā)的永衡話題。結構的合理和簡潔在很大程度上可以減少兼容性的bug,但是ie的特立獨行又不可避免有一些兼容性問題。
IE6、IE7、Firefox之間的兼容寫法：
寫法一：
IE都能識別*;標準瀏覽器(如FF)不能識別*；
同一類class下的CSS hack可寫為：
.classname{
background-color:#333;/*三者皆可*/
*background-color:#666; /*IE*/
_background-color:#999; /*僅IE6及IE6以下*/
}
一般三者的書寫順序為：FF、IE7、IE6.
寫法二：
*+html 與 *html 是IE特有的標簽, Firefox 暫不支持。
.classname{background-color:#333;}
*html .classname{background-color:#666;}/*僅IE6*/
*+html .classname{background-color:#555;}/*僅IE7*/
常見的css bug這里就不說了，稍后會在wiki里總結一個列表供大家查閱和參考。
對于樣式和圖片的引用a.xnimg.cn,s.xnimg.cn,xnimg.cn。這三種的區(qū)別是a.是在其他地方的域，s.是在北京本地的域，xnimg.cn是曾經(jīng)的域，通常現(xiàn)在使用a.xnimg.cn,除非非常重要的靜態(tài)文件才使用s.xnimg.cn。
在開發(fā)過程中，我們應該對bug出現(xiàn)有預見性，特別是常見的bug（QA經(jīng)常提的bug比如連續(xù)字符串沒有換行，鼠標在沒有變成手型…）要提前做出 處理。要考慮各種極端數(shù)據(jù)和不同大小圖片在頁面中的顯示情況。對于代碼進行合理的規(guī)劃，減少冗余，可以簡單寫下注釋，便于以后修改。
再來說一下快速查bug和解決bug的一些個人見解吧。
首先要分辨bug的類型，有的bug不一定是web前端頁面的問題。是否是web前端頁面套錯了某個標簽沒有閉合，是否需要js修改或是后臺技術處理。
查bug，工具是必不可少的，firebug,ie的IEDevToolBar,chrome自帶調試工具都能進行調試和修改；使用工具能很快定位bug的位置和類型，作出修改。
經(jīng)驗的積累也是很重要的。有時候你使用了所有的方法解決但問題仍然存在，需要看看DOCTYPE是否在HTML頂部，是否完整，推薦；是否有多余的空格或是編碼格式是否正確，
比如ie解析的空格間距不太一樣，有時候會導致意想不到的bug。
還有一種方式是逐步刪代碼方式，看究竟是那個部分是有問題的。
解決bug常用的幾個方法：
有人說zoom:1;是解決ie6的兼容問題的萬精油。可以用，但是不易多用，這個屬性可能會存在一些潛在的問題，至于是什么問題，大家可以google一下。
position:relative;往往和overflow:hidden;搭配使用能解決ie下滾動圖片側漏問題哦。
最后要說的是優(yōu)化，一定要時時刻刻想著優(yōu)化自己的代碼，給用戶帶來最好的體驗。永遠記住這句話【HTML結構的簡化>css代碼結構的簡化】
我們的承諾：