WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

DHTML学习(一)

更新时间:2021-01-28 13:30 作者:45IT收集点击:

  概述

  DHTML这个名字也许你不会陌生吧,那么DHTML到底是什么?它能完成哪些工作呢?

  DHTML(动态超文本语言)并不是一种结构严谨的编程语言,它只是作为浏览器自带的功能,实际上只是一种概念,它并不属于一种专门技术。DHTML运用HTML、样式表(Cascading Style Sheets)和描述语言(js,c...)赋予网页动态交互的特征。Cascading Style Sheets (CSS) 是 DHTML 的基础。 CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning (CSS-P) 是 CSS 的一个扩展, 它可用来控制任何东西在网页上或是说在窗口中的位置。 

  因为IE4.0和Netscape4.0所宣称的DHTML标准并不完全一致,这给我们学习 DHTML带来相当困难。以下所讲的内容均已考虑IE和NS的兼容性,所列举的实例在IE及NS下均能运行,目的是方便大家学习DHTML之用,如有问题请与我们联系.

  DHTML学习的具体内容将包含以下及部分,你可根据自己的情况有选择地阅读:

  第1节. 介绍如何定义一个 DIV tag(layer)或说是层次以及如何用 CCS来给出它的性质;
  第2节. 介绍如何使你编写的DHTML兼容IE和NS浏览器;
  第3节. 显示/隐藏;
  第4节. 元素的移动与滑动;
  第5节. 键盘响应及鼠标控制;
  第6节. 用 Clip 来剪裁 Layer 的可视区;
  第7节. 叠套层次;

  第1节. 如何定义一个层次以及如何用 CCS来给出它的性质

  使用 DIV Tags

  所谓层次具体而言就是指一段在 DIV 中的 HTML。换言之,当你把文字, 图象, 或其他的html文本放在 DIV 中, 我们把它称作 "layer"或"层次"。

  使用 DIV 的方法跟使用其他 tag 的方法一样

  <DIV>
  This is a DIV tag

  </DIV>
  当我们把 CSS-P 用到 DIV 中去以后, 我么就可以严格设定它的位置. 首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 menu. 设定名字的目的是方便我们在程序中用 JavaScript 等脚本语言来控制它, 比如说移动它或改变它的一些性质等等。

  <DIV ID="menu">
  This is a menu

  </DIV>
  层次的名字是随意取的, 可以是任何英文字母和数字, 但第一个必须是字母,当然一个好的程序员都会尽可能给层次取一个与其内容相符的名字,目的是方便阅读。把 CSS-P 应用到 DIV 的方法有以下两种:


  1.Inline CSS:
  Inline 是最常用的方法。 

  <DIV ID="menu" STYLE="put styles here">
  This is a menu

  </DIV>
  2.External STYLE tag:
  请注意在 External 方法里, ID 和 DIV 的关系。

  <STYLE TYPE="text/css">
  <!--
  #menustyle {put styles here}
  -->
  </STYLE>

  <DIV ID="menustyle">
  This is a menu

  </DIV>
  CSS 性质:
  以下列出 NS4 和 IE4 都通用的性质,这些性质符合由 W3C 给出的标准。

  position 
  决定 DIV tag 是如何放置的。 "relative" 意思是DIV的位置是相对于其他 tag 的。而"absolute" 是说 DIV tag 的位置是绝对位置即相对于它所在的窗口. 

  left 
  相对于窗口左边的位置 (pixels)

  top 
  相对于窗口上边的位置 (pixels) 

  width 
  DIV tag 的宽度。 

  height 
  DIV tag 的高度。 

  clip 
  给出 layer 的 clipping (可见的) 部分. Clip 可使得 DIV 显示为一个可以定义的很准确的方块。 你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。

  clip:rect(top,right,bottom,left);

  visibility 
  隐蔽或展现DIV 。参数有 "visible", "hidden", "inherit". 

  z-index 
  DIV tag 的立体位置。 值越大 DIV 的位置越高。 

  background-color 
  DIV 背景的颜色。 

  layer-background-color 
  Netscape 的 DIV 背景颜色. 

  background-image 
  DIV 的背景图象 

  layer-background-image 
  Netscape 的 DIV 的背景图象。 

  CSS 的语法是用冒号来分开性质和它的值, 用半分号来分开性质,以下给出几个实例: 

  position: absolute;
  left: 50px;
  top: 100px;
  width: 200px;
  height: 100px;
  clip: rect(0,200,100,0);
  visiblity: visible;
  z-index: 1;
  background-color:#FF0000;
  layer-background-color:#FF0000;
  background-image:URL(filename.gif);
  layer-background-image:URL(filename.gif);
  Inline Example:

  <DIV ID="divname" STYLE="<SPAN CLASS="red">position: absolute; left: 50px; 
  top: 100px; width: 200px; height: 100px; 
  clip: rect(0,200,100,0); 
  visiblity: visible; z-index: 1;
  background-color:#FF0000; 
  layer-background-color:#FF0000";</SPAN>">
  </DIV>

  External Example:
  <STYLE TYPE="text/css">
  <!--
  #divname {<SPAN CLASS="red">position: absolute; left: 50px; top: 100px; 
  width: 200px; height: 100px; 
  clip:rect(0,200,100,0); 
  visiblity: visible; z-index: 1;
  background-color:#FF0000; 
  layer-background-color:#FF0000";</SPAN>}
  -->
  </STYLE>

  <DIV ID="divname">
  </DIV>

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容