苹果系统下的Dock
苹果系统下最吸引睛球之一的就是它下面的Dock了:
在学习JS的过程中,试着将这个效果简单的实现了一下:JS练习Mac OS下的Dock。
代码实现:
准备工作
首先把所需要的图片准备好(一些苹果系统下面的图片和Dock的背景图):
然后把它们引入到HTML中做一下简单的布局:
<div class="dock"> <img src="icon/1.png">
苹果系统下最吸引睛球之一的就是它下面的Dock了:
在学习JS的过程中,试着将这个效果简单的实现了一下:JS练习Mac OS下的Dock。
首先把所需要的图片准备好(一些苹果系统下面的图片和Dock的背景图):
然后把它们引入到HTML中做一下简单的布局:
<div class="dock"> <img src="icon/1.png">
这个小插件只是用来练习面向对象编程的,只是很普通Tab面板的切换而已,效果请点击:JS练习:OOP版Tab.
在HTML中,我们把列表项和内容项分开来,列表项是一个ul
,内容是一个DIV
里面套了若干个DIV
:…
利用CSS3的动画来改变z-index的值,先来看一下效果,愤怒的小鸟,叽叽啾~~ :CSS3动画:z-index
HTML中,我们用几层DIV来模仿障碍物,然后把小鸟的图片也引入:
<img src="angrybird.png" class="mover"> <div class="ground ground-1"></div> <div
原因很简单,以前我在用line-height
的时候,只是简单的将他设置了一个值:例如line-height:18px
、line-height:2em
等等,我以前的相法是:line-height设置的值就是设置该元素每行所占的高度。但是这个“元素”内如果有其它元素呢?会不会被继承?如果会的话,那么继承的机制是怎么样的?设置为不同单位的值分别是什么意思?如果一个元素不设置固定的height
,那么这个元素的高度是由文字的大小还是由height或line-height来决定的呢?突然之间想到这么多的问题,真是发现自己什么都不知道了~~
假设有这样一段HTML:
<p>hello everyone
压缩版本:jquery.rainbowlist.min.js
开发者版本: jquery.rainbowlist.js
比如有这样一段HTML:
<ul class="rainbowList"> <li><a href="javascript:">:after伪类清除浮动</a></li> <li><a href="javascript:">嵌入flash</a></li> <li><a