HTML 格式與布局

2022-08-01 07:33:11 字數 2344 閱讀 9733

一、positionfixed

鎖定位置(相對於瀏覽器的位置),例如有些**的右下角的彈出視窗。

二、positionabsolute

1.外層沒有position:absolute(或relative);那麼div相對於瀏覽器定位,如下圖中b(距離瀏覽器右邊框為50畫素,距離下邊框為20畫素)。

2.外層有position:absolute(或relative);那麼div相對於外層邊框定位,如下圖中bb(距離d的右邊框50畫素,距離d的下邊框為20畫素)。

示例:

三、positionrelative

相對位置。

如下圖,相對於把此div包含住的div的某個位置進行固定。如果外層沒有包含他的,那就相對於瀏覽器進行相對位置的固定。

示例:

四、分層(z-index

z軸方向分層,可以理解為分成一摞紙,層數越高越靠上。

在上面relative的示例中,我們看到了aa遮住了a,這是因為後寫**的顯示級別越靠前,那麼在不改變**順序的情況下如何讓a蓋住aa?如下:

示例:

五、floatleftright

leftright時不用給他規定位置(lefttop),直接相對於瀏覽器。若外部被包裹,相對於外部div的除去一行的位置的左上或右上顯示。

overflow:hidden;    //超出部分隱藏;scroll,顯示出滾動條;

//截斷流

附:cursor:pointer    滑鼠指到上面時的形狀

透明區域

在樣式表中的**為:

.box

老師講解

"

">"

background-color:#3ff; font-size:36px;

">

123今天突然冷了。

class="

qq">三月二十三日"ww

">淄博漢企。

"

">"

a">廣告招商

class="

c">cclass="

b">b

class="

d">dclass="

b">bb

"aaa

">aaa

"bbb

">bbb

"

">

"ccc

">廣告位置招商

"ddd

">廣告位ddd

"ddd

">廣告位eee

"ccc

">廣告位置招商fff

自己練習

360導航頁面製作

"

">

HTML格式布局

一 position fixed 鎖定位置 相對於瀏覽器的位置 例如有些 的右下角的彈出視窗。二 position absolute 1.外層沒有position absolute 或relative 那麼div相對於瀏覽器定位,如下圖中b 距離瀏覽器右邊框為50畫素,距離下邊框為20畫素 2.外層...

HTML靜態網頁 格式與布局

一 position fixed 鎖定位置 相對於瀏覽器的位置 例如有些 的右下角的彈出視窗。示例 二 position absolute 相對於自己最近的父元素來定位的 1.外層沒有position absolute 或relative 那麼div相對於瀏覽器定位,如下圖中b 距離瀏覽器右邊框為5...

15 07 27 HTML 樣式 格式與布局

格式與布局 流式布局 float left right 向左流 向右流 clera both 截斷流 例如木頭放在水流上碰到牆,挨個停下,先流的先靠牆停下 元素並列 元素巢狀 定位布局 position fixed absolute relative top right bottom left 三種...