Web編程基礎 第4章 頁面布局學習資料_第1頁
Web編程基礎 第4章 頁面布局學習資料_第2頁
Web編程基礎 第4章 頁面布局學習資料_第3頁
Web編程基礎 第4章 頁面布局學習資料_第4頁
Web編程基礎 第4章 頁面布局學習資料_第5頁
已閱讀5頁，還剩60頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第4章頁面布局

內容提要4.4實用技巧和代碼規范4.3頁面布局4.2盒子模型和DIV4.1概述4.5CSShack實現網頁的頁面布局一般有三種方法：表格布局、框架布局以及DIV+CSS頁面布局。4.1概述表格布局的實現方式比較簡單。各個元素可以位于獨立的單元格中，相互影響較小，而且對于瀏覽器的兼容性較好。表格布局也存在一些缺陷。首先，在某些瀏覽器下（例如IE），表格只有在全部下載完成后才可以顯示。數據量比較大時會影響網頁的瀏覽速度。其次，搜索引擎難以分析較復雜的表格，而且網頁樣式的改版也比較麻煩。另外，在多重表格嵌套的情況下，代碼可讀性較差，頁面下載的速度也會受到影響。目前，除了規模較小的網站之外，一般不采用表格布局。框架布局指的是利用框架來對頁面空間進行有效的劃分，每個區域可以顯示不同的網頁內容，各個區域之間互不影響。使用框架進行布局，可以使網頁更整潔、清晰，網頁下載的速度較快。但是如果框架使用較多，也會影響網頁的瀏覽速度。對于內容較多，較復雜的網站最好不要采用框架布局。另外，框架和瀏覽器的兼容性不好，保存比較麻煩，應用的范圍有限，一般也只應用于較小規模的網站。對于規模較大的、比較復雜的網站大多數采用DIV+CSS方式來進行布局。DIV+CSS布局方式具有較為明顯的優勢，主要表現在以下幾點。1．內容和表現相分離。2．對搜索引擎的支持更加友好。3．文件代碼更加精簡，執行速度更快。4．易于維護。但是DIV+CSS頁面布局也存在一定的缺陷：1．DIV+CSS方式實現起來比較復雜，初學者不易掌握。2．DIV+CSS方式對于元素的控制太靈活，容易出錯。3．DIV+CSS方式還沒有解決瀏覽器的完全兼容。例如在IE瀏覽器上可以正常顯示的頁面，換作其它瀏覽器顯示可能會面目全非。4．使用DIV+CSS布局網頁的開發成本較高，開發周期較長。4.2盒子模型和DIV在CSS中，頁面中的所有元素都可以看成一個盒子，占據著頁面上的一定的空間。一個盒子模型由content（內容）、border（邊框）、padding（填充）和margin（間隔）四部分組成。一個盒子的實際寬度或高度為：content+padding+border+marginDIV全稱為Division，代表網頁內容中的一個邏輯區域。DIV相當于一個容器，由起始標簽<div>和結束標簽</div>以及其中的內容組成。在DIV內部可以嵌套各類元素。1．position屬性position屬性的默認取值為static，指的是不定位，div按照默認的位置顯示。當position取值為relative時，指的是相對于static方式時div的位置偏移。當position取值為absolute時，指的是絕對定位，是用top,left,right,bottom等直接定位div相對于其最近的容器的位置。實際上，absolute方式本質上仍然是相對定位。當position取值為fixed時，指的是真正的絕對定位，是用top,left,right,bottom來指定div相對于瀏覽器的位置，即使用戶使用滾動條來滾動頁面，div相對于瀏覽器的位置仍然不變，即在界面中div的位置是不變化的。對于目前常用的瀏覽器來說，除了IE6之外，其它的瀏覽器都可以識別fixed值。2．overflow屬性overflow屬性可以指定div中溢出內容的顯示方式。當overflow取值為visible時，溢出的內容不會被截斷，而是顯示在div之外。當overflow取值為hidden時，溢出的內容會被截斷，而且瀏覽器不出現查看內容的滾動條。當overflow取值為scroll時，溢出的內容會被截斷，但是瀏覽器會提供查看截斷內容的滾動條。當overflow取值為auto時，由瀏覽器決定如何顯示，如果必要，則顯示滾動條。3．display屬性display屬性可以控制div的顯示方式。當display取值為none時，div不可見。當display取值為inline時，div可見，而且是行內元素。div元素前后不會換行。當display取值為block時，div可見，是塊級元素，div元素前后會出現換行。4．float屬性float屬性可以定義div的浮動方式，當float屬性取值為none時，div不會發生任何浮動，塊級元素會獨占一行，其后的塊級元素將會在新行中顯示。此時的display屬性相當于取值為block，display屬性會被忽略。當float屬性值取為left時，div會向左端浮動，其后的div的顯示方式和瀏覽器有關。當float屬性值取right時，div會向右端浮動。5．clear屬性div的clear屬性可用來清除div左右的浮動。clear屬性的默認值為none，指的是不清除浮動，允許div的左右兩邊存在浮動對象。clear屬性取值為left時，清除左邊的浮動對象，即不允許左邊出現浮動對象。clear屬性取值為right時，清除右邊的浮動對象，即不允許右邊出現浮動對象。clear屬性取值為both時，清除左右兩邊的浮動對象，即不允許左右兩邊出現浮動對象。4.3頁面布局一般的網頁需要包括標志、站點名稱、主頁面內容、站點導航、子菜單、搜索區、功能區以及頁腳等部分。每一部分可以使用一個div表示。各個div組成了整個網頁的結構。每一個div都可以使用CSS的定位屬性使其顯示在頁面的合適位置。4.3.1默認布局div的默認布局為垂直排列。每個div在默認情況下是塊級元素，div前后會出現換行。layout1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DIV的默認布局-垂直排列</title><styletype="text/css">#lay1{width:200px;height:30px;background-color:#90EE90;}#lay2{width:200px;height:30px;background-color:#FFFACD;}#lay3{width:200px;height:30px;background-color:#F08080;}</style></head><body><divid="lay1"></div><divid="lay2"></div><divid="lay3"></div></body></html>layout1.html在IE瀏覽器中的顯示結果如圖所示。4.3.2水平排列如果要div水平排列，只需要將div的float屬性設置為left即可，例如layout2.html。layout2.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DIV的水平排列</title><styletype="text/css">#lay1{width:100px;height:30px;background-color:#90EE90;

float:left;}#lay2{width:100px;height:30px;background-color:#FFFACD;

float:left;}#lay3{width:100px;height:30px;background-color:#F08080;

float:left;}</style></head><body><divid="lay1"></div><divid="lay2"></div><divid="lay3"></div></body></html>在IE瀏覽器中打開layout2.html，其顯示結果如圖所示。當瀏覽器窗口變小時，div會自動換行。4.3.3div的嵌套div之間可以互相嵌套，可以通過設置div的相關屬性來確定各個div之間的位置，例如layout3.html，一個div中嵌套三個垂直排列的div。layout3.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DIV的嵌套</title><styletype="text/css">#container{width:300px;height:120px;background-color:#7B68EE;padding-top:10px;padding-right:20px;padding-bottom:10px;padding-left:20px;text-align:center;margin-left:auto;margin-right:auto;}#lay1{width:200px;height:30px;background-color:#90EE90;}#lay2{width:200px;height:30px;background-color:#FFFACD;}#lay3{width:200px;height:30px;background-color:#F08080;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div><divid="lay3"></div></div></body></html>在IE瀏覽器中打開layout3.html，其顯示結果如圖所示。4.3.4div浮動當div的float屬性取值為left或者right時，即成為浮動對象。div用于網頁布局時，一般都是嵌套的。如果外層的div沒有設定大小，而內層的div又是浮動的，浮動對象的物理位置會脫離文檔流，因而對其父元素或者其后的元素的布局會產生影響，甚至會出現布局混亂的現象。layout4.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DIV的嵌套</title><styletype="text/css">#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;}

#lay1{width:30%;height:50px;background-color:#90EE90;

float:left;}#lay2{width:60%;height:60px;background-color:#FFFACD;

float:right;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div></div></body></html>layout4.html在IE瀏覽器中的顯示結果如圖所示。清除浮動可以消除浮動對象對其它元素的影響。一般可以采用四種方法來清除浮動，分別為使用空標簽、使用overflow屬性、使用after偽對象以及浮動外部元素。1．使用空標簽使用空標簽是最常用的清除浮動的方法，也是W3C推薦使用的方法。空標簽可以采用塊級元素，例如<div>、<p>以及<br/>等，在浮動元素之后添加一個空標簽，并使其clear屬性取值為both（或者除none之外的其它屬性值）。layout4.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用空標簽消除浮動</title><styletype="text/css">#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;}#lay1{width:30%;height:50px;background-color:#90EE90;

float:left;}

#lay2{width:60%;height:60px;background-color:#FFFACD;

float:right;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div><divstyle="clear:both"></div></div></body></html>layout5.html在IE瀏覽器中的顯示結果如圖所示，改變窗口的大小，外層DIV的大小可以自適應內層元素的大小變化。2．使用overflow屬性可以把父級元素的overflow屬性設置成hidden、auto或者scroll來清除浮動。layout6.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用overflow屬性消除浮動</title><styletype="text/css">#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;

overflow:auto;zoom:1;}

#lay1{width:30%;height:50px;background-color:#90EE90;

float:left;}#lay2{width:60%;height:60px;background-color:#FFFACD;

float:right;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div></div></body></html>layout6.html在Opera瀏覽器中的顯示結果如圖所示。3．使用after偽元素:after偽元素是在CSS2規范里提出來的，IE6/IE7并不支持。它的作用是在指定該偽元素的元素內，所有的子元素最后自動生成一個偽元素，并為偽元素設定樣式，設定樣式時使用clear屬性清除浮動。layout7.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用偽元素消除浮動</title><styletype="text/css">#container:after{content:'.';

clear:both;

display:block;

visibility:hidden;height:0px;}#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;}

#lay1{width:30%;height:50px;background-color:#90EE90;

float:left;zoom:1;

display:block;}#lay2{width:60%;height:60px;background-color:#FFFACD;

float:right;zoom:1;

display:block;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div></div></body></html>layout7.html在Opera中的顯示結果如圖所示。注意：使用偽元素清除浮動時，必須將要清除浮動的元素中的偽元素的高度設置成0，將visibility設置成hidden。否則生成的偽元素會比實際高度高出若干像素。另外，偽元素的content屬性值是必須的，可以為空，一般設置成“.”。4．浮動外部對象當內部元素為浮動對象時，也可以將外部元素設置成浮動對象，這樣外部元素可以包含浮動元素。但是使用這種方法需要將頁面中浮動元素的所有外部元素全都設置成浮動對象，一直到body，在實際應用中一般不推薦使用。4.3.5混合布局通過div的嵌套可以實現混合布局。一般的混合布局的網頁主要分成head、main、footer三部分，其中main部分又可以分成左右兩個部分。layout8.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>混合布局</title><styletype="text/css">body{font:12px;margin:0px;text-align:center;background-color:#FFF;}#container{background-color:#FFFF93;width:100%;}#header{background-color:#FFCC99;width:100%;margin:0auto;height:100px;}#pagebody{background-color:#90EE90;width:100%;margin:0auto;height:400px;}#slidebar{background-color:orange;

float:left;width:30%;height:100%;}#mainbody{background-color:#87CEFA;

float:right;width:70%;height:100%;}#footer{width:100%;margin:0auto;height:50px;background-color:yellow;}</style></head><body><divid="container"><divid="header"></div><divid="pagebody"><divid="slidebar"></div><divid="mainbody"></div></div><divstyle="clear:both"></div><divid="footer"></div></div></body></html>layout8.html在IE瀏覽器中的顯示結果如圖所示。4.4實用技巧和代碼規范1.使網頁整體居中要使最外層的div在頁面上居中顯示，可使用以下樣式：#container{margin:0auto;text-align:center;}其中，margin:0auto;指的是上下邊距為0，左右為自動邊距，對于IE6以上的瀏覽器可以實現居中。text-align:center;是為了兼容IE6以下版本的瀏覽器。2.顏色的表示顏色可以使用英文單詞，或者使用六位十六進制數表示，如果每兩位的值相同，可以使用縮寫，例如“#AABBCC”，可以縮寫成“#ABC”。一般情況下，在同一個CSS配置中，不要同時使用全寫和縮寫。3.關于上下左右的屬性值寫法在CSS中，有一些屬性是區分上下左右的，根據屬性值個數的不同，對應于上左下右。例如：padding:value1;//上下左右的內邊距都是value1padding:value1value2;//上下內邊距是value1，左右內邊距是value2padding:value1value2value3;//上內邊距是value1，左右內邊距是value2，下內邊距是value3padding:value1value2value3value4;//上右下左分別對應于value1,value2,value3,value44．度量單位不可省略，除非為0

在CSS中，除了行高和0值不需要定義單位之外，其它情況都必須加上單位，在數值和單位之間不可以加多余的空格。5．選擇符的優先級

CSS中的類選擇符可以重復使用，而id選擇符一般只使用一次。如果頁面元素同時使用了類選擇符和id選擇符，而且定義的樣式出現沖突時，id選擇符的優先級高于類選擇符。6．選擇正確的DOCTYPE<!DOCTYPE>聲明位于文檔的最前面的位置，此標簽的作用是告知瀏覽器使用哪種HTML或者XML規范。如果<!DOCTYPE>使用不當，可能會造成CSS失效。HTML4.01提供了三種DTD聲明可供選擇。7．默認值CSS中的屬性一般都有默認值，例如，通常padding的默認值為0，background-color的默認值為transparent，但是在不同的瀏覽器下的默認值可能不同，為了避免不兼容而造成的問題，可以使用CSS設定元素的屬性值：*{margin:0;padding:0;}以上代碼將所有元素的margin以及padding屬性設置成0。8．超級鏈接的樣式如果超級鏈接的偽類在設置樣式時的順序不正確，可能會引起超級鏈接訪問過以后，就不能再使用:hover樣式和:active樣式，在CSS中聲明超級鏈接在不同的狀態的樣式時，應該按照:link、:visited、:hover、:acitve的順序。9．IE的雙倍邊距當頁面中的元素為塊級元素，左浮動并且具有左外邊距時，IE會出現雙倍邊距的錯誤。例如：<divstyle=“float:left;margin-left:10px;width:420px;height:150px;border:1solidred”></div>在IE瀏覽器上顯示時會使左外邊距成為20px，解決的辦法是將元素轉化成內聯元素，即添加display屬性值為inline。10．高度問題如果DIV設置了固定的高度，但是DIV里的實際內容的高度大于設置的高度，IE瀏覽器會自動拉伸DIV容器。Firefox不能自動拉伸DIV的高度，超出范圍的內容會出現重疊的現象。為了兼容各類瀏覽器，可以將高度設置成自動調整，或者將overflow屬性設置成hidden。4.5CSShack目前，流行的瀏覽器有很多種，例如IE、Firefox、Safari、Chrome等。而同一種瀏覽器的版本也各不相同，例如IE6、IE7、IE8等。4.5.2CSShack的分類由于各個瀏覽器對CSS的解析存在差異，因此可能會導致在不同的瀏覽器上顯示的頁面不相同。為了使得各個瀏覽器的顯示頁面統一起來，需要針對不同的瀏覽器提供不同的CSS代碼，這個過程稱為CSShack。在聲明CSS時，CSS的大部分屬性值可以繼承和覆蓋。CSShack可以分為三種形式，包括CSS類內部hack，選擇器hack以及HTML頭部引用hack。1．CSS類內部hackCSS類內部hack指的是各個瀏覽器可以識別的特殊符號或標識，例如，IE6可以識別“*”和“_”；IE7可以識別“*”，但不能識別“_”；而對于Firefox來說，“*”和“_”都不識別。2．選擇器hack選擇器hack指的是將特殊符號和CSS的選擇器結合使用。例如，*html.class{}可以被IE6識別。例如：body{

background:red;/*一般瀏覽器背景色為紅色*/*background:blue;/*IE瀏覽器的背景色為藍色，覆蓋了紅色*/*background:green!import;/*IE7的背景色為綠色，覆蓋了藍色*/}3．HTML頭部引用hackHTML頭部引用指的條件注釋，根據IE瀏覽器的版本來決定哪些CSS代碼生效，因此這種方式只對IE瀏覽器有效。當前的IE瀏覽器的主要版本是IE5、IE6、IE7和IE8，而這幾個版本的IE對XHTML+CSS的解釋并不完全相同。

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論