使用CSS創(chuàng)建固定寬度的布局
2024-02-21 分類： 網(wǎng)站建設(shè)
我最近的幾篇專欄文章討論了使用 XHTML 和 CSS 實(shí)現(xiàn)兩列或三列頁(yè)面布局的各個(gè)方面。到目前為止，所有例子都使用流式布局（也就是布局會(huì)自動(dòng)擴(kuò)展和適應(yīng)瀏覽器窗口的寬度）。現(xiàn)在是時(shí)候考慮另外一種主要的頁(yè)面布局方法了，這種布局方法是固定寬度布局。
很多 Web 構(gòu)建人員傾向于使用固定寬度的布局進(jìn)行頁(yè)面設(shè)計(jì)，因?yàn)樗鼈兡苌删_且可預(yù)知的結(jié)果。這種方法與打印布局非常接近，對(duì)于設(shè)計(jì)人員和訪問者來(lái)說都是一個(gè)很重要的舒適因素；另外，對(duì)于包含很多大圖片和其它元素的內(nèi)容，由于它們?cè)诹魇讲季种胁荒芎芎玫乇憩F(xiàn)，因此固定寬度布局也是處理這種內(nèi)容的最好方法。
從table 到 div
近年來(lái)，設(shè)計(jì)人員都使用表（table）來(lái)創(chuàng)建固定寬度的布局。表的列和行是對(duì)設(shè)計(jì)人員的布局表格（grid）的一種可行的模擬，所以一點(diǎn)也不奇怪設(shè)計(jì)人員為什么采用 HTML 表來(lái)完成頁(yè)面布局。 然而，基于表的布局有一個(gè)明顯的問題。除了語(yǔ)義上不適合用表來(lái)進(jìn)行布局之外，產(chǎn)生的代碼也很混亂，難于閱讀，甚至難于維護(hù)——尤其是在包含合并的表單元格（cell）和嵌套表時(shí)。
使用 div 進(jìn)行頁(yè)面布局效果要好得多。除了這是推薦使用的最佳方法之外，代碼的裝載速度會(huì)更快，也更易于處理。
表及其單元格的格式（formatting）屬性被借用到固定寬度布局中，因?yàn)橹付ㄟ@些元素的尺寸相當(dāng)簡(jiǎn)單。其實(shí)通過 div 可以做到同樣的事情，只要確定 div 精確的維數(shù)并使用絕對(duì)和相對(duì)定位將這些 div 定位到頁(yè)面上即可。
圖 A 展示了一個(gè)典型的固定寬度的布局，該布局由頂部的一個(gè)標(biāo)題，一個(gè)三列內(nèi)容的區(qū)域（主內(nèi)容列，每側(cè)有一個(gè)工具條），和頁(yè)面底部的一個(gè)頁(yè)腳所組成。所有元素的寬度都是固定的；在瀏覽器窗口發(fā)布變化時(shí)它們的尺寸都不會(huì)變化。
下面的 XHTML 標(biāo)記生成圖 A 所示的頁(yè)面。（出于簡(jiǎn)單考慮，內(nèi)容被截短。）
以下是引用片段： <body> <div id="head"> <h1>header</h1> </div> <div id="columns"> <div id="side1"> <h3>side1</h3> <ul> <li>Let me not to the marriage of true minds</li> <li>Admit impediments; love is not love</li> <li>Which alters when it alteration finds</li> <li>Or bends with the remover to remove</li> <li>Oh, no, it is an ever fixed mark</li> </ul> </div> <div id="content"> <h2>main content</h2> <p>That looks on tempests ... his height be taken.</p> <p>But bears it out ... alteration finds.</p> <p>Whose worth's unknown, ... the remover to remove.</p> </div> <div id="side2"> <h3>side2</h3> <ul> <li>Let me not to the marriage of true minds</li> <li>Admit impediments; love is not love</li> <li>Which alters when it alteration finds</li> </ul> </div> </div> <div id="foot"> <h3>footer</h3> <p>Or bends with ... height be taken. </p> </div> </body>
下面是將頁(yè)面設(shè)計(jì)為固定寬度布局的 CSS 代碼。
以下是引用片段： body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; } h2,h3 { margin-top: 0px; padding-top: 0px; } div#head { position: absolute; width:750px; height:100px; left:0px; top: 0px; background-color: #FFFF66; } div#columns { position: relative; width: 750px; top: 100px; background-color: #CCCCCC; } div#side1 { position:absolute; width:150px; top: 0px; left:0px; background-color: #FF6666; } div#content { position: relative; width: 450px; top: 0px; left: 150px; background-color: #999999; } div#side2 { position:absolute; width:150px; top: 0px; left: 600px; background-color: #00FF66; } div#foot { position: relative; width: 750px; clear: both; margin-top: 100px; background-color: #99FFFF; }
分解代碼
這段標(biāo)記并不是特別地值得注意——只是在每個(gè)主要頁(yè)面元素的外面（標(biāo)題、頁(yè)腳、工具條和主內(nèi)容）包圍著 div。每個(gè) div 有一個(gè) id，相應(yīng)的 CSS 樣式可以使用這個(gè) id 引用它。只有一個(gè)額外的 div（div id="columns"）包圍著三列內(nèi)容區(qū)域。在 Internet Explorer 中將頁(yè)腳放在三列中最長(zhǎng)一列的下面是必要的。
像平時(shí)用法一樣，CSS 代碼完成所有的重要任務(wù)。首先它完成一些家務(wù)管理。Body樣式將頁(yè)面的邊距設(shè)為零，h2, h3樣式將默認(rèn)間距設(shè)為零。否則的話，這該布局周圍就會(huì)有一個(gè)邊距，而在某些瀏覽器（比如 Netscape 和 Mozilla）中標(biāo)題將會(huì)在在主內(nèi)容和頁(yè)腳的上面產(chǎn)生一個(gè)空白區(qū)域。
樣式div#head為標(biāo)題 div 設(shè)置一個(gè)明確的高度和寬度。標(biāo)題使用 position: absolute, top: 0px和 left: 0px規(guī)則顯式地定位在頁(yè)面的左上角。規(guī)則 position: absolute是非常重要的，因?yàn)槎ㄎ粚傩裕╰op、left、right、bottom）在常規(guī)（靜態(tài)）定位時(shí)會(huì)被忽略。然而要記住，任何絕對(duì)定位的元素都會(huì)從常規(guī)的頁(yè)面流中被移除掉，而屬于頁(yè)面流的元素將會(huì)像絕對(duì)定位元素不存在一樣被定位到頁(yè)面上。
樣式 div#columns控制 div 的格式，使其充當(dāng)三個(gè)列的容器。它使用 position: relative創(chuàng)建屬于常規(guī)頁(yè)面流的一個(gè)元素（它會(huì)根據(jù)其內(nèi)容進(jìn)行擴(kuò)展和適應(yīng)，因而影響其它元素的定位），但是它將從其常規(guī)位置偏移。規(guī)則 top: 100px提供一個(gè)偏移量，將列容器向下推，使其覆蓋標(biāo)題。
規(guī)則 div#side1控制第一個(gè)工具條列的樣式。它設(shè)置該列的寬度（width: 150px）并使用絕對(duì)定位將該列放置在其父元素的左上角。父元素是該列的 div，如果該元素使用相對(duì)于 body 元素的相對(duì)定位，那么它將解釋 top: 0px規(guī)則而非你所期望的 100px設(shè)置。規(guī)則 div#side2以同樣的方式設(shè)置左工具條所用的列。div#side1和 div#side2唯一不同之處是背景色和 left: 600px規(guī)則，后者將該列定位在其它兩列的右邊。
樣式 div#content中的主內(nèi)容所用的列的樣式控制與其它兩列的樣式控制相似。它顯式地設(shè)計(jì)寬度（width: 450px）并使用 left: 150px和 top: 0px規(guī)則在其父元素（包圍著三個(gè)列的 div）內(nèi)定位該列。主要的不同之處在于 position: relative規(guī)則。我們使用相對(duì)定位使主內(nèi)容列可以影響其父元素（包圍著三個(gè)列的 div）的尺寸并因此影響頁(yè)腳元素的尺寸。
樣式 div#foot設(shè)置頁(yè)腳的寬度（width: 750px），該樣式還包含一個(gè) clear: both規(guī)則，該規(guī)則保證它接在其它元素下面，而不是旁邊。由于它使用相對(duì)定位，所以它在頁(yè)面上的位置是由其它元素的流所決定的，在這里具體是由包圍著三個(gè)列的 div 所決定的。規(guī)則 margin-top: 100px是一個(gè)很重要的細(xì)節(jié)，它防止頁(yè)腳被上面的列所覆蓋。這些列在頁(yè)面流中從它們的常規(guī)位置偏移，從而為絕對(duì)定位的標(biāo)題以及需要相應(yīng)偏移的頁(yè)腳騰出空間。
居中樣式的變化
在固定寬度頁(yè)面布局中最常見且主要的變化可能是固定寬度的內(nèi)容塊漂在瀏覽器窗口的中間，而不是粘附于瀏覽器窗口的左邊。你可以很容易地實(shí)現(xiàn)這一效果，方法是在其余標(biāo)記周圍（也就是 body 標(biāo)簽內(nèi)）添加一個(gè)包裝器（wrapper）div，并創(chuàng)建一個(gè) CSS 樣式來(lái)居中那個(gè) div。
例如，圖 B 是在圖 A 的基礎(chǔ)上添加了一個(gè)標(biāo)簽（<div id="wrapper">）和一個(gè)相應(yīng)的 CSS 樣式后的結(jié)果。下面是新添加的 CSS 樣式的代碼：
以下是引用片段： div#wrapper { position:relative; margin-left:auto; margin-right:auto; top: 20px; width:750px; background-color: #CCCCCC; } 這種方法之所以能用，是因?yàn)樗械牟季?div 都是相對(duì)于它們的父元素相對(duì)定位的。在圖 A 中，標(biāo)題、內(nèi)容列和頁(yè)腳所在 div 的父元素是 body 標(biāo)簽，但是在圖 B 中，它們的父元素是 wrapper div。這種居中方法在“Creating a centered page layout with CSS（使用 CSS 創(chuàng)建居中頁(yè)面布局）”一文中有詳細(xì)的解釋。
本文作者：Michael Meadhra 在Web 發(fā)展的最初階段就在這一領(lǐng)域從事開發(fā)。他參與編著的書已累積幾十本，包括由Osborne/McGraw-Hill出版的《How to Do Everything with Dreamweaver MX 2004》。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
很多 Web 構(gòu)建人員傾向于使用固定寬度的布局進(jìn)行頁(yè)面設(shè)計(jì)，因?yàn)樗鼈兡苌删_且可預(yù)知的結(jié)果。這種方法與打印布局非常接近，對(duì)于設(shè)計(jì)人員和訪問者來(lái)說都是一個(gè)很重要的舒適因素；另外，對(duì)于包含很多大圖片和其它元素的內(nèi)容，由于它們?cè)诹魇讲季种胁荒芎芎玫乇憩F(xiàn)，因此固定寬度布局也是處理這種內(nèi)容的最好方法。
從table 到 div
近年來(lái)，設(shè)計(jì)人員都使用表（table）來(lái)創(chuàng)建固定寬度的布局。表的列和行是對(duì)設(shè)計(jì)人員的布局表格（grid）的一種可行的模擬，所以一點(diǎn)也不奇怪設(shè)計(jì)人員為什么采用 HTML 表來(lái)完成頁(yè)面布局。 然而，基于表的布局有一個(gè)明顯的問題。除了語(yǔ)義上不適合用表來(lái)進(jìn)行布局之外，產(chǎn)生的代碼也很混亂，難于閱讀，甚至難于維護(hù)——尤其是在包含合并的表單元格（cell）和嵌套表時(shí)。
使用 div 進(jìn)行頁(yè)面布局效果要好得多。除了這是推薦使用的最佳方法之外，代碼的裝載速度會(huì)更快，也更易于處理。
表及其單元格的格式（formatting）屬性被借用到固定寬度布局中，因?yàn)橹付ㄟ@些元素的尺寸相當(dāng)簡(jiǎn)單。其實(shí)通過 div 可以做到同樣的事情，只要確定 div 精確的維數(shù)并使用絕對(duì)和相對(duì)定位將這些 div 定位到頁(yè)面上即可。
圖 A 展示了一個(gè)典型的固定寬度的布局，該布局由頂部的一個(gè)標(biāo)題，一個(gè)三列內(nèi)容的區(qū)域（主內(nèi)容列，每側(cè)有一個(gè)工具條），和頁(yè)面底部的一個(gè)頁(yè)腳所組成。所有元素的寬度都是固定的；在瀏覽器窗口發(fā)布變化時(shí)它們的尺寸都不會(huì)變化。
下面的 XHTML 標(biāo)記生成圖 A 所示的頁(yè)面。（出于簡(jiǎn)單考慮，內(nèi)容被截短。）
以下是引用片段： <body> <div id="head"> <h1>header</h1> </div> <div id="columns"> <div id="side1"> <h3>side1</h3> <ul> <li>Let me not to the marriage of true minds</li> <li>Admit impediments; love is not love</li> <li>Which alters when it alteration finds</li> <li>Or bends with the remover to remove</li> <li>Oh, no, it is an ever fixed mark</li> </ul> </div> <div id="content"> <h2>main content</h2> <p>That looks on tempests ... his height be taken.</p> <p>But bears it out ... alteration finds.</p> <p>Whose worth's unknown, ... the remover to remove.</p> </div> <div id="side2"> <h3>side2</h3> <ul> <li>Let me not to the marriage of true minds</li> <li>Admit impediments; love is not love</li> <li>Which alters when it alteration finds</li> </ul> </div> </div> <div id="foot"> <h3>footer</h3> <p>Or bends with ... height be taken. </p> </div> </body>
下面是將頁(yè)面設(shè)計(jì)為固定寬度布局的 CSS 代碼。
以下是引用片段： body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; } h2,h3 { margin-top: 0px; padding-top: 0px; } div#head { position: absolute; width:750px; height:100px; left:0px; top: 0px; background-color: #FFFF66; } div#columns { position: relative; width: 750px; top: 100px; background-color: #CCCCCC; } div#side1 { position:absolute; width:150px; top: 0px; left:0px; background-color: #FF6666; } div#content { position: relative; width: 450px; top: 0px; left: 150px; background-color: #999999; } div#side2 { position:absolute; width:150px; top: 0px; left: 600px; background-color: #00FF66; } div#foot { position: relative; width: 750px; clear: both; margin-top: 100px; background-color: #99FFFF; }
分解代碼
這段標(biāo)記并不是特別地值得注意——只是在每個(gè)主要頁(yè)面元素的外面（標(biāo)題、頁(yè)腳、工具條和主內(nèi)容）包圍著 div。每個(gè) div 有一個(gè) id，相應(yīng)的 CSS 樣式可以使用這個(gè) id 引用它。只有一個(gè)額外的 div（div id="columns"）包圍著三列內(nèi)容區(qū)域。在 Internet Explorer 中將頁(yè)腳放在三列中最長(zhǎng)一列的下面是必要的。
像平時(shí)用法一樣，CSS 代碼完成所有的重要任務(wù)。首先它完成一些家務(wù)管理。Body樣式將頁(yè)面的邊距設(shè)為零，h2, h3樣式將默認(rèn)間距設(shè)為零。否則的話，這該布局周圍就會(huì)有一個(gè)邊距，而在某些瀏覽器（比如 Netscape 和 Mozilla）中標(biāo)題將會(huì)在在主內(nèi)容和頁(yè)腳的上面產(chǎn)生一個(gè)空白區(qū)域。
樣式div#head為標(biāo)題 div 設(shè)置一個(gè)明確的高度和寬度。標(biāo)題使用 position: absolute, top: 0px和 left: 0px規(guī)則顯式地定位在頁(yè)面的左上角。規(guī)則 position: absolute是非常重要的，因?yàn)槎ㄎ粚傩裕╰op、left、right、bottom）在常規(guī)（靜態(tài)）定位時(shí)會(huì)被忽略。然而要記住，任何絕對(duì)定位的元素都會(huì)從常規(guī)的頁(yè)面流中被移除掉，而屬于頁(yè)面流的元素將會(huì)像絕對(duì)定位元素不存在一樣被定位到頁(yè)面上。
樣式 div#columns控制 div 的格式，使其充當(dāng)三個(gè)列的容器。它使用 position: relative創(chuàng)建屬于常規(guī)頁(yè)面流的一個(gè)元素（它會(huì)根據(jù)其內(nèi)容進(jìn)行擴(kuò)展和適應(yīng)，因而影響其它元素的定位），但是它將從其常規(guī)位置偏移。規(guī)則 top: 100px提供一個(gè)偏移量，將列容器向下推，使其覆蓋標(biāo)題。
規(guī)則 div#side1控制第一個(gè)工具條列的樣式。它設(shè)置該列的寬度（width: 150px）并使用絕對(duì)定位將該列放置在其父元素的左上角。父元素是該列的 div，如果該元素使用相對(duì)于 body 元素的相對(duì)定位，那么它將解釋 top: 0px規(guī)則而非你所期望的 100px設(shè)置。規(guī)則 div#side2以同樣的方式設(shè)置左工具條所用的列。div#side1和 div#side2唯一不同之處是背景色和 left: 600px規(guī)則，后者將該列定位在其它兩列的右邊。
樣式 div#content中的主內(nèi)容所用的列的樣式控制與其它兩列的樣式控制相似。它顯式地設(shè)計(jì)寬度（width: 450px）并使用 left: 150px和 top: 0px規(guī)則在其父元素（包圍著三個(gè)列的 div）內(nèi)定位該列。主要的不同之處在于 position: relative規(guī)則。我們使用相對(duì)定位使主內(nèi)容列可以影響其父元素（包圍著三個(gè)列的 div）的尺寸并因此影響頁(yè)腳元素的尺寸。
樣式 div#foot設(shè)置頁(yè)腳的寬度（width: 750px），該樣式還包含一個(gè) clear: both規(guī)則，該規(guī)則保證它接在其它元素下面，而不是旁邊。由于它使用相對(duì)定位，所以它在頁(yè)面上的位置是由其它元素的流所決定的，在這里具體是由包圍著三個(gè)列的 div 所決定的。規(guī)則 margin-top: 100px是一個(gè)很重要的細(xì)節(jié)，它防止頁(yè)腳被上面的列所覆蓋。這些列在頁(yè)面流中從它們的常規(guī)位置偏移，從而為絕對(duì)定位的標(biāo)題以及需要相應(yīng)偏移的頁(yè)腳騰出空間。
居中樣式的變化
在固定寬度頁(yè)面布局中最常見且主要的變化可能是固定寬度的內(nèi)容塊漂在瀏覽器窗口的中間，而不是粘附于瀏覽器窗口的左邊。你可以很容易地實(shí)現(xiàn)這一效果，方法是在其余標(biāo)記周圍（也就是 body 標(biāo)簽內(nèi)）添加一個(gè)包裝器（wrapper）div，并創(chuàng)建一個(gè) CSS 樣式來(lái)居中那個(gè) div。
例如，圖 B 是在圖 A 的基礎(chǔ)上添加了一個(gè)標(biāo)簽（<div id="wrapper">）和一個(gè)相應(yīng)的 CSS 樣式后的結(jié)果。下面是新添加的 CSS 樣式的代碼：
以下是引用片段： div#wrapper { position:relative; margin-left:auto; margin-right:auto; top: 20px; width:750px; background-color: #CCCCCC; } 這種方法之所以能用，是因?yàn)樗械牟季?div 都是相對(duì)于它們的父元素相對(duì)定位的。在圖 A 中，標(biāo)題、內(nèi)容列和頁(yè)腳所在 div 的父元素是 body 標(biāo)簽，但是在圖 B 中，它們的父元素是 wrapper div。這種居中方法在“Creating a centered page layout with CSS（使用 CSS 創(chuàng)建居中頁(yè)面布局）”一文中有詳細(xì)的解釋。
本文作者：Michael Meadhra 在Web 發(fā)展的最初階段就在這一領(lǐng)域從事開發(fā)。他參與編著的書已累積幾十本，包括由Osborne/McGraw-Hill出版的《How to Do Everything with Dreamweaver MX 2004》。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
新聞名稱：使用CSS創(chuàng)建固定寬度的布局
網(wǎng)站路徑：http://m.newbst.com/news34/318134.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)、軟件開發(fā)、定制開發(fā)、標(biāo)簽優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 微信小程序收費(fèi)嗎？不知道的人應(yīng)該記住這四點(diǎn)，以防被愚弄！ 2024-02-21
- 網(wǎng)站建設(shè)中用戶體驗(yàn)的重要要素 2024-02-21
- 了解共享主機(jī)與VPS主機(jī)的區(qū)別 2024-02-20
- 如何做網(wǎng)站建設(shè)更能吸引用戶點(diǎn)擊? 2024-02-20
- 美國(guó)網(wǎng)站服務(wù)器的端口掃描類型 2024-02-20
- 建設(shè)企業(yè)網(wǎng)站的四個(gè)步驟介紹(企業(yè)網(wǎng)站的建設(shè)原則) 2024-02-20
- 成都區(qū)片綜合地價(jià)標(biāo)準(zhǔn)征求意見 2024-02-20
- 成都網(wǎng)站建設(shè)：教你怎么衡量用戶體驗(yàn)度 2024-02-21
- 企業(yè)網(wǎng)站建設(shè)—新網(wǎng)站上線該如何優(yōu)化比較好？(滄州企業(yè)網(wǎng)站建設(shè)) 2024-02-21
- 關(guān)于網(wǎng)站設(shè)計(jì)制作的tag聚合頁(yè)和tag標(biāo)簽分類頁(yè)有什么不同？ 2024-02-20
- VPS托管對(duì)您的SEO的影響 2024-02-20
- 美國(guó)Linux服務(wù)器系統(tǒng)的管理賬戶 2024-02-20
- CF圖標(biāo)網(wǎng)站鏈接制作app(微信轉(zhuǎn)發(fā)網(wǎng)站鏈接沒圖標(biāo)) 2024-02-20
- 建站公司靠譜嗎？建造質(zhì)量如何？ 2024-02-20
- 企業(yè)網(wǎng)站建設(shè)中可能會(huì)碰到的問題？不能忽略(企業(yè)網(wǎng)站建設(shè)可以分為) 2024-02-20
- 英文網(wǎng)站建設(shè)多少費(fèi)用 2024-02-20
- 2016年創(chuàng)新互聯(lián)分析企業(yè)網(wǎng)站建設(shè)如何更好的與自己的品牌相結(jié)合原理 2024-02-20
- 設(shè)計(jì)師需要了解相關(guān)UX設(shè)計(jì)的知識(shí) 2024-02-20
- 淺談優(yōu)秀網(wǎng)站中的文字排印 2024-02-20