繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 网页中多层效果的灵活使用
- HTML/XHTML教程
- 一些不太常用的XHTML标签用法以及实例
- 网页中图片的设置涉及的三个问题
- 商业HTML邮件的制作建议
- HTML Marquee 字符片段滚动
- DOCTYPE 文档类型声明(网页爱好者必看)
- 纯HTML标签你熟悉多少?
- HTML元素的ID和Name属性的区别
- HTML meta的大作用
- HTML标签tbody的用法与说明
- HTML 特殊字符转换表
- HTML基础 HTML的组成结构
- HTML基础之HTML内容细则
- Shtml 精简教程
- 浅谈html table 标签
- html Frame、Iframe、Frameset 的区别
- HTML 网页页面切换的各种变换效果
- HTML的10个表格相关标记
- 让IE8启动IE7兼容模式的代码
- HTML 结构化实现方法
- xhtml的块级标记小结
HTML/XHTML教程 中的 网页中多层效果的灵活使用
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 62 ::
收藏到网摘: n/a
该段代码功能：打开该网页文件之后，将在正常的网页之上，浮动另外一层网页内容，可用鼠标随意移动第二层网页在第一层上的位置，并且当屏幕滚动时，第二图层可始终保持同第一图层的相对位置，效果非常好。
适用场合：有了这段代码，你可以对很多原有的网页进行改造，使游览者更为方便，比如可用于留言簿，第一层放置留言内容，浮动的第二层放置留言表单，这样游览留言操作和观察留言内容可在同一页面完成，并且无论屏幕滚动到什么位置，留言表单始终出现在屏幕之上，这无疑是最方便的留言系统工作方式。再比如可做为一般网页的导航条，有很多人为了编制美观的页面而放弃使用分栏导航页面方式，而使用整个页面，这样的页面每进入到一个分栏目，都要重新调入整个页面。有了这项技术，可以在原完整的页面之上，浮动一层导航菜单，即方便了导航又保持了页面的完整。另外也可以在某些页面之上浮动一个特定的图像或其它页面内容，等等，总之，这种技术应用非常广泛。
代码说明：代码段一可放置在网页的文件头处，即段。代码段二为正常的网页内容，即第一层的代码内容。第三段为第二层网页的代码段，即浮动的网页内容。代码段四为必要的控制代码，可放置在网页的最后处。灵活使用：下面的代码是完整的网页文件代码，把代码段二和代码段三换成你自己所需要的内容就可以了，但由于本网页文件涉及两个网页的制作过程，可能制作起来相当费力，并且很多网页制作工具不支持这一功能，用低级的网页工具存盘后将失去浮动效果，所以对于这样的网页最好的维护方法是分页维护，即分别编制两个完整的网页内容，之后按要求合并在一个网页文件内即可。这样向你介绍一种最可取的方法，众所周知，现在的网页技术可以实现在一个网页内调用其它网页的功能，即所谓的画中画功能，所以完全可以把代码二和代码三换成固定的调用其它网页的固定代码，之后只需要对这两个单独的页维护就可以了。具体可用下面的代码替换代码二和三：
ILAYER id="ad1" visibility="hidden" height="60">
</ILAYER>
<NOLAYER>
<IFRAME SRC="h1.htm" 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>
<td>111<a href="file:///G:/C/NEW/dhtml2.htm">1111</a></td>
<td>2222222</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
评论 (0) All
