您現在的位置: 365建站網 > 365教程 > DHTML 教程 > DHTML CSS Positioning (CSS-P)

DHTML CSS Positioning (CSS-P)

此節有 175 人學習過     參與評論

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 - 元素的頂端位置
  • visibility - 指定元素應當可見還是隱藏
  • z-index - 元素的堆疊次序
  • clip - 元素裁剪
  • 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
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
允許您設置元素的透明度
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
使元素模糊
filter:blur(
add=true,
direction=90,
strength=6);
chroma color 使指定的顏色透明
filter:chroma(
color=#ff0000)
fliph none 水平反轉元素 filter:fliph;
flipv none 垂直反轉元素 filter:flipv;
glow
  • color
  • strength
使元素發光
filter:glow(
color=#ff0000,
strength=5);
gray none 用黑白色來呈現元素 filter:gray;
invert none 用反轉的顏色和亮度值來呈現元素 filter:invert;
mask color 呈現帶有指定背景色和透明前景色的元素
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
呈現帶有陰影的元素
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
呈現帶有陰影的元素
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • 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
如何使某個元素不可見。你希望此元素顯示還是不顯示?
Z-index
Z-index 可用于把一個元素放置于另一個元素之后,通過使用 Z-index 次序。
Z-index
請看一下,元素的 Z-index 次序已經改變了。
Cursors
通過 CSS 來改變鼠標指針的樣式。
Filters
使用 filter 屬性來改變標題的樣式。
Filters on Images
filter 屬性也可以應用于圖像,這里有一些已應用了 filter 屬性的圖像例子。
Watermark
當頁面滾動時不會移動的背景圖片。

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (175人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 国产一区二区三区中文在线| 交换邻居波多野结衣中文字幕| 成年免费a级毛片免费看| 熟透的岳| 性刺激特黄毛片免费视频| 东北老熟妇大声叫痒| xyx性爽欧美| 日本高清免费一本视频| 在线观看播放免费视频人| 欧美性xxxxx极品| 忘忧草在线播放免费视频高清| 女人下面被吃有多爽| 日韩人妻无码精品久久| 国内精品伊人久久久久影院| 亚洲中文久久精品无码| 国产一本一道久久香蕉| 秋霞韩国三级在线观看| 粉嫩虎白女流水| 四虎影视永久在线精品无码| 国产免费午夜福利片在线| bl在受身体里长期放东西| 日韩午夜福利码高清完整版| 十分钟免费视频观看在线| 手机看片久久国产免费| 欧美v片高清无码视频| japaneseteacher教师| 乱无码伦视频在线观看| 亚洲国产在线精品国自产拍影院| 欧美牲交a欧美牲交aⅴ久久| 苍井空高清无码中文字幕| 性色欲情网站| http://www.cloos-up.com