定位层

最新推荐文章于 2021-02-19 12:56:50 发布
最新推荐文章于 2021-02-19 12:56:50 发布
阅读量746 收藏
点赞数
文章标签： border class table jsp javascript iterator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxq1406spys/article/details/1935944
版权

.f1 {
 position: relative; clip:rect( )
 }

把层放于表格中，其<td class="f1"><div></div></td>

层运用:

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,net.gov.service.*,java.util.*,net.gov.link.*,java.text.SimpleDateFormat,net.gov.publicinfo.DealStrings" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<style type="text/css">
<!--

#Layer3 {
 position:absolute;
 width:200px;
 height:115px;
 z-index:1;
 left: 180px;
 top: 88px;
}
#Layer1 {
 position:absolute;
 width:200px;
 height:115px;
 z-index:1;
 left: 338px;
 top: 84px;
 visibility: hidden;
}
#Layer2 {
 position:absolute;
 width:66px;
 height:24px;
 z-index:4;
}
-->
</style>
<%int m=0;int newsid=0;ArrayList newsList;%>
<script language="javascript">
function ss(id,name)
{
document.getElementById("id1").style.visibility="inherit";
}
function dis_menu(id,name){
 //id.style.visibility="default";
 if("id1"==id){
   //alert(id.id+"1")
   document.getElementById("id2").style.visibility="hidden";
    document.getElementById("id3").style.visibility="hidden";
  document.getElementById("id1").style.visibility="inherit";
  document.getElementById("id7").style.visibility="inherit";
   document.getElementById("id1").style.top="254px";
   document.getElementById("id1").style.left="5px";
  document.getElementById("id6").style.visibility="inherit";
   document.getElementById("id8").style.visibility="inherit";
   var s =document.getElementById("id7");
 //alert(texe);
//alert(s.childNodes.length);
    while (s.childNodes.length > 0)
    {
     s.removeChild(s.childNodes[0]);
     
    } 
    var result1 = document.createElement("span");
     result1.style.textAlign = "left";   
     result1.style.fontFamily = "Arial, Verdana";
     result1.innerHTML ="<embed src='"+name+"' border='0' width='195' height='146' type='application/x-mplayer2'></embed>";
     //result.appendChild(result1);
     s.appendChild(result1);  
 //id.style.visibility="hidden";
    // document.getElementById(id2).style.display="";
 }
 
if("id2"==id){
   //alert(id.id+"1")
   document.getElementById("id2").style.visibility="inherit";
    document.getElementById("id3").style.visibility="hidden";
  document.getElementById("id1").style.visibility="hidden";
   document.getElementById("id2").style.top="254px";
   document.getElementById("id2").style.left="5px";
     document.getElementById("id7").style.visibility="inherit";
   document.getElementById("id8").style.visibility="inherit";

  document.getElementById("id6").style.visibility="inherit";
   var s =document.getElementById("id7");
 //alert(texe);
//alert(s.childNodes.length);
    while (s.childNodes.length > 0)
    {
     s.removeChild(s.childNodes[0]);
     
    } 
    var result1 = document.createElement("span");
     result1.style.textAlign = "left";   
     result1.style.fontFamily = "Arial, Verdana";
     result1.innerHTML ="<embed src='"+name+"' border='0' width='195' height='146' type='application/x-mplayer2'></embed>";
     //result.appendChild(result1);
     s.appendChild(result1);  
 //id.style.visibility="hidden";
    // document.getElementById(id2).style.display="";
 }
 if("id3"==id){
   //alert(id.id+"1")
   document.getElementById("id2").style.visibility="hidden";
    document.getElementById("id3").style.visibility="inherit";
  document.getElementById("id1").style.visibility="hidden";
   document.getElementById("id1").style.top="254px";
   document.getElementById("id1").style.left="5px";
    document.getElementById("id7").style.visibility="inherit";
   document.getElementById("id8").style.visibility="inherit";

 document.getElementById("id6").style.visibility="inherit";
   var s =document.getElementById("id7");
 //alert(texe);
//alert(s.childNodes.length);
    while (s.childNodes.length > 0)
    {
     s.removeChild(s.childNodes[0]);
     
    } 
    var result1 = document.createElement("span");
     result1.style.textAlign = "left";   
     result1.style.fontFamily = "Arial, Verdana";
     result1.innerHTML ="<embed src='"+name+"' border='0' width='195' height='146' type='application/x-mplayer2'></embed>";
     //result.appendChild(result1);
     s.appendChild(result1);  
 //id.style.visibility="hidden";
    // document.getElementById(id2).style.display="";
 }
 
 /*if("id2"==id){
     id.style.display="" ;
     document.getElementById(id3).style.display="";
 }
 if("id3"==id){
     id.style.display="" ;
     document.getElementById(id2).style.display="";
 }*/
 }
 function dis(){
  document.getElementById("id1").style.visibility="inherit";
   document.getElementById("id2").style.visibility="inherit";
   document.getElementById("id3").style.visibility="inherit";
      document.getElementById("id7").style.visibility="hidden";
   document.getElementById("id6").style.visibility="hidden";
   document.getElementById("id8").style.visibility="hidden";
    document.getElementById("id1").style.top="0px";
   document.getElementById("id1").style.left="5px";
    document.getElementById("id2").style.top="127px";
   document.getElementById("id2").style.left="5px";
    document.getElementById("id3").style.top="254px";
   document.getElementById("id3").style.left="5px";
 }
</script>
<link href="images/main.css" rel="stylesheet" type="text/css">
<jsp:useBean id="news" scope="page" class="net.gov.service.news"></jsp:useBean>
<jsp:useBean id="newsCtl" scope="page" class="net.gov.service.newsCtl"></jsp:useBean>
<jsp:useBean id="pkind" scope="page" class="net.gov.service.srcColumn"></jsp:useBean>
<jsp:useBean id="pkCtl" scope="page" class="net.gov.service.srckindCtl"></jsp:useBean>
<jsp:useBean id="vote" scope="page" class="net.gov.service.Vote"></jsp:useBean>
<jsp:useBean id="voteCtl" scope="page" class="net.gov.service.voteCtl"></jsp:useBean>
<jsp:useBean id="link" class="net.gov.link.Link" scope="page"/>
<jsp:useBean id="linkOpe" class="net.gov.link.linkCtl" scope="page"/>
<jsp:useBean id="linktype" class="net.gov.link.linkType" scope="page"/>
<jsp:useBean id="typeOpe" class="net.gov.link.lkTypeCtl" scope="page"/>
<body background="images/spzx-bg.gif">
 <table width="101%" height="392" border="0" cellpadding="0" cellspacing="0"  background="images/spzx-bg.gif">
  <tr>
    <td height="392" class="f1">
     <div id="id8" style="position:absolute; width:29px; height:26px; z-index:5; left: 270px; top: 260px; border:0; visibility: hidden;"><a href="#" οnclick="javascript:dis();"><font color="#FF0000">返回</font></a></div>
     <div id="id6" style="position:absolute;  width:300px; height:163px; visibility: hidden;left: 5px;" align="center"><table width="216" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/vidio1.jpg">
  <tr>
    <td height="180" align="center" class="f1"><div id="id7" style="position:absolute;  width:193px; height:120px; visibility: hidden; left: 11px; top: 28px;"><span  style="background:url(images/vidio1.jpg)">
      <embed src="UploadPath/2007-12-07/2007-12-07 20112147.avi" border="0" width="194" height="115" type="application/x-mplayer2"></embed>
    </span></div></td>
  </tr>
</table></td>
  </tr>
</table></div>
     <table width="90%" border="0">
       <tr>
         <td><div id="id1"  style="position:absolute; width:329px; height:54px; z-index:1; left: 5px; top: 0px; border:0">
             <table width="90%"  border="0" align="center" cellpadding="0" cellspacing="0">
               <tr>
                 <td colspan="2"><img src="images/web_59.jpg" width="323" height="29" alt="" /></td>
               </tr>
               <tr>
                 <td width="34%" align="center"><img src="images/web_63.jpg" width="102" height="73" alt="" /></td>
                 <td width="66%" height="90" valign="top"><% m=0;
   newsid=pkCtl.getKindname("与公仆对话");
     newsList=newsCtl.getNews(4,newsid);
    for(Iterator it=newsList.iterator();it.hasNext();){
       news=(news)it.next();
       int nid=news.getId();
      String title=news.getTitle();
    String filename=news.getFilename();
       if(title.length()>15){
        title=title.substring(0,15)+"...";
      }
      m++;
     %>
                     <table width="96%" height=14 border=0 align="center" cellpadding=0 cellspacing=0>
                       <tbody>
                         <tr>
                           <td class=hong align=center width="13"><img src="images/dotdb.gif" width="9" height="11" /></td>
                           <td height="24" align=left><a class=blk
                              href="#" οnclick="dis_menu('id1','UploadPath/<%=filename%>');"
                              ><%=title%></a></td>
                         </tr>
                       </tbody>
                     </table>
                   <%}
   if(m==0){
   %>
                     <table width="96%" height=14 border=0 align="center" cellpadding=0 cellspacing=0>
                       <tbody>
                         <tr>
                           <td class=hong align=center width="13">&nbsp;</td>
                           <td height="24" align=left class="copy18">暂无视频</td>
                         </tr>
                       </tbody>
                     </table>
                  <%}%>                 </td>
               </tr>
             </table>
         </div>
             <div id="id2" οnclick="javascript:dis_menu(id2);" style="position:absolute; width:329px; height:48px; z-index:2; left: 5px; top: 127px; border:0 ">
               <table width="90%"  border="0" align="center" cellpadding="0" cellspacing="0">
                 <tr>
                   <td colspan="2"><img src="images/web_68.jpg" width="323" height="27" alt="" /></td>
                 </tr>
                 <tr>
                   <td width="34%" align="center"><img src="images/web_72.jpg" width="102" height="73" alt="" /></td>
                   <td width="66%" height="90" valign="top"><%m=0;
   newsid=pkCtl.getKindname("与成功对话");
     newsList=newsCtl.getNews(4,newsid);
    for(Iterator it=newsList.iterator();it.hasNext();){
       news=(news)it.next();
       int nid=news.getId();
      String title=news.getTitle();
    String filename=news.getFilename();
       if(title.length()>15){
        title=title.substring(0,15)+"...";
      }
      m++;
     %>
                       <table width="96%" height=14 border=0 align="center" cellpadding=0 cellspacing=0>
                         <tbody>
                           <tr>
                             <td class=hong align=center width="13"><img src="images/dotdb.gif" width="9" height="11" /></td>
                             <td height="24" align=left><a class=blk
                              href="#" οnclick="dis_menu('id2','UploadPath/<%=filename%>');"
                              ><%=title%></a></td>
                           </tr>
                         </tbody>
                       </table>
                     <%}
   if(m==0){
   %>
                       <table width="96%" height=14 border=0 align="center" cellpadding=0 cellspacing=0>
                         <tbody>
                           <tr>
                             <td class=hong align=center width="13">&nbsp;</td>
                             <td height="24" align=left class="copy18">暂无视频</td>
                           </tr>
                         </tbody>
                       </table>
                   <%}%>                   </td>
                 </tr>
               </table>
             </div>
           <div id="id3" οnclick="javascript:dis_menu(id3);" style="position:absolute; width:329px; height:76px; z-index:3; left: 5px; top: 254px; border:0">
               <table width="90%"  border="0" align="center" cellpadding="0" cellspacing="0">
                 <tr>
                   <td colspan="2"><img src="images/web_75.jpg" width="323" height="27" alt="" /></td>
                 </tr>
                 <tr>
                   <td width="34%" align="center"><img src="images/web_79.jpg" width="102" height="73" alt="" /></td>
                   <td width="66%" height="90" valign="top"><%m=0;
   newsid=pkCtl.getKindname("与品牌对话");
     newsList=newsCtl.getNews(4,newsid);
    for(Iterator it=newsList.iterator();it.hasNext();){
       news=(news)it.next();
       int nid=news.getId();
      String title=news.getTitle();
    String filename=news.getFilename();
       if(title.length()>15){
        title=title.substring(0,15)+"...";
      }
      m++;
     %>
                       <table width="96%" height=14 border=0 align="center" cellpadding=0 cellspacing=0>
                         <tbody>
                           <tr>
                             <td class=hong align=center width="13"><img src="images/dotdb.gif" width="9" height="11" /></td>
                             <td height="24" align=left><a class=blk
                              href="#" οnclick="dis_menu('id3','UploadPath/<%=filename%>');"
                              ><%=title%></a></td>
                           </tr>
                         </tbody>
                       </table>
                     <%}
   if(m==0){
   %>
                       <table width="96%" height=14 border=0 align="center" cellpadding=0 cellspacing=0>
                         <tbody>
                           <tr>
                             <td class=hong align=center width="13">&nbsp;</td>
                             <td height="24" align=left class="copy18">暂无视频</td>
                           </tr>
                         </tbody>
                       </table>
                     <%}%></td>
                 </tr>
               </table>
           </div></td>
       </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
 

zxq1406spys
关注
深入理解CSS定位与层叠
09-24
它通常用于制作复杂的布局结构或覆盖层。 固定定位（position: fixed）是绝对定位的一个特例，它会使元素相对于浏览器窗口定位，这意味着元素固定在窗口的某个位置，不随页面滚动而移动。固定定位的元素同样脱离...
层模型的三种定位方式
追风者
06-03 392
一、绝对定位 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移...
CSS定位机制——层定位
One of thre_tigers的博客
01-11 897
像图像处理软件总的图层一样可以对每个layer能够精确定位操作，我们希望当前网页的元素能够像图层一样前后层叠在一起有一个叠加的效果，上面的层能够遮盖以下的层。这个时候用层定位。 操作方法： （1）通过设定position的值来确定参照物position：static，fixed，relative，absolute （2）再通过设置top，right，bottom，left，z-index（Z轴方...
层定位
qq_42627388的博客
07-05 1004
层定位 1.层定位：由于网页中存在层叠的样式，所以在进行照片以及文档叠加的时候，我们通过层定位的方式进行设计。采用position属性。 2.层定位的四种方式： （1）static静态定位：此方法是默认文档流的形式进行定位 （2）fix固定定位：此方法主要用于网页中两侧的广告，无论界面怎么拖拽，两侧的内容都不会发生改变。 （3）absolute绝对定位：此方法相对于父元素进行定位，在进行定位的时候，会寻找父元素中relative 以及absolute属性的父元素，若不存在以上两种属性的父元素，则会相对于bo
Web前端开发——CSS布局与定位之层定位
wq_ocean_的博客
02-06 1309
目录 1. 内容 2. 层定位概述 3.固定定位position:fix 3.1 案例1 3.2 案例2 4.相对定位position:relative 4.1 保留文档流的原位置 4.2 相对于直接父元素 5. 绝对定位position:absolute 5.1 不保留文档流的原位置 5.2 相对static定位以外的第一个父元素 5.2.1 一般情况 5.2.2 ...
CSS定位机制Ⅲ——层定位
banchi6453的博客
07-27 487
主要写关于层定位的相关知识 ㈠定位概述 ⑴像图像软件中的图层一样可以对每一个layer能够精确定位操作 ⑵层定位的position属性决定了当前的一个网页元素，可以叠加到另一个网页元素上面，那么我们把这个网页元素称为一层，那么外面的元素称为父层，里面嵌入的元素称为子层 ⑶position属性 （相对于谁定位） fixed 固定定位 relative 相对定位 ...
jquery实现的超出屏幕时把固定层变为定位层的代码
10-29
当它完全在视窗范围内时，又会回到定位层（absolute）的状态。这种动态改变定位方式的功能，为用户在浏览大量信息时提供了便利，让用户无需返回顶部即可进行筛选和排序。 接着，我们需要了解几个关键点，首先是`...
js中的如何定位固定层的位置
10-25
在JavaScript中，定位固定层的位置是一个常见的需求，特别是在创建响应式布局、弹窗插件或者悬浮导航栏等场景中。固定层通常是指那些在页面滚动时依然保持在屏幕特定位置的元素。本文将详细介绍如何使用JavaScript...
jquery浮动固定层导航描点上下滚动的浮动定位层
11-24
标题中的“jquery浮动固定层导航描点上下滚动的浮动定位层”是指在网页设计中，使用jQuery库实现的一种导航栏效果。这种效果使得导航栏在页面滚动时始终保持在屏幕顶部，提供持续的导航功能，同时可能包含有滚动描点...
网页图层定位
weixin_33692284的博客
05-25 269
层的随意定位的特性给网页设计者带来的很大的方便，但同时也带来了一定的麻烦。为什么这样说呢？ 　　大家都知道，为了让网页能够自动地适应用户设置的分辨率，在网页制作过程中人们采用了百分比的设置方式，从而页面的所有元素从新排版，保证原来的格式。但如果你在页面上使用了层，你会发现当浏览器大小改变时，层的位置却没有改变，结果它和其他的元素之间的配合出现了错位现象，页面变得杂乱无章了...
web前端学习笔记（五）—定位层
盖世小可爱的博客
02-19 192
定位层的概念： 1. 定位层是由html元素（标签）形成的一个特殊的box盒子。 2. 其重点在于“定位”，而html元素（标签）的定位方式由CSS来控制。通常情况下，html元素（标签）默认的定位方式叫做“静态定位”，存在于普通文档流中，而定位层则是指的那些修改了定位方式的box，即非静态定位的box。 3. 定位层的“定位”需要根据参照对象来实现定位的位置。 4. 定位层的主要作用是用来实现小范围内容元素的排版和定位。 定位属性 原理：完全脱离页面文档流，独立于立体层面的z轴之上。从立体
CSS层定位（相对定位，绝对定位，固定定位）
Mushan_vv的博客
05-15 2917
CSS 定位 (Positioning) 属性允许你对元素进行定位。 通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义： static 没有定位，元素出现在正常的流中top, bottom, left, right ， z-index无效 relative 相对于其直接父元素进行定位top,bottom,left,ri...
定位层(position, z-index)
wangtao的博客
01-16 2458
定位层(脱离了普通文档流) 1.定位层是由html元素(标签)形成的一个特殊的box盒子; 其重点在由"定位",而html元素(标签)的定位由css来控制， 通常情况下，html元素(标签)默认的定位方式叫作"静态定位"， 存在于普通文档流中，而定位层是指的那些修改了定位方式的box, 即非静态定位的box; 2.定位层的...
CSS定位机制-层定位
kenny.feng
04-14 894
层定位 概念：元素的位置重合，也没关系，即“可层叠” 本质：相对于谁定位，且先浮动起来，再定位 形式： （1）固定定位(position: fixed) （2）相对定位(position: relative) （3）绝对定位(position: absolute) position:static不属于“层定位”，这是默认的position值，属于“文档流定位”，即“文档流定位”...
web前端学习笔记（七）——定位层
齐在的专栏
08-30 2036
定位层的概念： 1. 定位层是由html元素（标签）形成的一个特殊的box盒子。 2. 其重点在于“定位”，而html元素（标签）的定位方式由CSS来控制。通常情况下，html元素（标签）默认的定位方式叫做“静态定位”，存在于普通文档流中，而定位层则是指的那些修改了定位方式的box，即非静态定位的box。 3. 定位层的“定位”需要根据参照对象来实现定位的位置。 4. 定位层的主要作用是用...
层定位layer
weixin_30315723的博客
08-21 262
一、如何实现层定位position属性 二、相对定位relative 三、绝对定位absolute 四、元素堆叠z-index 一、实现层定位的方法 position属性实现层定位，把元素分出层次形成一种嵌套关系，而嵌套在里面的元素则称之为子层，外面包裹的元素称为父层。 position属性属性规定定位的方式(相对于谁进行定位)，position的取值有以下四个： ...
定位 , 层级
guodejie的博客
05-22 1060
定位：relative,absolute,fixed: Relative,Absolute,Fixed都是定位用的。relative不会脱离文档流，而fixed和absolute会脱离文档流，当用left,right,top,bottom移动到其它位置，把原来位置让出来，下方位置的会填补它原来的空缺。 Relative定位是相对于自己原先的位置。 Fixed定位相对于body。 单独的ab...
层定位原理
weixin_30873847的博客
07-11 109
一、概述 本文以标签“<div></div>”为例进行讲解，部分内容同样适用于部分其它块(block)标签元素。 本文中的范例通过测试的浏览器为IE6、IE7、Firefox2。 我们在平时的网页制作中，已经或多或少的接触过CSS样式表中的“position(位置)”属性，其实这基本算是定位根源所在了。当然了，这并不是全部，如果再加...
CSS-定位层
tz_gx的专栏
11-17 343
定位层由html元素形成的特殊的box盒子 定位层的定位需要根据参照对象来实现定位的位置 定位层的主要作用是用来实现小范围内容元素的排版和定位 static     静态定位    无定位，html元素出现在默认文档流中，是默认的文档方式 absolute   绝对定位    相对于非static定位的第一个父元素进行定位 relative   相对定位    相对自身在默认文档流中的正
电离层影响与GPS单点定位误差改正研究
"这篇硕士学位论文主要探讨了GPS单点定位技术，分析了电离层、对流层等误差源的影响及改正方法，并通过编程实现不同数据类型下的定位程序，进行了大量计算验证，得出不同观测时间的定位精度结果。" GPS单点定位是...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值