當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

利用div的定位制作复杂的页面布局

發(fā)布時間：2023/12/10 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了利用div的定位制作复杂的页面布局小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

既然是復雜的布局自然用到較多的div以及并列與嵌套。這就要我們在為它們命名的時候遵從一定的規(guī)定，以便于可讀性。
下面先來看一張布局圖：

這是三九健康網(wǎng)一個頻道的頁面，原本是很長的頁面，但為了說明問題，取了個完整布局樣式，而省去了中間的內(nèi)容。
我們可以把它看做是一個居中的頁面布局，這樣要實現(xiàn)整體居中，就需要一個div作為主要容器，我們把這個div命名為container.
CSS樣式為：
程序代碼 #container{margin:0px auto;}
這樣就實現(xiàn)了整體居中顯示。

我們再來看在這個主容器里面分別都有哪些部分：
#header頭部：位于頂端，顯示網(wǎng)站LOGO及其它相關元素。
#mainmenu主菜單
#banner頭部橫幅廣告
#menu頻道菜單
#primary主內(nèi)容區(qū)
#footer腳部區(qū)：顯示底部功能鏈接和版權信息。
這些區(qū)域從上至下依次排列形成了縱向布局模式。它們之間是并列的，不需要要指定任何樣式便可以實現(xiàn)從上到下的疊放。
而在主內(nèi)容區(qū)，又加入了嵌套,即嵌套了兩個div區(qū)域，左邊為：pri_left,右邊為pri_right.這兩個如何實現(xiàn)左右分欄的，在前面的第六節(jié)教程里有詳細的說明。在此再羅嗦下，也就是使用了float浮動屬性。
css樣式為：
程序代碼 #pri_left,#pri_right{float:left;width:75%;}
#pri_left{width:20%;}

此處代碼注意：在屬性的書寫上我們采用了簡化的方式應用了群組標簽#pri_left,#pri_right{},在參數(shù)的書寫上，我們?yōu)樗麄兌叨级x了width:75%.節(jié)約了代碼量，但緊接著在下面的屬性中單獨為左欄定義了width:20%,此時的左欄寬就會覆蓋掉上一句的width:75%.從而實現(xiàn)了二者寬度的單獨定義。
下面我們來定義這種樣式，為了能夠顯示區(qū)域，我們只為他們加上寬度高度及邊框樣式。
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style?type="text/css">

</style>
</head>

<body>
<div?id="container">
????<div?id="header">頭部：位于頂端，顯示網(wǎng)站LOGO及其它相關元素。</div>
????<div?id="mainmenu">主菜單</div>
????<div?id="banner">頭部橫幅廣告</div>
????<div?id="menu">頻道菜單</div>
????<div?id="primary">
????????<div?id="pri_left">div為pri_left</div>
????????<div?id="pri_right">
????????<div?id="pri_right1"?class="kuang1">div為pri_right1</div>
????????<div?id="pri_right2"?class="kuang2">div為pri_right2</div>
????????<div?id="pri_right3"?class="kuang2">div為pri_right3</div>
????????<div?id="pri_right4"?class="kuang1">div為pri_right4</div>
????????<div?id="pri_right5"?class="kuang2">div為pri_right5</div>
????????<div?id="pri_right6"?class="kuang2">div為pri_right6</div>
????????<div?id="pri_right7"?class="kuang3">div為pri_right7</div>
????????<div?id="pri_right8"?class="kuang4">div為pri_right8</div>
????????<div?id="pri_right8"?class="kuang5">div為pri_right9</div>
????????</div>
????</div>
????<div?id="footer">腳部區(qū)：顯示底部功能鏈接和版權信息。</div>
</div>
</body>
</html>

以上是實現(xiàn)頁面樣式的代碼，代碼看起來比較繁雜，但里面有很多可以簡化的地方，比如充分利用class（類）來指派參數(shù)，能縮減代碼量，且增加可讀性。當然這不是本節(jié)講解的重點，我們會在未來的教程中詳細論述。
代碼效果如圖：

細心的朋友會發(fā)現(xiàn)我們在pri_right區(qū)域里用pri_right1~pri_right9分別指定了9個DIV對象，這里面就是充分利用了浮動的屬性，而不必再次嵌套。把它們中的每個對象都設定出固定的寬度與高度，加上向左浮動的屬性，就會從左向右排列，到右側(cè)容不下時，就會轉(zhuǎn)入下一行顯示，從而實現(xiàn)它們的整齊排列。當然這種方式，關鍵在于設定的精確的寬高。

可見，div的重要作用就是實現(xiàn)大頁面的大布局，并且充分利用其浮動定位及并列嵌套的關系，構(gòu)造出復雜多樣的布局樣式來。

轉(zhuǎn)載于:https://www.cnblogs.com/xiachufeng/archive/2010/09/11/1823899.html

總結(jié)

以上是生活随笔為你收集整理的利用div的定位制作复杂的页面布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： idea导出jar包
下一篇：三星s9 android 版本,三星S9