CSS的定位

2017-06-07 18:35:00
admin
原创
296
<html>
 
     <head>
 
         <title>CSS的定位示例</title>

         <base href=http://www.ybao.org>
         <style type="text/css">  <!--
 
                   #container1{position:absolute;top:90px;}
 
                   /*定义container1 为绝对位置*/ 

                   #container2{position:absolute;top:90px;visibility:hidden;}
 
                   /*定义container2为绝对定位,初始可见度为hidden(隐藏)*/
 
                   p{font-size:12pt;}
 
              -->
 
         </style>
 
     </head>
 
     <body>
 
         <p style="font-family:行书体;font-size:15pt;color:#cc33cc"> 请选择一幅图片:</p>
 
         <div id="container1">
 
              <dd><img src="/data/upload/201711/f_5c8f77e38cd3ef1a95dad62cfb4a4e1d.gif" width="120" height="90">
 
                   <!--导入一张图片,标识符为container1--> 

                   <p style="font-family:行书体;color:#cc9933;font-size:12pt">名称:埃菲尔铁塔</p>
 
              </dd>
 
         </div>
 
         <div id="container2">
 
              <dd><img src="/data/upload/201711/f_6933de2e3c77f29e2e974a93130fe7d3.gif" width="120" height="90">
 
                   <!--导入另一种图片,标识符为container2-->
 
                   <p style="font-family:行书体;color:#3366cc;font-size:12pt">名称:泰姬陵</p>
 
              </dd>
 
         </div>
 
         <form name="myform"><!--定义两个按钮-->
 
              <p><input type="button" value="埃菲尔铁塔"
 
              onclick="container1.style.visibility='visible';
 
              container2.style.visibility='hidden'">
 
              <input type="button" value="泰姬陵";
 
              container1.style.visibility='hidden';
 
              onclick="container2.style.visibility='visible';
 
              container1.style.visibility='hidden'"></p>
 
              <!--定义鼠标单击事件图片1为不可见,图片2为可见--> 

         </form>
 
     </body>
 
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227