首页 / IOS / iOS开发如何学习前端(2)

iOS开发如何学习前端(2)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了iOS开发如何学习前端(2)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3064字，纯文字阅读大概需要5分钟。

内容图文

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;
}

效果如下。

技术分享


搞定了。

进入正题，弹出菜单

今天想要实现的效果如下。

技术分享

这个实现原理，类似于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

完毕。

 

原文：http://www.cnblogs.com/LiLihongqiang/p/7586728.html

内容总结

以上是互联网集市为您收集整理的iOS开发如何学习前端(2)全部内容，希望文章能够帮你解决iOS开发如何学习前端(2)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1284561.html

来源：【匿名】