CSS如何给图片添加点击显示一个DIV盒子的效果

html-css012

CSS如何给图片添加点击显示一个DIV盒子的效果,第1张

首先定位div盒子的位子，然后display:none隐藏起来，然后图片调用onclik方法，即在img标签上写<img onclick="$('.div').show()">这样就可以了。

注意:$(".div")中间的.div就是你要出现的那个盒子，选择他的class，或者给他个id，表示选择TA。

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用css对div进行初始化，设置其内外边距都为0，并让div浮动向左。

3、在test.html文件内，创建一个div，并设置其class属性为xx，用于下面定义其css样式。

4、在test.html文件内，使用css设置类名为xx的div样式，设置其宽度、高度都为300px，背景颜色为红色。

5、在test.html文件内，在上面div的内部，再创建一个div，并设置其类名为ss。

6、在test.html文件内，使用css设置类名为ss的div样式，设置其高宽为100px，背景颜色为白色，上边距为100px，左边距为100px。