使用“DIV+CSS”對(duì)網(wǎng)站進(jìn)行布局符合W3C標(biāo)準(zhǔn),采用這種方式布局通常是為了說(shuō)明與HTML表格定位方式的區(qū)別。因?yàn)楝F(xiàn)在的網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中,已經(jīng)不再使用表格定位技術(shù),而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。通過(guò)使用div盒子模型結(jié)構(gòu)將各部分內(nèi)容劃分到不同的區(qū)塊,然后用css來(lái)定義盒子模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。簡(jiǎn)單地說(shuō),div用于搭建網(wǎng)站結(jié)構(gòu)(框架)、css用于創(chuàng)建網(wǎng)站表現(xiàn)(樣式/美化)。該標(biāo)準(zhǔn)簡(jiǎn)化了HTML頁(yè)面代碼,獲得一個(gè)較優(yōu)秀的網(wǎng)站結(jié)構(gòu),有利于日后網(wǎng)站維護(hù)、協(xié)同工作和便于搜索引擎抓取。當(dāng)然并不是所有的網(wǎng)頁(yè)都需要用div布局,例如數(shù)據(jù)頁(yè)面、報(bào)表之類(lèi)的頁(yè)面,還是使用HTML的表格會(huì)比較方便,web標(biāo)準(zhǔn)里并沒(méi)有說(shuō)要拋棄table。
Firebug 為你的 Firefox 集成了瀏覽網(wǎng)頁(yè)的同時(shí)隨手可得的豐富開(kāi)發(fā)工具。你可以對(duì)任何網(wǎng)頁(yè)的 CSS、HTML 和 JavaScript 進(jìn)行實(shí)時(shí)編輯、調(diào)試和監(jiān)控
就算在不同的瀏覽器中效果不完全一致,也要做到大概一至
每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子,盒子具有寬度(width)和高度(height),盒子里面的內(nèi)容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其他盒子之間,還有邊界(margin)。
布局中的主要樣式
定位屬性
區(qū)塊屬性(區(qū)塊模型)
雖然使用絕對(duì)定位可以實(shí)現(xiàn)頁(yè)面布局,但由于調(diào)整某個(gè)區(qū)塊框時(shí)其它區(qū)塊的位置并不會(huì)跟隨著改變,所以并不是布局的首選方式。而使用浮動(dòng)的區(qū)塊框可以向左或向右移動(dòng),直到它的外邊緣碰到包含它區(qū)塊的邊框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂2⑶矣捎诟?dòng)框不在文檔的普通流中,所以文檔的普通流中的區(qū)塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
設(shè)置浮動(dòng)
在進(jìn)行頁(yè)面布局時(shí),經(jīng)常需要設(shè)置多個(gè)區(qū)塊框并列在一行中排列。最常見(jiàn)的方式就是使用float屬性,再通過(guò)left或right值移動(dòng)區(qū)塊框向左或向右浮動(dòng)。但當(dāng)前面并列的多個(gè)區(qū)塊框總寬度不足包含框的100%時(shí),就會(huì)在行框中留出一定的寬度,而下面的某個(gè)區(qū)塊框又恰好滿(mǎn)足這個(gè)寬度,則很可能會(huì)向上提,和上一行并列的區(qū)塊框在同一行排列。而這不并是我們想要的結(jié)果,所以可以使用clear屬性解決這一問(wèn)題,該屬性的值可以是 left、right、both 或 none,它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。
高度和寬度固定的區(qū)塊居中(position)
高度和寬度可變的區(qū)塊居中(margin)
著框架越來(lái)越不火了,HTML5就不對(duì)框架支持了,iframe也只有url了,Div就擔(dān)當(dāng)了此大任
DIV+CSS在頁(yè)面部局確實(shí)也很讓人滿(mǎn)意,使用也更方便
今天突然遇到一個(gè)問(wèn)題,那就是需要導(dǎo)入另一個(gè)頁(yè)面顯示在當(dāng)前頁(yè)的Div里面
我當(dāng)然可以用iFrame啥的,不過(guò)那不是我想要的方法
在網(wǎng)上查了半天,方法也很多,不過(guò)有不滿(mǎn)意的地方,因?yàn)槎鄶?shù)都會(huì)用JQuery
呆會(huì)在下部分會(huì)給出jQuery的實(shí)現(xiàn)
而且因?yàn)橐獙?dǎo)入的頁(yè)面還有一些特效,而不是單純的數(shù)據(jù),例如,我導(dǎo)過(guò)來(lái)的頁(yè)面樣式都要保持!
我要實(shí)現(xiàn)的是教你用Ajax實(shí)現(xiàn),大家都知道Ajax可以異步隨時(shí)不用刷新頁(yè)面而更新數(shù)據(jù),功能也很是強(qiáng)大
而且在未來(lái)HTML5上也對(duì)Ajax有了更好的支持,
下面我就教你如何使用Ajax快速達(dá)到目的:
使用源生Ajax,只需二步:
1:下載Ajaxjs文件:Ajax包下載
2:頁(yè)面導(dǎo)入js文件<script type="text/javascript" src="ajaxrequest.js"></script>
完成了,你已經(jīng)成功邁入了阿假科思大門(mén)了
接著來(lái)完成任務(wù)吧:
細(xì)節(jié)說(shuō)明:Apach / Ajax / js
頁(yè)面中添加一個(gè)目標(biāo)地址:例如 <div id="des"></div>
好啦,另一個(gè)頁(yè)面的全部代碼呆會(huì)就導(dǎo)在這個(gè)叫des的DIV中間;我們要導(dǎo)入的就是頁(yè)面abc.html //用來(lái)設(shè)計(jì)模板頁(yè)很不錯(cuò)哦
添加JS代碼了:
<script type="text/javascript">
var ajaxobj=new AJAXRequest; // 創(chuàng)建AJAX對(duì)象,類(lèi)在剛剛那個(gè)文件里了
ajaxobj.method="GET"; // 設(shè)置請(qǐng)求方式為GET
ajaxobj.url="templat/main.html" // 響應(yīng)的URL,以后可以改為一些動(dòng)態(tài)處理頁(yè),會(huì)用Ajax的都知道,這在頁(yè)里可以有目的返回不同的數(shù)據(jù)
// 設(shè)置回調(diào)函數(shù),輸出響應(yīng)內(nèi)容,因?yàn)槭庆o態(tài)頁(yè)(這是我的需求嘛)所以所有內(nèi)容都過(guò)來(lái)了
ajaxobj.callback=function(xmlobj) {
document.getElementById('des).innerHTML = xmlobj.responseText; //可要看好這句話(huà)哦
}
ajaxobj.send(); // 發(fā)送請(qǐng)求
</script>
到此為止,目的達(dá)成,頁(yè)面是不是完全加載進(jìn)來(lái)了,右健查看源代碼,還很好的隱藏了abc的url,甚至連字都隱藏了,太神奇了,hoho
用這開(kāi)發(fā)模板,不就是一個(gè)網(wǎng)址了嗎,連個(gè)?號(hào)都不讓看啊,就是一個(gè)字:真爽!
而且樣式也都是設(shè)好的樣式,也可以把js用function aa{}擴(kuò)起來(lái)在onload(javascript:aa())自由發(fā)揮
最后說(shuō)明一下:ajax還需要一些瀏覽器檢查,這里是教最快上手,我在FF火狐測(cè)試過(guò)了一切都好,而在IE可能在樣式上會(huì)出點(diǎn)小問(wèn)題,不過(guò)門(mén)都入了,
慢慢就都會(huì)了,不是嗎
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)部原理見(jiàn)此牛貼:http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html
導(dǎo)入js 添加代碼了,直接寫(xiě)個(gè)js函數(shù)(因?yàn)闊o(wú)論jquery還是Ajax都是js開(kāi)發(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)這個(gè)瀏覽器支持能好點(diǎn)
更多l(xiāng)oad用法請(qǐng)參閱完整說(shuō)明:http://www.cnblogs.com/mslove/archive/2009/05/07/1452098.html
方式二:這個(gè)方法是使用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);
}
});
這種方式也可以,愛(ài)用哪個(gè)用哪個(gè)吧,哈哈
附:
如果綁定給window對(duì)象,則會(huì)在所有內(nèi)容加載后觸發(fā),包括窗口,框架,對(duì)象和圖像。如果綁定在元素上,則當(dāng)元素的內(nèi)容加載完畢后觸發(fā)。
注意:只有當(dāng)在這個(gè)元素完全加載完之前綁定load的處理函數(shù),才會(huì)在他加載完后觸發(fā)。如果之后再綁定就永遠(yuǎn)不會(huì)觸發(fā)了。所以不要在$(document).ready()里綁定load事件,因?yàn)閖Query會(huì)在所有DOM加載完成后再綁定load事件。
調(diào)用load方法的完整格式是:load( url, [data], [callback] ),
其中:
url:是指要導(dǎo)入文件的地址。
data:可選參數(shù);因?yàn)長(zhǎng)oad不僅僅可以導(dǎo)入靜態(tài)的html文件,還可以導(dǎo)入動(dòng)態(tài)腳本,例如PHP文件,所以要導(dǎo)入的是動(dòng)態(tài)文件時(shí),我們可以把要傳遞的參數(shù)放在這里。callback:可選參數(shù);是指調(diào)用load方法并得到服務(wù)器響應(yīng)后,再執(zhí)行的另外一個(gè)函數(shù)。
一:如何使用data
1.加載一個(gè)php文件,該php文件不含傳遞參數(shù)
$("#myID").load("test.php");
//在id為#myID的元素里導(dǎo)入test.php運(yùn)行后的結(jié)果
2. 加載一個(gè)php文件,該php文件含有一個(gè)傳遞參數(shù)
$("#myID").load("test.php",{"name" : "Adam"});
//導(dǎo)入的php文件含有一個(gè)傳遞參數(shù),類(lèi)似于:test.php?name=Adam
3. 加載一個(gè)php文件,該php文件含有多個(gè)傳遞參數(shù)。注:參數(shù)間用逗號(hào)分隔
$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});
//導(dǎo)入的php文件含有一個(gè)傳遞參數(shù),類(lèi)似于:test.php?name=Adam&site=61dh.com
4. 加載一個(gè)php文件,該php文件以數(shù)組作為傳遞參數(shù)
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});
//導(dǎo)入的php文件含有一個(gè)數(shù)組傳遞參數(shù)。
注意:使用load,這些參數(shù)是以POST的方式傳遞的,因此在test.php里,不能用GET來(lái)獲取參數(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)頁(yè)中所有HTML元素可以看作盒子,在CSS中,"box model"術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用的;CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周?chē)腍TML元素包括:外邊距(margin)邊框(border)內(nèi)邊距(padding)實(shí)際內(nèi)容(content)四個(gè)屬性,所以布局時(shí)每個(gè)元素所占的總寬高是這4個(gè)屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
1.1Margin(外邊距)清除邊框外的區(qū)域,外邊距是透明的
1.2Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框
1.3Padding(內(nèi)邊距)清除內(nèi)容周?chē)膮^(qū)域,內(nèi)邊距是透明的
1.4Content(內(nèi)容)盒子里填充的內(nèi)容比如文本,圖像等
標(biāo)準(zhǔn)盒子模型
寬度為100px的div
根據(jù)盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個(gè)寬度為100px的元素,此元素的總寬度必須小于等于100px
2)DIV+CSS布局
Div+CSS布局就是將網(wǎng)頁(yè)內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個(gè)塊的大小,位置等
DIV+CSS布局最重要的是靈活運(yùn)用float(浮動(dòng))屬性,其值:1)left 2)right 3)both
clear屬性作用是清除浮動(dòng),其值為:1)left 2)right 3)both
d2向右浮動(dòng) float:right
因?yàn)閐iv是塊級(jí)元素,如果都沒(méi)有脫離文檔流div就會(huì)按照從上到下的順序放置
d2設(shè)置為右浮動(dòng)其他兩個(gè)div位置的變化:
1)d1沒(méi)有脫離文檔流會(huì)占據(jù)一行,所以d2只能浮動(dòng)到d1下面的右面如上圖所示
2)d2脫離文檔流,d3自動(dòng)填充到d2的位置
d1,d2全部設(shè)置為右浮動(dòng)
1)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):因?yàn)閏ss中d1在d2上面先設(shè)置,因此d1在右側(cè),如果d2在d1上面先設(shè)置樣式,則d2在右側(cè),d1在左側(cè),自己測(cè)試不再截圖
2)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):d3就會(huì)跑到上圖中d2的位置
3)如果3個(gè)div都設(shè)置左或右浮動(dòng),當(dāng)3個(gè)width加一起<=100%就會(huì)在第一行顯示(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清除左浮動(dòng),d3設(shè)置為右浮動(dòng)
當(dāng)d2清除了左浮動(dòng),d3設(shè)置為右浮動(dòng),就會(huì)如上圖所示;如果d2清除的是右浮動(dòng),d2就會(huì)在d1上面,d3就會(huì)定位在d1下面的右面,自己測(cè)試不再截圖
當(dāng)d2清除了左浮動(dòng),如果想要d2緊挨著d1(與d1在一行上),可以通過(guò)position脫離文檔流設(shè)置其上下左右屬性使其定位在d1右側(cè),自己測(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布局綜合運(yùn)用position+上下左右屬性與float屬性為網(wǎng)頁(yè)進(jìn)行布局
注意:瀏覽器的兼容性問(wèn)題,特別是使用IE內(nèi)核的瀏覽器對(duì)W3C的規(guī)范不怎么遵守
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。