网页中多层效果的灵活使用

北红柿

北红柿

2016-01-29 12:04

网页中多层效果的灵活使用,网页中多层效果的灵活使用
动态的网页技术(DHTM)已经非常普及,本文强力向大家推荐一段完整并且是经典的网页多层代码,适用于IE及NETSCAPE游览器,可实现完善的二层网页功能,具体代码请见面文后程序。

  该段代码功能:打开该网页文件之后,将在正常的网页之上,浮动另外一层网页内容,可用鼠标随意移动第二层网页在第一层上的位置,并且当屏幕滚动时,第二图层可始终保持同第一图层的相对位置,效果非常好。

  适用场合:有了这段代码,你可以对很多原有的网页进行改造,使游览者更为方便,比如可用于留言簿,第一层放置留言内容,浮动的第二层放置留言表单,这样游览留言操作和观察留言内容可在同一页面完成,并且无论屏幕滚动到什么位置,留言表单始终出现在屏幕之上,这无疑是最方便的留言系统工作方式。再比如可做为一般网页的导航条,有很多人为了编制美观的页面而放弃使用分栏导航页面方式,而使用整个页面,这样的页面每进入到一个分栏目,都要重新调入整个页面。有了这项技术,可以在原完整的页面之上,浮动一层导航菜单,即方便了导航又保持了页面的完整。另外也可以在某些页面之上浮动一个特定的图像或其它页面内容,等等,总之,这种技术应用非常广泛。

 代码说明:代码段一可放置在网页的文件头处,即段。代码段二为正常的网页内容,即第一层的代码内容。第三段为第二层网页的代码段,即浮动的网页内容。代码段四为必要的控制代码,可放置在网页的最后处。灵活使用:下面的代码是完整的网页文件代码,把代码段二和代码段三换成你自己所需要的内容就可以了,但由于本网页文件涉及两个网页的制作过程,可能制作起来相当费力,并且很多网页制作工具不支持这一功能,用低级的网页工具存盘后将失去浮动效果,所以对于这样的网页最好的维护方法是分页维护,即分别编制两个完整的网页内容,之后按要求合并在一个网页文件内即可。这样向你介绍一种最可取的方法,众所周知,现在的网页技术可以实现在一个网页内调用其它网页的功能,即所谓的画中画功能,所以完全可以把代码二和代码三换成固定的调用其它网页的固定代码,之后只需要对这两个单独的页维护就可以了。具体可用下面的代码替换代码二和三:

ILAYER id="ad1" visibility="hidden" height="60"
</ILAYER
<NOLAYER
<IFRAME src="http://img.jcwcn.com/attachment/portal" width="100%" height="60" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"
</IFRAME 其中SRC:用于指定打开的网页地址;
width:该表格占用的宽度;
height:该表格点用的高度;
marginwidth:网页内容在表格右侧的预留宽度;
marginheight:网页内容在表格顶部预留的高度;
hspace:网页右上角的横坐标;
vspace:网页右上角的纵坐标;
frameborder:是否显示边缘;
scrolling:是否出现滚动条;
具体使用时把h1.htm分别换成不同的网页文件名。
完成的网页文件代码如下: 
<html
<head
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
//代码段一
<style type="text/css"<!--
#floater {position: absolute;left: 500;top: 146;width: 125;visibility: visible;z-index: 10;}
--
</style
//代码段一结束
<title浮动层</title
</head
//代码段二(第一层内容,目前为空)
<body bgcolor="#FFFFFF"
<BR<BR<BR<BR<BR<BR<BR<BR<BR<BR<BR<BR<BR<BR
//代码段二结束
//代码段三(浮动层内容,目前为一简单表格)
<div ID="floater" style="left: 0px; top: 1px"
<table border="1" cellpadding="0" cellspacing="0"
bgcolor="#25A78D" bordercolordark="#00FFFF"
bordercolorlight="#000000"
<tr
<td111<a href="file:///G:/C/NEW/dhtml2.htm"1111</a</td
<td2222222</td
</tr
</table
</div
//代码段三结束 
//代码段四
<script LANGUAGE="JavaScript"
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE --
function heartBeat()&n
展开更多 50%)
分享

猜你喜欢

网页中多层效果的灵活使用

Html CSS布局 Div+CSS XHTML
网页中多层效果的灵活使用

网页布局中CSS的Class灵活应用

Web开发
网页布局中CSS的Class灵活应用

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页设计中透明效果的使用技巧心得

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页设计中透明效果的使用技巧心得

Visual C#中灵活使用DataView

编程语言 网络编程
Visual C#中灵活使用DataView

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ALT键、双击、右击在Word中的灵活使用

电脑入门
ALT键、双击、右击在Word中的灵活使用

网页设计中图片的使用技巧

网页设计 设计
网页设计中图片的使用技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

邮件发送简单例子-bean文件

邮件发送简单例子-bean文件

基于EJB技术的商务预订系统的开发

基于EJB技术的商务预订系统的开发
下拉加载更多内容 ↓