<!--
Title:图片的定位
Description:1、图片的定位 2、运用javascript实现图片的隐藏和显示
@Copyright:
@Company:
@autor:firefly
@version:1.0
@time:2012.12.18
-->
<head>
<title>定位属性</title>
<style type="text/css">
#container1{POSITION: absolute; TOP: 100px}
/*绝对定位，是相对于整个窗口的定位，距离这个窗口最上面的距离是100个像素*/
#container2{visibility:hidden;position:absolute;top:100px}
/*--visibility指的是可见性，hidden隐藏*/
p{font-size:12pt}
</style>
<head>
<body>
<p style="font-size:15pt;color:#cc33cc;font-family:行书体">请选择一幅图片：</p>
<div id="container1">
<img height="280" src="images/1.jpg" width="185"/>
<p style="font-size:12pt;color:red;font-family:行书体">名称：花1</p>
</div>
<div id="container2">
<img height="280" src="images/2.jpg" width="185"/>
<p style="font-size:12pt;color:blue;font-family:行书体">名称：花2</p>
</div>
<form name="myform">
<p>
<input οnclick="container2.style.visibility='hidden'; container1.style.visibility='visible'" type="button" value="海洋">
<!--container2.style.visiblity='hidden'是javascript代码。在onclick中""号中用运用单引号来引-->
<input οnclick="container2.style.visibility='visible'; container1.style.visibility='hidden'" type="button" value="大漠">
</p>
</form>
</body>
</html>
3034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
