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

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

概念

香港彩票透码 www.kptln.icu 前端大概三大塊.

  1. HTML

  2. CSS

  3. 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打開之后的效果是這樣的.



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

  1. 每一列之前有個黑點,我們不想要,應該去掉.

  2. 導航欄應該是橫的而非豎的.

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

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的導航條看起來一樣.

  1. 去掉每一個<a>,也就是鏈接下面的下劃線.

  2. 選中狀態的區別.

  3. ul標簽的背景色.

  4. 鼠標懸停的時候,每一列的背景色要發生變化.

直接貼代碼了.

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.
就是這樣.


文/葉孤城___(簡書作者)

上一篇: 用戶曝iPhone 6s自動關機 蘋果尚未回應

下一篇: iOS開發如何學習前端(2)

分享到: 更多
最火爆的棋牌游戏 重庆时时采彩稳赚绝招 ag电子游戏网址导航 欢乐斗地主怎么跟好友玩 3分pk10计划软件网页版 二串一稳赚 广东十一选五稳赚不赔 幸运分分彩定位胆必中法 助赢飞艇计划软件下载 pk10技巧与实战攻略 必富娱乐官网下载 欢乐斗地主可以两人玩么 排九至尊大还是天牌大 杀三停一输五赢六 足球比分预测 重庆时时现场开奖结果直播