網(wǎng)頁設(shè)計(jì) CSS盒子-文檔資料

1、1CSS布局基礎(chǔ)Css盒子模型Css塊狀布局2Css盒子 CSS盒子是指具備內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， 屬性的模式。 在CSS中所有的頁面元素都可以看做“盒子”，一張網(wǎng)頁就是由若干個(gè)盒子和盒子嵌套組成的。 34Css盒子56HTML的元素類型 塊元素（block） 是作為內(nèi)容的獨(dú)特塊而顯示的元素，它以新行開始和結(jié)束。 內(nèi)聯(lián)元素（inline） 內(nèi)聯(lián)元素沒有開始行和結(jié)束行，在某一行中逐個(gè)出現(xiàn)，沒有換行，水平放置在頁面中。 7Css布局常用屬性-display屬性 使用該屬性可以改變頁面元素的值。 None:不顯示任何內(nèi)容 Bloc

2、k：將元素指定為塊元素 Inline：將元素指定為內(nèi)聯(lián)元素8Css布局常用屬性-position屬性 使用該屬性可以定位網(wǎng)頁元素。 static:靜態(tài)定位，定位屬性的默認(rèn)值，元素按照html語法規(guī)則的自然屬性定位。 relative：相對(duì)定位（先對(duì)于頁面的自然定位而言），具體位置由top、bottom、left、right屬性聯(lián)合制定。 fixed：將元素按照瀏覽器窗口的左上角（或右下角）進(jìn)行固定定位，具體位置由top、bottom、left、right屬性聯(lián)合制定。當(dāng)用戶滾動(dòng)頁面時(shí)，內(nèi)容在此位置固定。 Absolute：絕對(duì)定位，將元素定位到網(wǎng)頁中的任何區(qū)域，具體位置由top、bottom、

3、left、right屬性聯(lián)合制定。9Css布局常用屬性-float屬性 用于控制對(duì)象的浮動(dòng)方式。 none:靜態(tài)定位，定位屬性的默認(rèn)值，元素按照html語法規(guī)則的自然屬性定位。 left：左浮動(dòng)（先對(duì)于頁面的自然定位而言），具體位置由top、bottom、left、right屬性聯(lián)合制定。 right：右浮動(dòng)10DIV+CSS布局設(shè)計(jì)思路 1.用div來定義語義結(jié)構(gòu)，放置具體內(nèi)容； 2.用css來布局div和美化div內(nèi)部的內(nèi)容和外部樣式。11Css盒子實(shí)例 電子相冊(cè) 導(dǎo)航條 頁面布局12Css盒子實(shí)例電子相冊(cè)131415定義盛放圖片的盒子 div.box margin: 10px; bord

4、er: 1px dotted #0000ff; padding-top:20px; padding-left:20px; height:120px; width: 120px; float:right 16定義盛放文字的盒子 div.desc text-align: center; font-weight: normal; width: 120px; margin: 2px; 17Css盒子實(shí)例導(dǎo)航條18導(dǎo)航條的 盒子布局 最外邊一個(gè)大盒子(ul)，這個(gè)盒子與1像素高的背景圖片等寬； 里面又有五個(gè)小盒子(li)分別裝著每一個(gè)導(dǎo)航欄， 導(dǎo)航欄這個(gè)盒子里面又裝著一個(gè)稍小的盒子(a)； 這個(gè)盒子又裝

5、著一個(gè)黃色的修飾盒子(a的左邊框，這里勉強(qiáng)理解為盒子，因?yàn)樗幌褚话愕倪吙蚰敲醇?xì)，在網(wǎng)頁中看起來像個(gè)盒子)和一個(gè)有文字的鏈接盒子(a的內(nèi)容)。1920Css盒子實(shí)例布局網(wǎng)頁212223 定義四個(gè)盒子24 最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁面居中，并重定義其寬度為760像素，同時(shí)加上邊框，那么它的樣式是： body font-family: Arial, Helvetica, sans-serif;font-size: 12px;margin: 0px auto;height: auto;width: 760px;border: 1px solid #006633;25定義頁頭盒

6、子 #header height: 100px;width: 760px;background-image: url(headPic.gif);background-repeat: no-repeat;margin:0px 0px 3px 0px; 26定義導(dǎo)航盒子#nav height: 25px;width: 760px;font-size: 14px;list-style-type: none;#nav li float:left;#nav li acolor:#000000;text-decoration:none;padding-top:4px;display:block;width:97px;height:22px;text-align:center;background-color: #009966;margin-left:2px;#nav li a:hoverbackground-color:#006633;color:#FFFFFF;27內(nèi)容盒子 #content height:auto;width: 740px;line-height: 1.5em;padding: 10px;#content p text-indent: 2em;#content h3 font-size: 16px;margin: 10px;28頁腳盒子 #