標籤:大小 如何學習 建立 height 滑鼠 需要 http collect 顏色
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.
就是這樣.
所以,最後,大家按照上面的自己寫一遍吧.
iOS開發如何學習前端(1)