iOS开发如何学习前端(2)
上一篇成果如下。
实现的效果如下。
- 实现了一个横放的
<ul>，也既iOS中的UITableView. - 实现了当鼠标移动到列表中的某一个
<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)的更多相关文章
- iOS开发如何学习前端(1)
iOS开发如何学习前端(1) 我为何学前端?因为无聊. 概念 前端大概三大块. HTML CSS JavaScript 基本上每个概念在iOS中都有对应的.HTML请想象成只能拉Autolayout或 ...
- iOS开发如何学习前端
原文链接 前端大概三大块. HTML CSS JavaScript 基本上每个概念在iOS中都有对应的.HTML请想象成只能拉Autolayout或者设置Frame的ViewController.好比 ...
- 关于iOS开发的学习
关于iOS开发的学习,打个比方就像把汽车分解: 最底层的原料有塑料,钢铁 再用这些底层的东西造出来发动机,座椅 最后再加上写螺丝,胶水等,把汽车就拼起来了 iOS基本都是英文的资料, ...
- IOS开发---菜鸟学习之路--（二十二）-近期感想以及我的IOS学习之路
在不知不觉当中已经写了21篇内容 其实一开始是没有想些什么东西的 只是买了Air后 感觉用着挺舒服的,每天可以躺在床上,就一台笔记本,不用网线,不用电源,不用鼠标,不用键盘,干干脆脆的就一台笔记本. ...
- IOS开发---菜鸟学习之路--（一）
PS(废话): 看了那么多的博客文章,发现大部分人都一直在强调写技术博客的重要性,索性自己也耐着性子写写看吧. 写博客的重要性之类的说明,我就不做复制黏贴的工作了.因为自己没有写过多少,所也不清楚是不 ...
- iOS开发架构学习记录
闲着没事看了一些iOS开发架构的视频,简单的介绍了几个常用的架构设计,现将它记录如下,以后有时间再专门写这方面的内容,大家可以看看,感兴趣的就进一步学习. 一.架构基础 1.架构设计的目的 进一步解耦 ...
- IOS开发---菜鸟学习之路--（二十三）-直接利用键值对的方式来处理数据的感想
首先声明,本文纯粹只是做为本人个人新手的理解.文中的想法我知道肯定有很多地方是错的. 但是这就是我作为一个新人的使用方法,对于大牛非常欢迎指导,对于喷子请绕道而行. 由于这是早上跟我学长讨论数据处理时 ...
- IOS开发---菜鸟学习之路--（十七）-利用UITableView实现个人信息界面
首先来看下我们要实现的效果 需要实现这样的效果 然后我们开始动手吧. 首先选择添加一个新的ViewController 然后打开XIB文件,添加一UITableView 并将样式设置为分组 同时将按住 ...
- iOS开发RunLoop学习：一：RunLoop简单介绍
一:RunLoop的简单介绍 #import "ViewController.h" @interface ViewController () @end @implementatio ...
随机推荐
- According to TLD or attribute directive in tag file, attribute items does not accep t any expressions
According to TLD or attribute directive in tag file, attribute items does not accep t any expression ...
- 严重: The web application [] registered the JDBC driver [com.microsoft.sqlserver.jdbc.SQLServerDriver] but failed to unregister it when the web application was stopped. To prevent a memory leak, the JDB
idea项目启动报如下错误, 网上的方法都试了都没用, 一直没解决, 干掉项目, 重新从svn检出就好了...坑 啊 Root WebApplicationContext: initializatio ...
- linux线程学习
按照书上写的,不知道为什么有问题: //已解决,参考最新的blog,哈哈 #include <stdlib.h> #include <pthread.h> #include & ...
- 【基础】centos 6.X 下修改图形界面为命令行界面（单用户救援模式）
1. Linux开机引导的时候,按键盘上的e 就可以进入进入GRUB菜单界面. 2.在出现GRUB引导画面时(CentOS(2.6.18-274**)),按字母e键,进入GRUB编辑状态: 3.把光标 ...
- ROS学习（五）—— 编译ROS Package
提前准备: 记得事先source你的环境配置(setup)文件,在Ubuntu中的操作指令如下. source /opt/ros/kinetic/setup.bash 一.使用catkin_make ...
- mongodb的serverstatus
MongoDB shell version: 2.0.5 connecting to: test { "host" : "TENCENT64.site", -- ...
- Linux安装ElasticSearch与MongoDB分布式集群环境下数据同步
ElasticSearch有一个叫做river的插件式模块,可以将外部数据源中的数据导入elasticsearch并在上面建立索引.River在集群上是单例模式的,它被自动分配到一个节点上,当这个节点 ...
- SQLServer2008 全文检索摘记
最近在做全文搜索的内容,google了一下全文检索,发现了一些问题,现在总结如下: 全文索引和查询概念(摘自SQL 联机帮助)SQL Server 2008 为应用程序和用户提供了对 SQL Serv ...
- 从语句 char* p="test" 说起
我相信,使用C/C++多年的人对下面这个字符串赋值语句都不会陌生吧. char* p = "test"; 同时,我也相信,各位在使用这种语句后吃 ...
- 【转】AlphaGo与人工智能
AlphaGo与人工智能 在之前的一篇文章中我指出,自动驾驶所需要的“视觉识别能力”和“常识判断能力”,对于机器来说是非常困难的问题.至今没有任何机器可以在视觉方面达到驴的水平,更不要说和人比.可是最 ...