css3 垂直风琴怎么全部展开

html-css033

css3 垂直风琴怎么全部展开,第1张

实现垂直居中，基本上都是给父元素加相对定位，给自己加绝对定位，然后top:50%和 left:50%，然后元素再向上移动自身一半的高度，向左移动自身一半的宽度，这样一来就可以实现元素的水平居中和垂直居中。

这样就是一个展开收缩的效果了

<body>

<div id="div1">

<ul>

<li></li>

</ul>

</div>

<script>

var oDiv = document.getElementById('div1')

var oUl = oDiv.getElementsByTagName('ul')[0]

var Off = true

oDiv.onclick = function(){

if(Off){

oUl.style.display = "block"

Off = false

}else{

oUl.style.display = "none"

Off = true

}

}

</script>

一、X:nth-child(n) li:nth-child(3) { color: red}接下来的几个伪类选择器使用上非常类似，功能也比较接近。 :nth-child(n)，用于匹配索引值为n的子元素。索引值从1开始。 X:nth-child()用法实际上有三种变化，demo的用法是最简单的，X:nth-child()更强大的用处在于奇偶匹配，明河不展开讲，有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X:nth-last-child(n) li:nth-last-child(2) { color: red}:nth-child(n)，是从第一个开始算索引，而X:nth-last-child(n)是从最后一个开始算索引。