作為一名開發，學習的腳步永遠都不要停止，不但要精通自己領域的技術，也同樣要想別的領域擴展自己的知識。最近H5在移動端開發中比較火，由於它對iOS和安卓的統一性，迅速得到開發者的喜愛。想要學習H5，最快也是最有效的方法就是從前端入手，這樣既可以為學習H5打出良好的基礎，也可以轉型一名前端開發。那麼一名iOS開發如何迅速學習好前端呢？廢話不多說，下面來干貨。

前端大概三大塊.
- HTML
- CSS
- JavaScript

基本上每個概念在iOS中都有對應的.

HTML請想象成只能拉Autolayout或者設置Frame的ViewController.

好比你在網頁上放了一個Button,如果用HTML你就可以設置他的擺放位置,在哪哪個控件裡.但是你不可以設置大小,顏色,圓角之類的屬性.

CSS專門負責HTML管不了的這些顏色啊,大小啊之類的屬性.

JavaScript主要負責響應事件,你把它想象成iOS裡面的處理Event就行了.

廢話不多說.第一篇,我們做個導航條.

如圖

展開你的想象力,在iOS做這樣的一個導航條你會用哪個控件?<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPs7et8e+zcrHU2Nyb2xsVmlld7vy1d9UYWJsZVZpZXe78tXfQ29sbGVjdGlvbnZpZXcuPC9wPg0KPHA+xuTKtUhUTUzV4tbWtqvO99KyvdDX98HQse0uttTTprXESFRNTLHqx6m90Nf2dWwuPC9wPg0KPHA+wLS/tM/Cw+bSu7bOtPrC6y48L3A+DQo8cHJlIGNsYXNzPQ=="brush:java;">

• HTML
• CSS
• JAVASCRIPT
• SQL
• PHP
• BOOTSTRAP

我上面已經說過了,ul你可以看作是iOS中的UITableView.那麼相應的,ul標簽所包含的li標簽你當然可以看做是一個個UITableViewCell. 所以,整個body標簽包含的就是一個擁有6列的列表.(等同於一個擁有六個Cell的UITableView)
保存為index.html之後用chrome打開之後的效果是這樣的.

效果和我們想要的還有一定差距.
- 每一列之前有個黑點,我們不想要,應該去掉.
- 導航欄應該是橫的而非豎的.

當然還有很多細節不一樣,但是這兩個最明顯,所以我們先改掉這兩個問題.

CSS

既然涉及到樣式的問題,那麼這已經超出HTML力所能及的范圍了.我們這時候就要引入CSS了.

怎麼引入?

在index.html的同一個文件夾內創建style.css文件.

然後在我們的index.html的title標簽下面加入這樣一句話.

 

這樣,就告訴了我們的HTML,在渲染整個網頁的時候,樣式之類的東西請在當前文件夾的style.css文件裡找. OK。

該寫CSS了.

其實所有GUI的屬性都差不多.背景色一般叫backgroundColor, 間距一般叫padding, 文字對齊方式一般叫textAlignment.

諸如此類.

所以,我們的第一件事就是,把每一列之前的黑點去掉.

按照iOS的習慣,我們是不是應該先找到某個控件,再去修改控件的屬性?

在CSS中也是一樣.

怎麼獲取想要修改的控件?

很簡單.這樣就可以了.

ul {
list-style-type: none;
}

這裡list-style-type屬於ul的一個屬性，這裡的屬性我們可以想象成UITableView的屬性，我把它類必成UITableViewStyle屬性，ui的其他屬性我們都可以類必成UITableView的屬性，這樣方便我們學習和理解，具體的其他屬性這裡就不做介紹了。

再運行一下看看.

好的,第一個問題已經解決.

現在解決第二個問題.如何讓ul標簽中的每一條橫著放.

其實也很簡單.

我們只需要設置li 標簽中的一個屬性float就可以了.

這個東西可以理解為布局方向.

如果設置為這樣就可以了.

li {
float: left;
}

刷新一下chrome看看效果.

已經橫過來了.

接下來,其實就是設置各種屬性.讓我們的導航條看起來和w3schools.com的導航條看起來一樣.
- 去掉每一個,也就是鏈接下面的下劃線.
- 選中狀態的區別.
- ul標簽的背景色.
- 鼠標懸停的時候,每一列的背景色要發生變化.

直接貼代碼了.

ul {
list-style-type: none;
margin: 0;
padding: 0;
background: #5f5f5f;
height: 44px;
}
li {
float: left;
height: 44px;
width: auto;
}
li a {
display: block;
text-decoration: none;
color: white;
text-align: center;
padding: 14px 16px
}
li a:hover:not(.active) {
background-color: black;
}
.active {
background-color: #4CAF50;
}

沒學過CSS的看見這些代碼估計有點暈.我來解釋一下.

li a {}這種是什麼意思?

意思就是

標簽裡的所有標簽的屬性.所以,只要有這種多個標簽放一起中間用空格隔開的東西意思就是,右邊的標簽包含在左邊的標簽裡.

 

.active 是什麼意思?

CSS裡面有兩個符號要記清楚一個是.一個是#,什麼意思?

舉個例子.

•  
•  

問,我現在需要把class為FistLi這個標簽的背景色改為紅色,把class為SecondLi的這個標簽的背景色改為黃色,怎麼改?

那麼你就需要在CSS裡這麼寫.

li.FirstLi {
background-color: red;
}
li.SecondLi {
background-color: yellow;
}

是不是看出了點端倪.

這個.符號後面一般會跟某個標簽的class屬性的值.用來特指某一個標簽.

想象一下,假如設計了一個特別復雜的頁面.裡面很多個不同的標簽,那你如何區分?這時候需要給不同的標簽設計不同的class或者id用以區分.簡單來說,這玩意就像變量名.這麼說應該懂了吧.

說完了.,那麼#又是干什麼的?

功能類似.不過.是用來選擇class這個屬性的,而#是用來選擇id這個屬性的.

我們只需要把上述的例子換成這樣.也能達到相同的效果.

在HTML中.

•  
•  

在CSS中.

li#FirstLi {
background-color: red;
}
li#SecondLi {
background-color: yellow;
}

那你估計要問了.這兩個功能差不多啊.那我到底該用哪個?

引入官方解釋.

據說W3C對於ID和CLASS的設定是ID具有唯一性，class具有普遍性。所以說我們用他們倆的時候就要按照這個特性來使用。id 是不能重復的，class 卻是可以重復使用，通過id可以找到頁面上唯一的一個標簽，而class呢可以多個標簽使用同一種樣式提供了可能

li a:hover:not(.active)這麼一長串又是個什麼鬼?

咱們一點一點分析.

首先li a這個的意思是在li裡面的a標簽.

a:hover,hover是英文盤旋的意思.

這句什麼意思呢?

因為a代表的是一個超鏈接.a:hover的意思就是,當鼠標停留在這個超鏈接上.

所以前半句的意思是,當用戶的鼠標停留在li標簽裡的a標簽上的時候.

後面又接了一個:not(.active).

根據前面的解釋.active意思就是,class等於active的所有標簽.前面加個not什麼意思?就是所有class不是active的標簽.

好了,現在連起來. 朗讀一遍.

當鼠標停在所有li標簽裡的a標簽,但是a得class屬性又不等於active的時候請執行下面的css.

就是這樣

以上內容就是對iOS開發如何學習前端的簡單介紹和個人理解，總結起來就是用自己熟悉的iOS相關領域的只是去類比前端開發只是進行學習和思考。本文部分內容借鑒CocoaChina相關文章，博主能力有限，如有不足希望指出批評，大家加油~