DIV+CSS標準化網頁布局

IV+CSS標準化布局的優勢

使用“DIV+CSS”對網站進行布局符合W3C標準，采用這種方式布局通常是為了說明與HTML表格定位方式的區別。因為現在的網站設計標準中，已經不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。通過使用div盒子模型結構將各部分內容劃分到不同的區塊，然后用css來定義盒子模型的位置、大小、邊框、內外邊距、排列方式等。簡單地說，div用于搭建網站結構（框架）、css用于創建網站表現（樣式/美化）。該標準簡化了HTML頁面代碼，獲得一個較優秀的網站結構，有利于日后網站維護、協同工作和便于搜索引擎抓取。當然并不是所有的網頁都需要用div布局，例如數據頁面、報表之類的頁面，還是使用HTML的表格會比較方便，web標準里并沒有說要拋棄table。

DIV+CSS標準的優點

表現和內容相分離
代碼簡潔，提高頁面瀏覽速度
易于維護和改版
提高搜索引擎對網頁的索引效率

各個瀏覽器之間的差異

安裝多種瀏覽器,對比差異進行調試
在FF瀏覽器中安裝firebug

Firebug 為你的 Firefox 集成了瀏覽網頁的同時隨手可得的豐富開發工具。你可以對任何網頁的 CSS、HTML 和 JavaScript 進行實時編輯、調試和監控

就算在不同的瀏覽器中效果不完全一致，也要做到大概一至

“無意義”的元素div和span

HTML只是賦予內容的手段，大部分HTML標簽都有其意義（例如，標簽p創建段落，h1標簽創建標題等等）的，然而div和span標簽似乎沒有任何內容上的意義，聽起來就像一個泡沫做成的錘子一樣無用。但實際上，與CSS結合起來后，它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標簽。它們的存在純粹是應用樣式，所以當樣式表失效時它就沒有任何的作用

它們被用來組合成一大塊的HTML代碼并賦予一定的信息，大部分用類屬性class和標識屬性id與元素聯系起來。span和div的不同之處在于span是內聯的，用在一小塊的內聯HTML中。而div（division）元素是塊級的（簡單地說，它等同于其前后有斷行），用于組合一大塊的代碼，為HTML 文檔內大塊的內容提供結構和背景的元素，可以包含段落、標題、表格甚至其他部分，這使div便于建立不同集成的類。

div的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由div標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

盒子模型

每個HTML元素都可以看作一個裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。

布局中的主要樣式

font
line-height
color
margin
padding
border
text-align
background

定位屬性

區塊屬性(區塊模型)

區塊框浮動

雖然使用絕對定位可以實現頁面布局，但由于調整某個區塊框時其它區塊的位置并不會跟隨著改變，所以并不是布局的首選方式。而使用浮動的區塊框可以向左或向右移動，直到它的外邊緣碰到包含它區塊的邊框或另一個浮動框的邊框為止。并且由于浮動框不在文檔的普通流中，所以文檔的普通流中的區塊框表現得就像浮動框不存在一樣。

設置浮動

行框和清理

在進行頁面布局時，經常需要設置多個區塊框并列在一行中排列。最常見的方式就是使用float屬性，再通過left或right值移動區塊框向左或向右浮動。但當前面并列的多個區塊框總寬度不足包含框的100%時，就會在行框中留出一定的寬度，而下面的某個區塊框又恰好滿足這個寬度，則很可能會向上提，和上一行并列的區塊框在同一行排列。而這不并是我們想要的結果，所以可以使用clear屬性解決這一問題，該屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。

使用區塊框設計頁面布局

區塊居中設計

高度和寬度固定的區塊居中（position）

高度和寬度可變的區塊居中(margin)

布局頁面居中
設置兩列浮動的布局
設置三列浮動的布局
設置多列浮動的布局

著框架越來越不火了，HTML5就不對框架支持了，iframe也只有url了,Div就擔當了此大任

DIV+CSS在頁面部局確實也很讓人滿意，使用也更方便

今天突然遇到一個問題，那就是需要導入另一個頁面顯示在當前頁的Div里面

我當然可以用iFrame啥的，不過那不是我想要的方法

在網上查了半天，方法也很多，不過有不滿意的地方,因為多數都會用JQuery

呆會在下部分會給出jQuery的實現

而且因為要導入的頁面還有一些特效，而不是單純的數據，例如，我導過來的頁面樣式都要保持!

我要實現的是教你用Ajax實現,大家都知道Ajax可以異步隨時不用刷新頁面而更新數據,功能也很是強大

而且在未來HTML5上也對Ajax有了更好的支持，

下面我就教你如何使用Ajax快速達到目的:

使用源生Ajax,只需二步:

1:下載Ajaxjs文件:Ajax包下載

2:頁面導入js文件<script type="text/javascript" src="ajaxrequest.js"></script>

完成了，你已經成功邁入了阿假科思大門了

接著來完成任務吧:

細節說明:Apach / Ajax / js

頁面中添加一個目標地址:例如 <div id="des"></div>

好啦，另一個頁面的全部代碼呆會就導在這個叫des的DIV中間;我們要導入的就是頁面abc.html //用來設計模板頁很不錯哦

添加JS代碼了:

<script type="text/javascript">

var ajaxobj=new AJAXRequest; // 創建AJAX對象,類在剛剛那個文件里了

ajaxobj.method="GET"; // 設置請求方式為GET

ajaxobj.url="templat/main.html" // 響應的URL,以后可以改為一些動態處理頁,會用Ajax的都知道，這在頁里可以有目的返回不同的數據

// 設置回調函數，輸出響應內容,因為是靜態頁（這是我的需求嘛）所以所有內容都過來了

ajaxobj.callback=function(xmlobj) {

document.getElementById('des).innerHTML = xmlobj.responseText; //可要看好這句話哦

}

ajaxobj.send(); // 發送請求

</script>

到此為止，目的達成,頁面是不是完全加載進來了，右健查看源代碼，還很好的隱藏了abc的url,甚至連字都隱藏了，太神奇了,hoho

用這開發模板，不就是一個網址了嗎，連個？號都不讓看啊，就是一個字：真爽!

而且樣式也都是設好的樣式,也可以把js用function aa{}擴起來在onload(javascript：aa())自由發揮

最后說明一下:ajax還需要一些瀏覽器檢查，這里是教最快上手，我在FF火狐測試過了一切都好,而在IE可能在樣式上會出點小問題，不過門都入了，

慢慢就都會了，不是嗎

JQuery方式載入：

方式一：首先引入jquery的JS文件:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

更多jQuery內部原理見此牛貼：http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html

導入js 添加代碼了,直接寫個js函數(因為無論jquery還是Ajax都是js開發的)

<script language="javascript" type="text/javascript">

<!--

function jump(){

$("#mainBody").load("./templat/main.html",function(){ $("#mainBody").fadeIn(100);}

);

-->

</script>

直接在要觸發的地方加上onclick="jump();" 就行了,發現這個瀏覽器支持能好點

更多load用法請參閱完整說明:http://www.cnblogs.com/mslove/archive/2009/05/07/1452098.html

方式二:這個方法是使用jquery的ajax

var parames={

"type1":"paramer1","type2":"paramer2"};

$.ajax({

url:'myTest.php',

type:'post',

dataType:'html',

data:parames,

error: function(){alert('error');},

success:function(data){

$("#myDiv").html(data);

}

});

這種方式也可以，愛用哪個用哪個吧，哈哈

附：

jquery load 事件用法

如果綁定給window對象，則會在所有內容加載后觸發，包括窗口，框架，對象和圖像。如果綁定在元素上，則當元素的內容加載完畢后觸發。

注意:只有當在這個元素完全加載完之前綁定load的處理函數,才會在他加載完后觸發。如果之后再綁定就永遠不會觸發了。所以不要在$(document).ready()里綁定load事件，因為jQuery會在所有DOM加載完成后再綁定load事件。

調用load方法的完整格式是：load( url, [data], [callback] ),

其中:

url：是指要導入文件的地址。

data：可選參數；因為Load不僅僅可以導入靜態的html文件，還可以導入動態腳本，例如PHP文件，所以要導入的是動態文件時，我們可以把要傳遞的參數放在這里。callback：可選參數；是指調用load方法并得到服務器響應后，再執行的另外一個函數。

一：如何使用data

1.加載一個php文件，該php文件不含傳遞參數

$("#myID").load("test.php");

//在id為#myID的元素里導入test.php運行后的結果

2. 加載一個php文件，該php文件含有一個傳遞參數

$("#myID").load("test.php",{"name" : "Adam"});

//導入的php文件含有一個傳遞參數，類似于：test.php?name=Adam

3. 加載一個php文件，該php文件含有多個傳遞參數。注：參數間用逗號分隔

$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});

//導入的php文件含有一個傳遞參數，類似于：test.php?name=Adam&site=61dh.com

4. 加載一個php文件，該php文件以數組作為傳遞參數

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//導入的php文件含有一個數組傳遞參數。

注意：使用load，這些參數是以POST的方式傳遞的，因此在test.php里，不能用GET來獲取參數。

二：如何使用callback

比如我們要在load方法得到服務器響應后，慢慢地顯示加載的內容，就可以使用callback函數。代碼如下：

$("#go").click(function(){

$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){

$("#myID").fadeIn('slow');}

);

});

備注：

在load的url里加上空格后面就可以跟選擇器了。

例如：

$("body").load("test.html #a");

)CSS 標準盒子模型(Box Model)

在網頁中所有HTML元素可以看作盒子,在CSS中,"box model"術語是用來設計和布局時使用的;CSS盒模型本質上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區域,外邊距是透明的

1.2Border(邊框)圍繞在內邊距和內容外的邊框

1.3Padding(內邊距)清除內容周圍的區域,內邊距是透明的

1.4Content(內容)盒子里填充的內容比如文本,圖像等

標準盒子模型

寬度為100px的div

根據盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網頁內容用<div>分割為塊,之后使用css設置每個塊的大小,位置等

DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動,其值為:1)left 2)right 3)both

d2向右浮動 float:right

因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置

d2設置為右浮動其他兩個div位置的變化:

1)d1沒有脫離文檔流會占據一行,所以d2只能浮動到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動填充到d2的位置

d1,d2全部設置為右浮動

1)當d1,d2都設置為右浮動時:因為css中d1在d2上面先設置,因此d1在右側,如果d2在d1上面先設置樣式,則d2在右側,d1在左側,自己測試不再截圖

2)當d1,d2都設置為右浮動時:d3就會跑到上圖中d2的位置

3)如果3個div都設置左或右浮動,當3個width加一起<=100%就會在第一行顯示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮動,d3設置為右浮動

當d2清除了左浮動,d3設置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖

當d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設置其上下左右屬性使其定位在d1右側,自己測試

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網頁進行布局

注意:瀏覽器的兼容性問題,特別是使用IE內核的瀏覽器對W3C的規范不怎么遵守

在線咨詢

上一篇：漫畫小說影視免費看的軟件
下一篇：背景重復：提升頁面視覺效果的技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商