capture格式布局

標籤：

布局方式：div+css

一、（位置）position：fixed

    鎖定位置（相對於瀏覽器的位置），例如有些網站的右下角的快顯視窗

 

 

仿寫一個例子

其中position：fixed 鎖定

 

顯示

 

 

二、position：absolute（絕對的）    

特殊性：絕對位置其實是在頁面上方進行定位，不同於相對定位，相對定位是在頁面當中真實佔有某塊地區，若有上下左右的值會進行平移，而不會失去原佔有位置

    1.外層沒有position：absolute（或relative）；那麼div相對於瀏覽器定位，如中b（距離瀏覽器右邊框為50像素，距離下邊框為20像素）。

    2.外層有position：absolute（或relative）；那麼div相對於外層邊框定位，如中bb（距離d的右邊框50像素，距離d的下邊框為20像素）。

樣本：

 

 

 

 

三、position：relative

    相對位置 相對定位。

特殊性：實際佔有位置固定，但可以讓邊框或者形狀平移，如同優酷中的視頻平移邊框.相對定位是在頁面當中真實佔有某塊地區，若有上下左右的值會進行平移，而不會失去原佔有位置

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

樣本：

 

 

四、分層（z-index）

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

    在上面relative的樣本中，我們看到了aa遮住了a，這是因為後寫代碼的顯示層級越靠前，那麼在不改變代碼順序的情況下如何讓a蓋住aa？如下：

樣本：

 

 

 

 

 

 

再如：

層數變高兩層，添加 z-index：2

 

註：層數基本預設都為1

 

 

五、float：left、right

Left、right時不用給他規定位置（left、top），直接相對於瀏覽器。若外部被包裹，相對於外部div的除去一行的位置的左上或右上顯示。

    overflow：hidden；    //超出部分隱藏；scroll，顯示出捲軸；

    <div style="clear:both"></div>   //截斷流

設定超連結的樣式樣本：

 

 

 

 

 

 

 

 

 

 

 

 

 

顯示效果

 

再添加標籤

 

顯示效果

 

標籤多了會自動往下排

 

 

 

 

半透明效果：

    <div class="box">透明地區<div>

在樣式表中的代碼為：

.box

{

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

}

 

中overflow：visible 表示多出部分可見

 

中opacity：0.5為半透明

 

 

例如：

 

顯示效果：

 

 

再例如；

 

顯示：

 

想要隱藏多出的部分，所以改動a標籤，因為b在a裡面，a是超出的部分，所以添加hidden屬性

 

顯示為隱藏效果不舉例

 

然後添加一個hover標籤，滑鼠指向時，超出部分顯示可見

 

 

 

 

 

 

 

 

 

capture格式布局