• Watermark 当页面滚动时不会移动的背景图片。 html head style body { background-attachment: fixed; background-image: url(/i/eg_bulboff.gif); background-repeat: no-repeat; } /style /head body p请滚动页面,看看会发生什么。/p br /br /br /br /br /br /br / p请滚动页面,看看会发生什么。/p br /br /br /br /br /br /br / p请滚动页面,看看会发生什么。/p br /br /br /br /br /br /br / p请滚动页面,看看会发生什么。/p br /br /br /br /br /br /br / p请滚动页面,看看会发生什么。/p br /br /br /br /br /br /br / p请滚动页面,看看...

  • Filters on Images

    2019-10-15 14:55:36

    Filters on Images filter 属性也可以应用于图像,这里有一些已应用了 filter 属性的图像例子。 html head style div { width:160px; height:120px; } /style /head body Alpha: div style=filter:alpha(Opacity=20) img src=/i/eg_landscape.jpg width=160 height=120 / /div Gray: div style=filter:gray() img src=/i/eg_landscape.jpg width=160 height=120 / /div Invert: div style=filter:invert() img src=/i/eg_landscape.jpg width=160 height=120 / /div Xray: div style=filter:xray() img src=/i/eg_landscape.jpg width=160 height=120 / /div Mask: div style=position:absolute;left:10;top:610; im...

  • Filters 使用 filter 属性来改变标题的样式。 html head style h2 { width:100%; } /style /head body h2 style=filter:glow()发光/h2 h2 style=filter:blur()模糊/h2 h2 style=filter:fliph()Flip H/h2 h2 style=filter:flipv()Flip V/h2 h2 style=filter:shadow()阴影/h2 h2 style=filter:dropshadow()阴影/h2 h2 style=filter:wave(Strength=2)波浪/h2 p注释:如果元素的 width 属性没有设置,那么滤镜不会起作用。/p /body /html 发光 模糊 Flip H Flip V 阴影 阴影 波浪 注释:如果元素的 width 属性没有设置,那么滤镜不会起作用。...

  • Cursors 通过 CSS 来改变鼠标指针的样式。 html body p请把鼠标移动到单词上,这样会看到鼠标指针的变化:/p span style=cursor: autoAuto/spanbr / span style=cursor: crosshairCrosshair/spanbr / span style=cursor: defaultDefault/spanbr / span style=cursor: pointerPointer/spanbr / span style=cursor: handHand/spanbr / span style=cursor: moveMove/spanbr / span style=cursor: e-resizee-resize/spanbr / span style=cursor: ne-resizene-resize/spanbr / span style=cursor: nw-resizenw-resize/spanbr / span style=cursor: n-resizen-resize/spanbr / span style=cursor: se-resizese-re...

  • Z-index 请看一下,元素的 Z-index 次序已经改变了。 html head style img.x { position:absolute; left:0px; top:0px; z-index:1; } /style /head body h1这是一个标题/h1 img class=x src=/i/eg_bulbon.gif / p默认 z-index 是 0。Z-index 1 有更高的优先级。/p /body /html...

  • Z-index Z-index 可用于把一个元素放置于另一个元素之后,通过使用 Z-index 次序。 html head style img.x { position:absolute; left:0px; top:0px; z-index:-1; } /style /head body h1这是一个标题/h1 img class=x src=/i/eg_bulbon.gif / p默认 z-index 是 0。Z-index -1 有更低的优先级。/p /body /html 这是一个标题 默认 z-index 是 0。Z-index -1 有更低的优先级。...

  • Visibility 如何使某个元素不可见。你希望此元素显示还是不显示? html head style h1.one { visibility:visible; } h1.two { visibility:hidden; } /style /head body h1 class=one标题 一/h1 h1 class=two标题 二/h1 p标题二在哪儿?/p /body /html 标题 一 标题二在哪儿?...

  • position:absolute 如何使用一个绝对值来定义一个元素。 html head style h1.x { position:absolute; left:100px; top:150px; } /style /head body h1 class=x这是一个标题/h1 p通过绝对定位,可以把元素放置页面的任何位置。/p p这个标题的 LEFT 位置距离页面左侧 100 像素。TOP 位置距离页面顶端 150 个像素。/p /body /html 通过绝对定位,可以把元素放置页面的任何位置。 这个标题的 LEFT 位置距离页面左侧 100 像素。TOP 位置距离页面顶端 150 个像素。 这是一个标题...

  • position:relative 如何相对其正常位置来定位所有的标题。 html head style h1 { position:relative; left:40px; } /style /head body h1标题 A/h1 p这是段落。这是段落。这是段落。这是段落。这是段落。/p h1标题 B/h1 p这是段落。这是段落。这是段落。这是段落。这是段落。/p h1标题 C/h1 p这是段落。这是段落。这是段落。这是段落。这是段落。/p h1标题 D/h1 p这是段落。这是段落。这是段落。这是段落。这是段落。/p /body /html 标题 A 这是段落。这是段落。这是段落。这是段落。这是...

  • position:relative

    2019-10-15 14:46:00

    position:relative html head style h1.ex1 { position:relative; left:20px; } h1.ex2 { position:relative; left:-20px; } /style /head body h1Normal Heading/h1 h1 class=ex1Heading +20/h1 h1 class=ex2Heading -20/h1 p相对定位相对于元素的正常位置对其进行移动。/p pleft:20 给元素的 LEFT 位置增加 20 像素。/p pleft:-20 从元素的 LEFT 位置减去 20 像素。/p /body /html Normal Heading Heading +20 Heading -20 相对定位相对于元素的正常位置对其进行移动。 left:20 给元素的 LEFT 位置增加 20 像素。 left:-20 从元素的 LEFT 位置减去 20 像素...

  • DHTML CSS Positioning (CSS-P)

    2019-10-15 14:44:11

    CSS 用于为 HTML 元素添加样式。 实例 注释:大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+! position:relative 如何相对于元素的正常位置来定位这个元素。 position:relative 如何相对其正常位置来定位所有的标题。 position:absolute 如何使用一个绝对值来定义一个元素。 您可以在页面下方找到更多的例子。 哪些属性可与 CSS-P 一同使用? 首先,此元素必须指定 position 属性(relative 或 absolute)。 然后,我就可以设置下列 CSS-P 属性了: left - 元素的左侧位置 top...

  • DHTML 简介

    2019-10-15 14:43:19

    您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML CSS JavaScript 如果您希望首先学习这些项目,请在我们的首页访问这些教程。 DHTML 不是 W3C 标准 DHTML 指动态 HTML(Dynamic HTML)。 DHTML 不是由万维网联盟(W3C)规定的标准。DHTML 是一个营销术语 - 被网景公司(Netscape)和微软公司用来描述 4.x 代浏览器应当支持的新技术。 DHTML 是一种用来创建动态站点的技术组合物。 对大多数人来说,DHTML 意味着 HTML 4.0、样式表以及 JavaScrip...

  • DHTML 教程

    2019-10-15 14:42:39

    DHTML 是一种使 HTML 页面具有动态特性的艺术。 DHTML 是一种创建动态和交互 WEB 站点的技术集。 对大多数人来说,DHTML 意味着 HTML、样式表和 JavaScript 的组合。 开始学习 DHTML! DHTML 参考手册 在 W3School,你能找到所有 DOM 对象的完整 DHTML DOM 参考手册,以及它们的属性和方法。 HTML DOM 参考手册 DHTML 实例 学习 100 个实例!使用我们的编辑器,你可以编辑源代码,单击 test 按钮来查看结果。 DHTML 实例 HTML DOM 实例...

113条记录

学习推荐

  • JavaScript
  • HTML DOM
  • jQuery
  • AngularJS
  • AngularJS2
  • Vue.js
  • React
  • TypeScript
  • jQuery UI
  • jQuery EasyUI
  • Node.js
  • AJAX
  • JSON
  • Highcharts
  • Bootstrap
  • Google地图
  • 百度地图
  • DHTML
  • E4X
  • WMLScript