CSS收缩展开代码

html-css010

CSS收缩展开代码,第1张

要用javascript的<div><a href="javascript:vod(0)>"<B id="show_hide">收缩</B></a></div>

<ul id="content">

<li>收缩展开的内容一</li>

<li>收缩展开的内容二</li>

<li>收缩展开的内容三</li>

</ul>

<script>

document.getElementById('show_hide').onclick = function (){

var con = document.getElementById('content').style

if(this.innerHTML == '收缩'){

con.display= 'none'

this.innerHTML = '展开'

return false

} else {

con.display= ''

this.innerHTML = '收缩'

return false

}

}

</script>

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档,在body标签中添加一张图片,给这张图片设置css属性,添加“tansform”缩放属性,属性值为“scaleX(n)”,scaleX(n)指的是对宽度进行缩放,n指的是缩放比例:

2、将transform的属性值改为“scaleY(n)”,scaleY(n)指的是对高度进行缩放,n指的是缩放比例:

3、将transform的属性值改为“scale(n)”,scale(n)指的是对图片的宽度和高度同时进行等比例缩放,n指的是缩放比例: