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

來源:互聯網
上載者:User

標籤:大小   如何學習   建立   height   滑鼠   需要   http   collect   顏色   

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

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

概念

前端大概三大塊.

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

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

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.