CSS布局基礎(chǔ)Css盒子模型Css塊狀布局1精選完整ppt課件Css盒子CSS盒子是指具備內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，屬性的模式。在CSS中所有的頁面元素都可以看做“盒子”，一張網(wǎng)頁就是由若干個盒子和盒子嵌套組成的。2精選完整ppt課件3精選完整ppt課件Css盒子4精選完整ppt課件5精選完整ppt課件HTML的元素類型塊元素（block）是作為內(nèi)容的獨特塊而顯示的元素，它以新行開始和結(jié)束。<p><li><ul><div><table><br><h1>…<h6>內(nèi)聯(lián)元素（inline）內(nèi)聯(lián)元素沒有開始行和結(jié)束行，在某一行中逐個出現(xiàn)，沒有換行，水平放置在頁面中。<img><a><input>6精選完整ppt課件Css布局常用屬性---display屬性使用該屬性可以改變頁面元素的值。None:不顯示任何內(nèi)容Block：將元素指定為塊元素Inline：將元素指定為內(nèi)聯(lián)元素7精選完整ppt課件Css布局常用屬性---position屬性使用該屬性可以定位網(wǎng)頁元素。static:靜態(tài)定位，定位屬性的默認值，元素按照html語法規(guī)則的自然屬性定位。relative：相對定位（先對于頁面的自然定位而言），具體位置由top、bottom、left、right屬性聯(lián)合制定。fixed：將元素按照瀏覽器窗口的左上角（或右下角）進行固定定位，具體位置由top、bottom、left、right屬性聯(lián)合制定。當(dāng)用戶滾動頁面時，內(nèi)容在此位置固定。Absolute：絕對定位，將元素定位到網(wǎng)頁中的任何區(qū)域，具體位置由top、bottom、left、right屬性聯(lián)合制定。8精選完整ppt課件Css布局常用屬性---float屬性用于控制對象的浮動方式。none:靜態(tài)定位，定位屬性的默認值，元素按照html語法規(guī)則的自然屬性定位。left：左浮動（先對于頁面的自然定位而言），具體位置由top、bottom、left、right屬性聯(lián)合制定。right：右浮動9精選完整ppt課件DIV+CSS布局設(shè)計思路1.用div來定義語義結(jié)構(gòu)，放置具體內(nèi)容；2.用css來布局div和美化div內(nèi)部的內(nèi)容和外部樣式。10精選完整ppt課件Css盒子實例電子相冊導(dǎo)航條頁面布局11精選完整ppt課件Css盒子實例—電子相冊12精選完整ppt課件13精選完整ppt課件14精選完整ppt課件定義盛放圖片的盒子div.box{margin:10px;border:1pxdotted#0000ff;padding-top:20px;padding-left:20px;height:120px;width:120px;float:right} 15精選完整ppt課件定義盛放文字的盒子div.desc{text-align:center;font-weight:normal;width:120px;margin:2px;}16精選完整ppt課件Css盒子實例—導(dǎo)航條17精選完整ppt課件導(dǎo)航條的盒子布局最外邊一個大盒子(ul)，這個盒子與1像素高的背景圖片等寬；里面又有五個小盒子(li)分別裝著每一個導(dǎo)航欄，導(dǎo)航欄這個盒子里面又裝著一個稍小的盒子(a)；這個盒子又裝著一個黃色的修飾盒子(a的左邊框，這里勉強理解為盒子，因為它不像一般的邊框那么細，在網(wǎng)頁中看起來像個盒子)和一個有文字的鏈接盒子(a的內(nèi)容)。

18精選完整ppt課件19精選完整ppt課件Css盒子實例—布局網(wǎng)頁20精選完整ppt課件21精選完整ppt課件22精選完整ppt課件定義四個盒子23精選完整ppt課件最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁面居中，并重定義其寬度為760像素，同時加上邊框，那么它的樣式是：body{

font-family:Arial,Helvetica,sans-serif;

font-size:12px;

margin:0pxauto;

height:auto;

width:760px;

border:1pxsolid#006633;

}24精選完整ppt課件定義頁頭盒子#header{

height:100px;

width:760px;

background-image:url(headPic.gif);

background-repeat:no-repeat;

margin:0px0px3px0px;

}25精選完整ppt課件定義導(dǎo)航盒子#nav{

height:25px;

width:760px;

font-size:14px;

list-style-type:none;

}

#navli{

float:left;

}

#navlia{

color:#000000;

text-decoration:none;

padding-top:4px;

display:block;

width:97px;

height:22px;

text-align:center;

background-color:#009966;

margin-left:2px;

}

#navlia:hover{

background-color:#006633;

color:#FFFFFF;

}26精選完整ppt課件內(nèi)容盒子#content{

height:auto;

width:740px;

line-height:1.5em;

padding:10px;

}

#contentp{

text-indent:2em;

}

#contenth3{

font-size:16px;

margin:10px;27精選完整ppt課件頁腳盒子