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 </a></li>

                        <li><a href="#">Link </a></li>

                        <li><a href="#">Link </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开发如何学习前端(2)的更多相关文章

  1. iOS开发如何学习前端(1)

    iOS开发如何学习前端(1) 我为何学前端?因为无聊. 概念 前端大概三大块. HTML CSS JavaScript 基本上每个概念在iOS中都有对应的.HTML请想象成只能拉Autolayout或 ...

  2. iOS开发如何学习前端

    原文链接 前端大概三大块. HTML CSS JavaScript 基本上每个概念在iOS中都有对应的.HTML请想象成只能拉Autolayout或者设置Frame的ViewController.好比 ...

  3. 关于iOS开发的学习

    关于iOS开发的学习,打个比方就像把汽车分解:    最底层的原料有塑料,钢铁    再用这些底层的东西造出来发动机,座椅    最后再加上写螺丝,胶水等,把汽车就拼起来了 iOS基本都是英文的资料, ...

  4. IOS开发---菜鸟学习之路--（二十二）-近期感想以及我的IOS学习之路

    在不知不觉当中已经写了21篇内容 其实一开始是没有想些什么东西的 只是买了Air后 感觉用着挺舒服的,每天可以躺在床上,就一台笔记本,不用网线,不用电源,不用鼠标,不用键盘,干干脆脆的就一台笔记本. ...

  5. IOS开发---菜鸟学习之路--（一）

    PS(废话): 看了那么多的博客文章,发现大部分人都一直在强调写技术博客的重要性,索性自己也耐着性子写写看吧. 写博客的重要性之类的说明,我就不做复制黏贴的工作了.因为自己没有写过多少,所也不清楚是不 ...

  6. iOS开发架构学习记录

    闲着没事看了一些iOS开发架构的视频,简单的介绍了几个常用的架构设计,现将它记录如下,以后有时间再专门写这方面的内容,大家可以看看,感兴趣的就进一步学习. 一.架构基础 1.架构设计的目的 进一步解耦 ...

  7. IOS开发---菜鸟学习之路--（二十三）-直接利用键值对的方式来处理数据的感想

    首先声明,本文纯粹只是做为本人个人新手的理解.文中的想法我知道肯定有很多地方是错的. 但是这就是我作为一个新人的使用方法,对于大牛非常欢迎指导,对于喷子请绕道而行. 由于这是早上跟我学长讨论数据处理时 ...

  8. IOS开发---菜鸟学习之路--（十七）-利用UITableView实现个人信息界面

    首先来看下我们要实现的效果 需要实现这样的效果 然后我们开始动手吧. 首先选择添加一个新的ViewController 然后打开XIB文件,添加一UITableView 并将样式设置为分组 同时将按住 ...

  9. iOS开发RunLoop学习：一：RunLoop简单介绍

    一:RunLoop的简单介绍 #import "ViewController.h" @interface ViewController () @end @implementatio ...

随机推荐

  1. DialogFragment 监听按键事件的方法（onkeydown）

                    我们在TV软件开发的时候,会使用DialogFragment,有时候要对它的按键事件进行监听,但是DialogFragment的监听方法和其它的不一样.         ...

  2. Node.js相关——CommonJS规范

    1. CommonJS规范产生背景 在后端,JavaScript的规范远远落后并且有很多缺陷,这使得难以使用JavaScript开发大型应用.比如: 没有模块系统 标准库较少 没有标准接口 缺乏包管理 ...

  3. java struts2入门学习实例－－使用struts进行验证

    一.为什么要进行验证? 验证几乎是注册登录的必须前提,验证的主要作用有两点: 1.安全性 2.对用户提供差异化服务. 二.如何验证? ActionSupport类中有一个validate()方法,这是 ...

  4. 【转】细说UI线程和Windows消息队列

    在Windows应用程序中,窗体是由一种称为“UI线程(User Interface Thread)”的特殊类型的线程创建的. 首先,UI线程是一种“线程”,所以它具有一个线程应该具有的所有特征,比如 ...

  5. 命令行修改MySQL数据库密码

    通过MySQL命令行来修改MySQL数据库的密码,下面就为您详细介绍如何使用MySQL命令行来修改密码. 格式:mysqladmin -u用户名 -p旧密码 password 新密码 1.给root加 ...

  6. 【MySQL】MySQL之MySQL5.7中文乱码

    自己的MySQL服务器不能添加中文,于是自己使用 show variables like 'character%'; 查看了当前的编码格式 我又通过以下方法将其设置为utf-8 SET charact ...

  7. SQL临时表

    临时表就是那些名称以井号 (#) 开头的表.如果当用户断开连接时没有除去临时表,SQL Server 将自动除去临时表.临时表不存储在当前数据库内,而是存储在系统数据库 tempdb 内.  临时表有 ...

  8. numpy的生成网格矩阵 meshgrid()

    numpy模块中的meshgrid函数用来生成网格矩阵,最简单的网格矩阵为二维矩阵 meshgrid函数可以接受 x1, x2,..., xn 等 n 个一维向量,生成 N-D 矩阵. 1 基本语法 ...

  9. root用户Linux 环境变量的配置解决(-bash: jps: command not found)有关问题

    可以写成:$JAVA_HOME/bin 3. source /root/.bash_profile 发现 jps 等命令运行正常了

  10. SharePoint 2013 创建Web Application

    今天继续SharePoint 2013 的探索之旅,之前几篇文章分析了SharePoint 2013的物理拓扑结构,安装,以及逻辑体系结构.在这篇文章中,我将继续Step By Step形式演示如何在 ...