上一篇成果如下。
![](http://upload-images.jianshu.io/upload_images/107041-07fd1ab31767bf69.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
实现的效果如下。
- 实现了一个横放的
<ul>
,也既iOS中的UITableView. - 实现了当鼠标移动到列表中的某一个
<li>
,也既iOS中的UITableViewCell,的时候,这个li标签的背景色会变成黑色。
页面很简单。但是仍存在一个小问题。眼尖的同学可以发现。当鼠标悬浮在li上的时候,背景色是变了没错,但是当背景色变的时候,我们发现,其实黑色的li的bottom是超过父控件的,也就是说,我们li的下边没和ul的下边对齐。
这是为什么呢?
我去check了一下我们的css文件。关于<li>
和<a>
的属性是这样的。
li { float: left; height: 44px; auto; } li a { display: block; text-decoration: none; color: white; text-align: center; padding: 14px 16px }
这里出问题的地方在于,我用了一个不是很优雅的方法来实现了text的居中。
我是怎么实现的呢?
这里,需要先解释一下在css中,padding的含义。先看一张iOS中的图。
![](http://upload-images.jianshu.io/upload_images/107041-5130b4491c58cd9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这是一个UILabel,我给他设置了左边距和上边距,熟悉iOS的同学都知道,这时候,这个label的长宽会自动和内容的长宽一致。
那么如果把css中的padding概念套在iOS中,那么可以说,在这种情况下,padding应该是0.
好,这时候我们把约束条件增加两个,我把这个label的宽和高都设置成固定值。
![](http://upload-images.jianshu.io/upload_images/107041-4db5d2d9e0dc5bab.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
现在这个label变成了什么样子呢?
他变成了这个样子
![](http://upload-images.jianshu.io/upload_images/107041-d57a9f6e653ba169.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这个时候,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查看了一下。发现
![](http://upload-images.jianshu.io/upload_images/107041-784d9c6232556b96.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
实际上<a>
的高度是46,超过了li的高度,这就是为什么hover状态下,当背景色变的时候,<a>
的bottom超过了li的bottom.
直觉告诉我,这种做法不太好。为什么,因为设置padding来实现垂直居中需要耗费大量的精力,还得你自己算字体大小和padding的关系。挺讨厌的。
于是我谷歌了一下。
![](http://upload-images.jianshu.io/upload_images/107041-c6e649220cceb2ac.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
点击去之后看到了这种做法。
![](http://upload-images.jianshu.io/upload_images/107041-06ab4db5cdfad957.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
原理就是把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; }
效果如下。
![](http://upload-images.jianshu.io/upload_images/107041-bb5b85f0f1c527d0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
搞定了。
进入正题,弹出菜单
今天想要实现的效果如下。
![](http://upload-images.jianshu.io/upload_images/107041-42d5a98bf75f066f.gif?imageMogr2/auto-orient/strip)
这个实现原理,类似于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 {
100px;
background: green;
}
div.dropBtn div.dropdown {
display: none;
}
div.dropBtn:hover div.dropdown {
display: inline;
}
div.dropdown {
position: relative;
}
ul.dropdownul {
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
完毕。