DHTML工具栏，Web点击更精彩(1)_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

DHTML工具栏，Web点击更精彩(1)

作者：闵涛文章来源：闵涛的学习笔记点击数：684 更新时间：2009/4/23 11:31:00

     原文出处：http://webreference.com/dhtml/column29/

  　　当阅读完本文后，你会发现实现这个目的要比想象的简单得多。

  熟悉简单的JavaScript图形翻转器。请参阅 JavaScript事件处理。
  了解JavaScript的鼠标事件。这些内容同样在 JavaScript事件处理中讨论过。
  熟悉Internet Explorer对系统颜色的使用。请参阅访问用户自定义系统色彩第1部分。
  　　现在，首先介绍概念并创建一个只有文本的工具栏。

  　　一个典型的只有文本的Windows应用程序工具栏看起来是这样的：

  　　

  　　当用户鼠标移到工具栏某一项上方时，这一项就变成了按钮，象这样：

  　　

  　　这个按钮效果是通过增加一个三维边界实现的。近看是这样的：

  　　

  　　有了 IE DHTML，我们就可以在一个Web页面中用CSS边界来复制这个行为。下表图示了我们可用的边界：

  　　

  　　如上图所示，当要把一个元素按钮化，我们可以对它应用 outset 边界。需要“按下的按钮”效果时，我们就可以使用 inset 边界。

  　　下面我们来试试看。

  　　在页面的格式表中，创建一个but类，将它应用在所有需要按钮化的元素上：

  　　 < STYLE TYPE="text/css">
  　　 .but {
  　　 border:2px buttonface solid;
  　　 padding-top:1;
  　　 height:20;
  　　 text-align:center;
  　　 cursor:default;
  　　 }
  　　 < /STYLE>

  　　 but类规定了工具栏的条目在其停顿状态下的样式。注意我们将这些条目的边界颜色定义为buttonface，将其样式定义为solid。基本上我们创建的都是无形边界，因此我们就可以将颜色buttonface应用到条目本身。无形的边界是必要的，因为边界是放置在条目边界线内部的。边界的状态决定了条目中文本的位置。如果没有初始边界而我们后来再增加一个的话，条目的文本就会被重新布置，产生一个拉伸的效果。


  下一页：简单的文本

[聊天工具]Gmail推出新功能：Web Clip__天极Yesky  [聊天工具]Web MSN你玩了吗__天极Yesky
[系统软件]Web Browser Express 概述  [系统软件]对Internet Explorer Web 控件做一点修改
[常用软件]小技巧：三步实现Web迅雷录制PPLive节目  [常用软件]用于Firefox的Google工具栏Beta 2发布 Firefox,Go…
[常用软件]天网防火墙：打开WEB和FTP服务  [VB.NET程序]使用VB.Net做一个配置web.config功能的WinForm(原…
[VB.NET程序]vb.net控件、web service简述  [VB.NET程序]使用vbscript脚本调用web服务

教程录入：mintao 责任编辑：mintao

上一篇教程： DHTML工具栏，Web点击更精彩(2)--简单的文本

下一篇教程：神奇的页面滚动控制（二）

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……