利用JavaScript和CSS制作浮动menu

时间:2010-03-26 17:41:32  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:单的方法为例,来说明其灵活性,同时也是抛砖引玉希望和广大网友共同切磋技术,制作出更好的家页(homepage).当我们浏览一个超过屏幕显示范围的一个页面时,为了回到菜单项,往往需要向上移动滚动条来完成,而使用浮动菜单则省去了这个麻烦,页面上的浮动菜单选项随着你向上或向下浏览页面而自动的移动。但并不是所有的页面都适合浮动菜单的使用,只有在菜单相对较短,在屏幕上可以完整...
  正文:随着INTERNET的高速发展,越来越多的人拥有了个人主页,但以往的静态HTML语言,已经不能满足人们的要求。JavaScript和多层模式表单(Cascading Style Sheet, Css)的出现使网页更加生动活泼,从而可以获得令人满意的效果。本文以javascript和CSS制作一种浮动菜单的方法为例,来说明其灵活性,同时也是抛砖引玉希望和广大网友共同切磋技术,制作出更好的家页(homepage).当我们浏览一个超过屏幕显示范围的一个页面时,为了回到菜单项,往往需要向上移动滚动条来完成,而使用浮动菜单则省去了这个麻烦,页面上的浮动菜单选项随着你向上或向下浏览页面而自动的移动。但并不是所有的页面都适合浮动菜单的使用,只有在菜单相对较短,在屏幕上可以完整显示;而正文相对较长,在屏幕上不能全部显示,需要拖动滚动条来完成,使用浮动菜单可以取得意想不到的结果。程序如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
A{ text-transform: none; text-decoration: none; color:black}
A:hover{ color:blue; text-decoration:underline;}
-->
</style>
<link href="http://www.webjx.com/templates/webjx/css/style.css" rel="stylesheet" type="text/css" />
<title>利用javascript 和CSS制作浮动menu</title>
</head>
<body bgcolor="#FFFFFF">
<table width="75%" border="0" align="right">
<tr>
<td><font face="楷体_GB2312" size="5" color="#990033">
<b><p align="center"></b></font>利用javascript
和CSS制作浮动menu</td>
</tr>
<tr>
<td><p align="center">网页教学网整理</td>
</tr>
<tr>
<td> 一份名为"HealthCast2010"的全球性医疗保健调查报告
显<p>示,在未来几年时间里互联网将给全球医疗保健工业带来巨大</p>
<p>的变化。调查对象为来自美国、加拿大、英国、澳大利亚、法</p>
<p>国、德国、芬兰、新西兰和西班牙的400位医疗保健工业的资深</p>
<p> ... ... </p>
<p>顾客数量将随在线药店不同而有所差别,但不取决于医疗机构</p>
<p>大小。这将对传统的名牌大医院带来很大的冲击。 </td>
</tr>
</table>
<div id="win0" style="position:absolute; Right:10px; top:10px; width:136px; height:227px; z-index:25">
<table width="99%" border="0">
<tr>
<td background="../9908pic/feature3.gif">
<p align="center">【<a href="../all/news.htm">最 新 消 息</a>】
</td>
</tr>
<tr>
<td background="../9908pic/help3.gif">
<p align="center">【<a href="telmedicine.html">远 程 医 疗</a>】
</td>
</tr>
<tr>
<td background="../9908pic/net3.gif">
<p align="center">【<a href="../all/new.htm">新 品 世 界</a>】
</td>
</tr>
<tr>
<td background="../9908pic/living3.gif">
<p align="center">【<a href="../all/syberspace-feature.htm"> 生 活 资 源</a>】
</td>
</tr>
<tr>
<td background="../9908pic/net3.gif">
<p align="center">【<a href="../all/netware.htm">查 询 技 巧</a>】
</td>
</tr>
<tr>
<td background="../9908pic/free3.gif">
<p align="center">【<a href="software/index.htm" target="_blank">软 件 下 载</a>】
</td>
</tr>
<tr>
<td background="../9908pic/lab3.gif">
<p align="center">【<a href="../lab/lab.htm">实 验 传 真</a>】
"利用JavaScript和CSS制作浮动menu"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13377.html


关键字:

关于《利用JavaScript和CSS制作浮动menu》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td