萬盛學電腦網 >> 網絡編程 >> 安卓開發 >> XHTML布局的三列布局
XHTML布局的三列布局
xhtml是對html語言的發展，在近幾年被熱炒的概念web2.0裡面，這個進化了的網頁制作技術，也一直受到追捧。有些人把它叫做div+css。這樣叫也無可厚非。但是嚴格來說它是一個網頁的標准。新的標准自然有它的好處，div+css是它的具體做法。這種做法，使得頁面看起來簡潔，div設計了網頁的骨架，css像是衣服，裝飾了它。而避免使用傳統的table的布局帶來的麻煩，如果用table布局經常會帶來很多tr,td的標簽，不寫還不對，寫了還亂下面我們就給大家介紹一下XHTML布局吧！
下面我們來具體的看一個三列布局的例子，
頁眉
左邊
中間
頁尾
我們將網頁分為上中下三塊，中間的一塊在橫著分為左中右三快。每一塊用一個div標簽。
<div class="head">
<!-- 頁眉 -->
<div class="headcotent">
<span class="font">頁眉</span>
</div>
</div>
<div class="webbody">
<!-- 主體 -->
<div class="webbody1">
span class="font">左邊</span></div>
<div class="webbody2">
<span class="font">中間</span></div>
<div class="webbody3">
<span class="font">右邊</span></div>
</div>
<div class="footer">
<!-- 頁尾 -->
<span class="font">頁尾
</span></div>
每個標簽的class屬性，代表引用的CSS樣式。如果光有骨架那該多難看啊。我們來裝飾一個CSS的文件。我們建立了一個style.css的文件來裝飾。
對於很多人來說div的布局是很難控制的，因為長度和寬度的定義在CSS文件裡。而且屬性讀起來有點費勁。所以“百家拳軟件項目研究室”特意做了一個教程，來解決大家的疑惑。就上面的例子代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN" "-transitional.dtd">
<!-- 導入dtd文件如果用xhtml的話必須有這句 -->
<!-- 命名空間 -->
<html lang="zh" xml:lang="zh" xmlns="">
<head><!--標簽起到了對整個網頁的描述作用 包括作者 關鍵字等 -->
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<meta name="description" content="三列布局實例" />
<meta name="author" content="百家拳軟件項目研究室" />
<meta name="keywords" content="xhtml,div css,百家拳軟件項目研究室" />
<title>三列布局</title>
<!-- link引用了css文件 -->
<link rel="stylesheet" type="text/css" media="screen,projection" />
</head>
<body>
<div class="head">
<!-- 頁眉 -->
<div class="headcotent">
<span class="font">頁眉 <a font">網站首頁</a></span>
</div>
</div>
<div class="webbody">
<!-- 主體 -->
<div class="webbody1">
<span class="font">左邊</span></div>
<div class="webbody2">
<span class="font">中間</span></div>
<div class="webbody3">
<span class="font">右邊</span></div>
</div>
<div class="footer">
<!-- 頁尾 -->
<span class="font">頁尾</span></div>
</body>
</html>這是頁面部分沒有什麼好講的。
下面是CSS的部分：
.head {width:100%; height:120px; background-color:blue; }
.headcotent { text-align: center; width:auto; height:auto; padding:20px }
.webbody { text-align: center; width:100%; height:100px; }
.webbody1 {width:33.3% ; height:500px; float:left; background-color:yellow; }
.webbody2 {width:33.1% ; height:500px; float:left; background-color:yellow;border-left: 1px solid;}
.webbody3 {width:33.3% ; height:500px; float:left; background-color:yellow;border-left: 1px solid; }
.footer { width:100%; height:70px; float: left; background: #0074c8; text-align: center; }
.font { color: red; text-decoration: underline; text-align: center; size: 18; }
這個文件放在style/style.css中。
這裡我們著重講一下CSS中需要注意的地方。在webbody這個類中，我們想把中間的這塊分成三個橫排的快。Div的標簽默認都是豎排，橫排的關鍵在於float這個屬性。設置為靠左left。還有一個地方比較重要，就是webbody2,webbody3中的屬性border-left意思是在左邊的邊框變成實線。以便將兩個區間分開。
其實這只是一個典型的例子，大家照著這個做四列不能做嗎？當然是能了，在webbody裡面再加一組div的標簽，然後在css文件裡面再添加一個class不就行了嗎不過它們的width加起來不能超過100%啊。
還有一點需要注意的，這個例子的網頁的中間部分，右邊的那個div屬性border-left設為1px solid，的話，他們三個的width加一起則不能是100％，就連99.9%都不行因為兩個邊框還占2px呢。那麼我將一個設為33.2％，加一塊99.8％。在firefox3.0浏覽器中可以用，但是在IE6.0則不行。如果將那個改成33.1%就那個都可以了。不同浏覽器對它們的識別還是不同的。
以上就是我們給大家介紹的html5移動開發了。希望大家繼續關注我們的網站！
- 上一頁:HTML組件三最頂級頁面的設置方法
- 下一頁:HTML5預加載的方法
