DIV+CSS標(biāo)準(zhǔn)化網(wǎng)頁布局

IV+CSS標(biāo)準(zhǔn)化布局的優(yōu)勢

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

DIV+CSS標(biāo)準(zhǔn)的優(yōu)點

表現(xiàn)和內(nèi)容相分離
代碼簡潔，提高頁面瀏覽速度
易于維護和改版
提高搜索引擎對網(wǎng)頁的索引效率

各個瀏覽器之間的差異

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

Firebug 為你的 Firefox 集成了瀏覽網(wǎng)頁的同時隨手可得的豐富開發(fā)工具。你可以對任何網(wǎng)頁的 CSS、HTML 和 JavaScript 進行實時編輯、調(diào)試和監(jiān)控

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

“無意義”的元素div和span

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

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

div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的，其中所包含元素的特性由div標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

盒子模型

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

布局中的主要樣式

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

定位屬性

區(qū)塊屬性(區(qū)塊模型)

區(qū)塊框浮動

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

設(shè)置浮動

行框和清理

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

使用區(qū)塊框設(shè)計頁面布局

區(qū)塊居中設(shè)計

高度和寬度固定的區(qū)塊居中（position）

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

布局頁面居中
設(shè)置兩列浮動的布局
設(shè)置三列浮動的布局
設(shè)置多列浮動的布局

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

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

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

我當(dāng)然可以用iFrame啥的，不過那不是我想要的方法

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

呆會在下部分會給出jQuery的實現(xiàn)

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

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

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

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

使用源生Ajax,只需二步:

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

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

完成了，你已經(jīng)成功邁入了阿假科思大門了

接著來完成任務(wù)吧:

細節(jié)說明:Apach / Ajax / js

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

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

添加JS代碼了:

<script type="text/javascript">

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

ajaxobj.method="GET"; // 設(shè)置請求方式為GET

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

// 設(shè)置回調(diào)函數(shù)，輸出響應(yīng)內(nèi)容,因為是靜態(tài)頁（這是我的需求嘛）所以所有內(nèi)容都過來了

ajaxobj.callback=function(xmlobj) {

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

}

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

</script>

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

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

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

最后說明一下: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內(nèi)部原理見此牛貼：http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html

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

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

<!--

function jump(){

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

);

-->

</script>

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

更多l(xiāng)oad用法請參閱完整說明: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對象，則會在所有內(nèi)容加載后觸發(fā)，包括窗口，框架，對象和圖像。如果綁定在元素上，則當(dāng)元素的內(nèi)容加載完畢后觸發(fā)。

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

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

其中:

url：是指要導(dǎo)入文件的地址。

data：可選參數(shù)；因為Load不僅僅可以導(dǎo)入靜態(tài)的html文件，還可以導(dǎo)入動態(tài)腳本，例如PHP文件，所以要導(dǎo)入的是動態(tài)文件時，我們可以把要傳遞的參數(shù)放在這里。callback：可選參數(shù)；是指調(diào)用load方法并得到服務(wù)器響應(yīng)后，再執(zhí)行的另外一個函數(shù)。

一：如何使用data

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

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

//在id為#myID的元素里導(dǎo)入test.php運行后的結(jié)果

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

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

//導(dǎo)入的php文件含有一個傳遞參數(shù)，類似于：test.php?name=Adam

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

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

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

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

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

//導(dǎo)入的php文件含有一個數(shù)組傳遞參數(shù)。

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

二：如何使用callback

比如我們要在load方法得到服務(wù)器響應(yīng)后，慢慢地顯示加載的內(nèi)容，就可以使用callback函數(shù)。代碼如下：

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

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

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

);

});

備注：

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

例如：

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

)CSS 標(biāo)準(zhǔn)盒子模型(Box Model)

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

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

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

1.3Padding(內(nèi)邊距)清除內(nèi)容周圍的區(qū)域,內(nèi)邊距是透明的

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

標(biāo)準(zhǔn)盒子模型

寬度為100px的div

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

2)DIV+CSS布局

Div+CSS布局就是將網(wǎng)頁內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個塊的大小,位置等

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

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

d2向右浮動 float:right

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

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

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

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

d1,d2全部設(shè)置為右浮動

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

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

3)如果3個div都設(shè)置左或右浮動,當(dāng)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設(shè)置為右浮動

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

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

<!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屬性為網(wǎng)頁進行布局

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

在線咨詢

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

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商