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

2016-01-29 12:04 12 1 收藏

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

【 tulaoshi.com - Html 】

动态的网页技术(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

来源:http://www.tulaoshi.com/n/20160129/1484523.html

延伸阅读
全尺寸背景在网页设计中已经越来越受欢迎,几年来,这一趋势的另一个变化是模糊的背景图像。 最近似乎有更多的模糊背景设计雨后春笋般冒出来,在使用某种类型的模糊图像的大背景下或者一个全尺寸的背景,不仅让整个网站下显得非常的人性化,烘托出网站所要给用户的氛围,也能更够突出产品或者人物本身特质,在配合新的CSS技术的情况下 更能到给...
标签: Web开发
“Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多js版本的介绍。不过都下载一个lightbox的js小则几十K,大则上百K。如果你只是需要一个类似Lightbox的效果,这种百分之百纯CSS制造,不含js的办法倒是可以试试。 以下是引用片段: !DOCTYPE html PUBLIC "-//...
标签: Web开发
CSS sprites 是网站速度的优化很重要的一环,但也有其对性能的不利之处。 Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到: CSS sprites 的最大问题是内存占用。非精确构造的 sprite 图片会占用意想不到的内存空间。以 WHIT TV 网站为例,这里是一张 sprite 图片,1299x15,000 的png,已经经过很好的压缩,实际...
很多人说设计是力求细节的,在网页设计里表达出的细节就是图标。图标在一个设计里带来了额外的注解并且使设计里的对象和元素引起用户的注意。 以下介绍的是一个用图标描述的最优方法。当使用图标时,图标的描述包含了一系列的隐喻。这也是在网站导航广泛使用图标和一系列图标组的原因。 隐喻 : 图标是文字的隐喻,也让人很好地知道隐喻,...
如题,设计,靠的就是细致还有与生俱来的审美能力,加之不屈不挠的耐心和沉着。以下是笔者关于衬线一些粗浅的共总结,拿出来供读者分享指正。 这是一套关于Button的实现,如果对HTML有了解的话,应该知道active和hover伪类,并且在网页体现中,他们也起到了很大的作用,以至于牵扯到现在就是设计上也不仅仅只是一个button样式那么简单,还要考...

经验教程

429

收藏

48
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部