欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Web頁(yè)面布局方式小結(jié)

  發(fā)布時(shí)間：2014-06-03 11:51:37   作者：佚名   我要評(píng)論
Web頁(yè)面是由塊元素組成的，正常情況下塊元素一個(gè)個(gè)按垂直方向排布，構(gòu)成了頁(yè)面。但是這種基本的布局方式絕大多時(shí)候不能滿足我們的需求，所以各種布局方式應(yīng)運(yùn)而生，本文就對(duì)這些布局方式做個(gè)小結(jié)。

1、元素漂移

把一個(gè)元素從頁(yè)面流中移走，漂移到某個(gè)方向，其它塊元素會(huì)置于這個(gè)元素下面，當(dāng)有內(nèi)聯(lián)元素注入其他塊元素時(shí)，內(nèi)聯(lián)元素會(huì)環(huán)繞著這個(gè)元素

#amazing{

   width: 200px;

   float: right;

}

如圖：

如果其他元素要避開這個(gè)元素


復(fù)制代碼
代碼如下:

#footer{
clear: both;
}

如圖：

2、凍結(jié)布局

元素還保留在頁(yè)面流中，鎖定這個(gè)元素，凍結(jié)在頁(yè)面上，不論放大還是縮小窗口，這個(gè)元素的大小不變


復(fù)制代碼
代碼如下:

#allcontent{
width: 800px;
}

如圖：

3、凝膠物布局

鎖定頁(yè)面中內(nèi)容區(qū)的寬度，把它放置在瀏覽器中央


復(fù)制代碼
代碼如下:

#allcontent{
width: 800px;
margin-left: auto;
margin-right: auto;
}

如圖：

4、絕對(duì)布局

把一個(gè)元素從頁(yè)面流中移走，并漂浮固定在頁(yè)面的某個(gè)位置。


復(fù)制代碼
代碼如下:

#sidebar{
position: absolute;
top: 128px;
right: 480px;
}

如圖：

5、固定布局

把一個(gè)元素從頁(yè)面流中移走，并漂浮固定在窗口的某個(gè)位置。


復(fù)制代碼
代碼如下:

#coupon{
position: fixed;
top: 300px;
left: 100px;
}

如圖：

6、相對(duì)布局

元素還保留在頁(yè)面流中，但在頁(yè)面顯示之前把元素偏移到指定的位置，原來(lái)的位置因?yàn)檫€在流中，所以不會(huì)被其他元素占位。

.beanheading img{

   position: relative;

    right:120px;

}

如圖：

相關(guān)文章

最新評(píng)論