前端入門級之如何從零開始前端（估計要被人鄙視成LOW貨了）入門篇

<!------------------------------------------------------基本說明開始--------------------------------------------------------------->

 

html....css....js/jq

ps

html不求多規範，固然能在嚴師逼迫下強行規範準則最好了（目前正在帶一個小菜，逼迫他）

最好有對結構的直感！能一眼就看出這個是由多少塊，怎麼排列的

 

css至少能寫出規定樣式！

 

而後靈活的運用firebug，等瀏覽器調試工具

<!------------------------------------------------------基本說明結束 --------------------------------------------------------------->

 

 

 

<!------------------------------------------------------簡單的佈局開始 --------------------------------------------------------------->

 

最後寫出此圖！

 

寫此圖的時注意float的用法，清除浮動clear

 

好了這個圖可以理解的話通常的佈局就沒問題了

 

<!------------------------------------------------------ 簡單的佈局結束--------------------------------------------------------------->

剩下的就須要去調整細節了。。。。。

 

最後我但願你們能夠會一點點PS。。。。不是要你做圖

<!------------------------------------------------------ps篇(如何找元素，拿圖層，保存圖層)--------------------------------------------------------------->

至少你能夠學會如何看字體大小，字體類型，行高之類的

 

畢竟不會ps感受設計師們也挺無奈的。。。素材要幫你切好......字體大小要告訴。。。而後你本身調的時候也會很麻煩，噁心了別人，還把本身一塊兒噁心了

 

最後若是你遇到的大的廣告位的圖記得ps保存的時候，改爲web格式。。。畢竟圖片太大。加載個圖片等個半天這簡直是噩夢，作手機端的浪費流量在這上面簡直是浪費

<!------------------------------------------------ps篇(如何找元素，拿圖層，保存圖層-結束)--------------------------------------------------------------->

而後調啊調的調細節

 

接着會遇到瀏覽器兼容問題(遇到問題先不要着急。hack就是爲了解決這類問題儘管我不是很支持用hack)

理論上來講一個合理的佈局不說ie6，至少ie7是確定看上去正常的

本人表示我寫通常的頁面一次成型除ie6以外從不用HACK

ie6我還真不是很敢打包票，萬一牛皮吹大了，被人發現之前有用hack，這是被打臉的節奏

<!------------------------------------------------------hack篇（瀏覽器兼容開始）------------------------------------------------------------------->

 

1.‘\9’:

    eg:.test { color/*\**/: blue\9 }
.header {width:300px;} /* 全部瀏覽器*/
.header {width/*\**/:330px\9;} /* 全部瀏覽器IE瀏覽器 */
.header {*width:310px;} /* IE7和IE6能識別,IE8和FF不能識別*/
.header {_width:290px;} /* IE6能識別，IE七、IE8和FF不能識別*/

 

2.利用條件註釋語句：<!–[if IE]> 此內容只有IE可見 <![endif]–>         

                lt 表示less than 當前條件版本如下的版本，不包含當前版本。

                gte 表示greeter than or equal 當前版本以上版本，幷包含當前版本。

                lte 表示less than or equal 當前版本如下版本，幷包含當前版本。

 

3.其它hack 技術：

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA識別*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA識別*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8識別*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8識別*//*「color」和「/*\**/」之間有個空格*/

4.

彙總下IE各版本的css hack。

 

 

hack	示例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
\0	color\0	No	No	No	No	Yes	No
\9	color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	color:blue !important; color:green;	No	No	Yes	No	Yes	No

 

標準模式中：

1，減號(-)是IE6專有hack

2，反斜槓零(\0)是IE8專有hack

 

<!------------------------------------------------------hack篇（瀏覽器兼容結束）------------------------------------------------------------------->

 

 

<!--------------------------------------------JQ篇（最後對待新手麼我也不期望大家能寫js了，只求大家能完成點效果）---------------------------->

鋒利的jquery實際上我以爲買這本書就是浪費。。。我也不知道爲何買了

實際上w3school上面jquery的手冊寫的挺全。。。。。。

 

畢竟以工做爲主。。。老闆讓你幹活的，不是讓你爲了個小幻燈浪費一天時間的。。。。當年我就被這樣逼出來的

 

 

<!--------------------------------------------JQ篇（最後對待新手麼我也不期望大家能寫js了，只求大家能完成點效果）-結束--------------------------->

 

 

最後總結

若是是學生黨看這篇文章的話那我又要表示，先從JS開始！畢竟若是你能把JS領悟了，那麼你至少起點贏了！將來仍是不錯的！畢竟未來你去了大公 司，人生的規劃確定是要寫出比Jquery更優秀的框架...祖國的將來，web上超越米國的夢想仍是要落在年輕人+祖國的花朵身上-_-//咱們已經老了，你看我都23了，HOHO，祝願菜鳥們早日脫菜，小白們早日變黑。