iOS開發如何學習前端(1)

我為何學前端?
因為無聊.

概念

前端大概三大塊.

HTML
CSS
JavaScript

基本上每個概念在iOS中都有對應的.
HTML請想象成只能拉Autolayout或者設置Frame的ViewController.
好比你在網頁上放了一個Button,如果用HTML你就可以設置他的擺放位置,在哪哪個控件里.但是你不可以設置大小,顏色,圓角之類的屬性.
CSS專門負責HTML管不了的這些顏色啊,大小啊之類的屬性.
JavaScript主要負責響應事件,你把它想象成iOS里面的處理Event就行了.

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

展開你的想象力,在iOS做這樣的一個導航條你會用哪個控件?
無非就是ScrollView或者TableView或者Collectionview.

其實HTML這種東西也叫作列表.對應的HTML標簽叫做<ul>.
來看下面一段代碼.

<!DOCTYPE html>
<html>
    <title>Navigator</title>
    <head>
    </head>
    <body>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JAVASCRIPT</a></li>
            <li><a href="#">SQL</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">BOOTSTRAP</a></li>
        </ul>
    </body>
</html>

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

效果和我們想要的還有一定差距.

每一列之前有個黑點,我們不想要,應該去掉.
導航欄應該是橫的而非豎的.

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

CSS

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

怎么引入?
在index.html的同一個文件夾內創建style.css文件.
然后在我們的index.html的<title>標簽下面加入這樣一句話.

<link rel="stylesheet" href="./style.css">

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

ok.
該寫CSS了.
其實所有GUI的屬性都差不多.背景色一般叫backgroundColor, 間距一般叫padding, 文字對齊方式一般叫textAlignment.
諸如此類.
所以,我們的第一件事就是,把每一列之前的黑點去掉.
按照iOS的習慣,我們是不是應該先找到某個控件,再去修改控件的屬性?
在CSS中也是一樣.
怎么獲取想要修改的控件?
很簡單.這樣就可以了.

ul {
    list-style-type: none;
}

再運行一下看看.

好的,第一個問題已經解決.
現在解決第二個問題.如何讓<ul>標簽中的每一條橫着放.
其實也很簡單.
我們只需要設置li 標簽中的一個屬性float就可以了.
這個東西可以理解為布局方向.
如果設置為這樣就可以了.

li {
    float: left;
}

刷新一下chrome看看效果.

已經橫過來了.

接下來,其實就是設置各種屬性.讓我們的導航條看起來和w3schools.com的導航條看起來一樣.

去掉每一個<a>,也就是鏈接下面的下划線.
選中狀態的區別.
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 {}`這種是什么意思?

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

`.active` 是什么意思?

CSS里面有兩個符號要記清楚一個是.一個是#,什么意思?
舉個例子.
<li class="FistLi"></li>
<li class="SecondLi"></li>
問,我現在需要把class為FistLi這個標簽的背景色改為紅色,把class為SecondLi的這個標簽的背景色改為黃色,怎么改?
那么你就需要在CSS里這么寫.

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

是不是看出了點端倪.
這個.符號后面一般會跟某個標簽的class屬性的值.用來特指某一個標簽.
想象一下,假如設計了一個特別復雜的頁面.里面很多個不同的標簽,那你如何區分?這時候需要給不同的標簽設計不同的class或者id用以區分.簡單來說,這玩意就像變量名.這么說應該懂了吧.
說完了.,那么#又是干什么的?
功能類似.不過.是用來選擇class這個屬性的,而#是用來選擇id這個屬性的.
我們只需要把上述的例子換成這樣.也能達到相同的效果.
在HTML中.
<li id="FistLi"></li>
<li id="SecondLi"></li>
在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.
就是這樣.

所以,最后,大家按照上面的自己寫一遍吧.