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