加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > DHTML

DHTML CSS Positioning (CSS-P)

DHTML 2023-08-04 20:44:23小码哥的IT人生shichen

DHTML CSS Positioning (CSS-P)

CSS 用于为 HTML 元素添加样式。

实例

注释：大多数 DHTML 实例需要IE 4.0+、Netscape 7+ 或者 Opera 7+！

完整实例【position:relative】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如何相对于元素的正常位置来定位这个元素。

完整实例【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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如何使用一个绝对值来定义一个元素。

您可以在页面下方找到更多的例子。

哪些属性可与 CSS-P 一同使用？

首先，此元素必须指定 position 属性（relative 或 absolute）。

然后，我就可以设置下列 CSS-P 属性了：

  1. left - 元素的左侧位置
  2. top - 元素的顶端位置
  3. visibility - 指定元素应当可见还是隐藏
  4. z-index - 元素的堆叠次序
  5. clip - 元素裁剪
  6. overflow - 如何处理溢出的内容

Position

CSS 的 position 属性允许您控制文档中某个元素的定位。

position:relative

position:relative 属性可向对于一个元素的当前位置来定位此元素。

下面的例子把这个 div 元素定位到距离其正常位置右方 10 像素的位置：

div
{
position:relative;
left:10;
}

position:absolute

position:absolute 属性根据距离窗口的 margin 来定位一个元素。

下面的例子把这个 div 元素定位到距离其包含块左侧 margin 的右方 10 像素的位置：

div
{
position:absolute;
left:10;
}

Visibility

visibility 属性可决定一个元素是否可见。

visibility:visible

visibility:visible 属性可使元素可见。

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden 属性可使元素不可见。

h1
{
visibility:hidden;
}

Z-index

z-index 属性用于把一个元素放置于另一个元素之后。z-index 的默认值是 0。值越高，其优先权也越高。z-index: -1 更低的优先权。

h1
{
z-index:1;
}
h2
{
z-index:2;
}

在上面的例子中，如果 h1 和 h2 彼此叠加，则 h2 元素会位于 h1 的上面。

Filters

filter 属性允许您向文本和图像添加更多的样式效果。

h1
{
width:100%;
filter:glow;
}

注释：若需要使用 filter 属性，请始终指定元素的宽度。

上面的例子产生下面的输出：

Header

不同的滤镜

注释：除非 background-color 属性被设置为 transparent，否则某些 Filter 属性将无法工作！

属性 参数 描述 例子
alpha
  1. opacity
  2. finishopacity
  3. style
  4. startx
  5. starty
  6. finishx
  7. finishy
 允许您设置元素的透明度 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0,
starty=0,
finishx=140,
finishy=270)
blur
  1. add
  2. direction
  3. strength
 使元素模糊 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color 使指定的颜色透明 
filter:chroma(
color=#ff0000)
fliph none 水平反转元素 filter:fliph;
flipv none 垂直反转元素 filter:flipv;
glow
  1. color
  2. strength
 使元素发光 
filter:glow(
color=#ff0000,
strength=5);
gray none 用黑白色来呈现元素 filter:gray;
invert none 用反转的颜色和亮度值来呈现元素 filter:invert;
mask color 呈现带有指定背景色和透明前景色的元素 
filter:mask(
color=#ff0000);
shadow
  1. color
  2. direction
 呈现带有阴影的元素 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  1. color
  2. offx
  3. offy
  4. positive
 呈现带有阴影的元素 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  1. add
  2. freq
  3. lightstrength
  4. phase
  5. strength
 把元素呈现为波浪状 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none 使用黑白色显示带有反转色和亮度值的元素 filter:xray;

Background

background 属性允许您选用自己的背景。

background-attachment:scroll

背景随页面滚动。

background-attachment:fixed

背景不会随页面滚动。

更多实例

完整实例【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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如何使某个元素不可见。你希望此元素显示还是不显示？

完整实例【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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请看一下，元素的 Z-index 次序已经改变了。

完整实例【Cursors】：

<html>
<body>
<p>请把鼠标移动到单词上，这样会看到鼠标指针的变化：</p>
<span style="cursor: auto">Auto</span><br />
<span style="cursor: crosshair">Crosshair</span><br />
<span style="cursor: default">Default</span><br />
<span style="cursor: pointer">Pointer</span><br />
<span style="cursor: hand">Hand</span><br />
<span style="cursor: move">Move</span><br />
<span style="cursor: e-resize">e-resize</span><br />
<span style="cursor: ne-resize">ne-resize</span><br />
<span style="cursor: nw-resize">nw-resize</span><br />
<span style="cursor: n-resize">n-resize</span><br />
<span style="cursor: se-resize">se-resize</span><br />
<span style="cursor: sw-resize">sw-resize</span><br />
<span style="cursor: s-resize">s-resize</span><br />
<span style="cursor: w-resize">w-resize</span><br />
<span style="cursor: text">text</span><br />
<span style="cursor: wait">wait</span><br />
<span style="cursor: help">help</span><br />
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

通过 CSS 来改变鼠标指针的样式。

完整实例【Filters】：

<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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

使用 filter 属性来改变标题的样式。

完整实例【Filters on Images】：

<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;">
<img src="/i/eg_landscape.jpg" width="160" height="120" />
</div>
<div style="position: absolute; left: 10; top: 610; filter: mask(color=#ffffff); width: 160; height: 120">
<h2>The mask value makes the text transparent</h2>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

filter 属性也可以应用于图像，这里有一些已应用了 filter 属性的图像例子。

完整实例【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>请滚动页面，看看会发生什么。</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>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

当页面滚动时不会移动的背景图片。

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024