第一次做的div(开心网div学习)

1 篇文章 0 订阅

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <link href="a.css" rel="stylesheet" type="text/css" />
 </head>

 <body>

  <script>  
    function addRow(e)
    {
          //获取对象相对位置
                   var   p   =   new   Object()  
                   p.x   =   e.offsetLeft  
                   p.y   =   e.offsetTop  
                   while   (e   =   e.offsetParent)  
                   {  
                       p.x   +=   e.offsetLeft  
                       p.y   +=   e.offsetTop  
                   }  
        //调整div弹出位置            
     var divs = document.getElementById("qq");
     divs.className="divcss";
     divs.id="newDiv";
     divs.style.top=p.y;
     divs.style.marginLeft=p.x - 315 ;
     divs.style.marginTop=0;
     document.body.appendChild(divs);
                }
                //点击复选框时出发
                function allselected(obj){
                    var c=document.getElementsByName("cb");
                    for(var i=0;i<c.length;i++){
                        c[i].checked=obj.checked;
                    }
                }
                //点击复选框后超级连接时出发
                function select(){
                    var a=document.getElementsByName("all");
                    if(a[0].checked)
                        a[0].checked="";
                    else
                        a[0].checked="true";
                   allselected(a[0]);
                }
   </script>
  <input type="text" name="ttt" value="" size="30"/>
  <input type="button" value="隐藏" οnclick="newDiv.style.display='none';">
  <input type="button" value="显示" οnclick="newDiv.style.display='block';">
  <input type="button" value="x坐标" οnclick="addRow(this)">
  
  <br>
  <input type="text" value="aaaaaaaaaaaaaaaaaaaaa" size="50"/>
  <div id="qq"
   style="position:absolute;background-color:#fffffe;width: 350px; height: 160px;border-width: 1px; border-color: #bed0eb; border-style: solid;font-Size: 12px;">
   <div style="width: 100%; height: 18; background-color: #aabbcc; margin: 0px; text-align: right;font-Size:14px;">
    <a href="#" οnclick="newDiv.style.display='none';">关闭</a>&nbsp;
   </div>
   <div style="background-color:#fffffe;margin: 0px; padding: 1px; font-Size: 12px; text-align: right;">
    <input  align="right" type="checkbox" name="all" οnclick="allselected(this)"/>
    <a href="#" οnclick="select();">全部</a>
   </div>
   <div id="qq1"
    style="background-color:#fffffe;font-Size: 12px; width: 325px; height: 90px; margin: 0px; padding: 1px; margin-left: 10px; margin-top: 2px; cursor: pointer; overflow: auto; background-position: 200px 50px;">
    <table width="100%">
     <tr>
      <td>
       <input type="checkbox" name="cb" />
       <label style="font-size: 12px;">中国</label>
      </td>
      <td>
       <input type="checkbox" name="cb" />
       <label style="font-size: 12px;">美国</label>
      </td>
      <td>
       <input type="checkbox" name="cb" />
       <label style="font-size: 12px;">英国</label>
      </td>
     </tr>
     <tr>
      <td>
       <input type="checkbox" name="cb" />
       <label style="font-size: 12px;">法国</label>
      </td>
      <td>
       <input type="checkbox" name="cb" />
       <label style="font-size: 12px;">日本</label>
      </td>
      <td>
       <input type="checkbox" name="cb" />
       <label style="font-size: 12px;">韩国</label>
      </td>
     </tr>
     <tr>
      <td>
       <input type="checkbox" name="cb" />
       <label style="font-size: 12px;">朝鲜</label>
      </td>
      <td>
       <input type="checkbox" name="cb" />
       <label style="font-size: 12px;">俄罗斯</label>
      </td>
      <td>
       <input type="checkbox" name="cb" />
       <label style="font-size: 12px;">中国</label>
      </td>
     </tr>
     <tr>
                        <td>
                            <input type="checkbox" name="cb" />
                            <label style="font-size: 12px;">朝鲜</label>
                        </td>
                        <td>
                            <input type="checkbox" name="cb" />
                            <label style="font-size: 12px;">俄罗斯</label>
                        </td>
                        <td>
                            <input type="checkbox" name="cb" />
                            <label style="font-size: 12px;">中国</label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="cb" />
                            <label style="font-size: 12px;">朝鲜</label>
                        </td>
                        <td>
                            <input type="checkbox" name="cb" />
                            <label style="font-size: 12px;">俄罗斯</label>
                        </td>
                        <td>
                            <input type="checkbox" name="cb" />
                            <label style="font-size: 12px;">中国</label>
                        </td>
                    </tr>
    </table>
   </div>
   <div style="text-align:right; margin-top:5px; margin-bottom: 5px;">
        <input type="button" value="确定"/>&nbsp;&nbsp;
   </div>
  </div>
  ------------------------------------------------------------------------------------------------------------------------------------------------------------
  
 </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值