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


實現的效果如下。

  1. 實現了一個橫放的<ul>,也既iOS中的UITableView.

  2. 實現了當鼠標移動到列表中的某一個<li>,也既iOS中的UITableViewCell,的時候,這個li標簽的背景色會變成黑色。

頁面很簡單。但是仍存在一個小問題。眼尖的同學可以發現。當鼠標懸浮在li上的時候,背景色是變了沒錯,但是當背景色變的時候,我們發現,其實黑色的li的bottom是超過父控件的,也就是說,我們li的下邊沒和ul的下邊對齊。
這是為什么呢?

我去check了一下我們的css文件。關于<li><a>的屬性是這樣的。

li {    float: left;    height: 44px;    width: auto;
}li a {    display: block;    text-decoration: none;    color: white;    text-align: center;    padding: 14px 16px}

這里出問題的地方在于,我用了一個不是很優雅的方法來實現了text的居中。

我是怎么實現的呢?
這里,需要先解釋一下在css中,padding的含義。先看一張iOS中的圖。


這是一個UILabel,我給他設置了左邊距和上邊距,熟悉iOS的同學都知道,這時候,這個label的長寬會自動和內容的長寬一致。
那么如果把css中的padding概念套在iOS中,那么可以說,在這種情況下,padding應該是0.

好,這時候我們把約束條件增加兩個,我把這個label的寬和高都設置成固定值。



現在這個label變成了什么樣子呢?
他變成了這個樣子



這個時候,UILabel的寬高遠大于text的寬高。那么,這個時候,padding的值就不是0了。
是多少呢?
UIFont有個屬性是pointSize,那么padding-top的值就是(UILabel的高 - 內容的高)/2
padding-left的值就是
(UILabel的寬 - 內容的寬)/2
所以如果想要文字居中顯示的話,就需要padding-top和padding-bottom相同。

但是代碼中,我們的padding-top和padding-bottom已經相同了,為什么鼠標懸浮狀態的時候感覺<a>大了呢?
實際上,我用chrome的Inspect查看了一下。發現



實際上<a>的高度是46,超過了li的高度,這就是為什么hover狀態下,當背景色變的時候,<a>的bottom超過了li的bottom.

直覺告訴我,這種做法不太好。為什么,因為設置padding來實現垂直居中需要耗費大量的精力,還得你自己算字體大小和padding的關系。挺討厭的。
于是我谷歌了一下。



點擊去之后看到了這種做法。


原理就是把line-height這個屬性和文字的容器height設置成大小一致即可。

后來我發現了一個問題,就是把line-height設置成百分比的形式是無效的。比如
line-height: 100%.
為什么呢?因為line-height只能設置成px形式的值才意味著文字內容和容器內容高度一致,如果設置成百分比形式,那么會讓css以為設置的是字體的大小。

然后我們把css改成這樣。

li a {    display: block;    text-decoration: none;    color: white;    text-align: center;    line-height: 44px;    padding-left: 16px;    padding-right: 16px;
}

效果如下。



搞定了。

進入正題,彈出菜單

香港彩票透码 www.kptln.icu 今天想要實現的效果如下。


這個實現原理,類似于iOS中的把一個父View的其中一個子View的hidden設置為true。然后添加一個事件,比如點擊之后,把這個view的hidden設置為false。那么這個子view就顯示出來了。
那么在css中對應的屬性就是display了。

先看看html。

<html>
    <head>
        <link rel="stylesheet" href="dropdown.css" type="text/css">
    </head>
    <body>
        <div class="dropBtn">
            DropDown            <div class="dropdown">
                    <ul class="dropdownul">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
            </div>
        </div>
    </body></html>

那么class為dropBtn的就是我們的父view,對應的子view是class為dropdown的div。里面還內嵌一個列表ul,我們現在需要做的就是先把div.dropdown的display屬性設置為none.

div.dropBtn div.dropdown {    display: none;
}

然后,效果是當鼠標滑動到div.dropBtn上的時候,列表顯示。
那么就可以這么寫。

div.dropBtn:hover div.dropdown {
    display: inline;
}

搞定。

完整的css文件如下。

* {    margin: 0px;    padding: 0px;
}div.dropBtn {    width: 100px;    background: green;
}div.dropBtn div.dropdown {    display: none;
}div.dropBtn:hover div.dropdown {
    display: inline;
}div.dropdown {    position: relative;
}ul.dropdownul {    width: 100%;
}li {    list-style: none;    display: block;    background: yellow;    height: 40px;
}li:hover {
    background: red;
}li a {    display: block;    text-decoration: none;    text-align: center;
}

解釋一下.

  • 第一段就是把所有選擇器的margin和padding都設置為0,防止出現一些亂七八糟的問題。

  • 第二段設置最外層的div的寬度

  • 第三段,先把里面的div.dropdown隱藏

  • div.dropBtn:hover div.dropdown 這句就是檢測到鼠標移動到最外層div的時候顯示里面的div

完畢。


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


上一篇: iOS開發如何學習前端(1)

下一篇: 一行代碼,圓角風雨無阻,告別離屏渲染性能損耗

分享到: 更多
复式6码二中二多少组 云南快乐时时2019123 大神娱乐最新版下载 众赢计划软件科技有限公司 500元 倍投方案 稳赚 北京pk10走势图app 双色球中奖 猜大小单双稳赚 分分彩计划软件安卓版下载 时时彩技巧0369 2358 pt老虎机娱乐网站官方 二人斗地主让牌规则 通比牛牛官网 欢乐三公手机游戏下载 竞彩500