div css布局ppt下載

素材大�。�: 1 MB

素材授權(quán)：: 免費(fèi)下載

素材格式：: .ppt

素材上傳：: lipeier

上傳時(shí)間：: 2020-02-13

素材編號(hào)：: 251008

素材類別：: 課件PPT

素材預(yù)覽

這是div css布局ppt，包括了盒子模型，布局技術(shù)，“上中下”布局，“左中右”布局等內(nèi)容，歡迎點(diǎn)擊下載。

div css布局ppt是由紅軟PPT免費(fèi)下載網(wǎng)推薦的一款課件PPT類型的PowerPoint.

第8章 CSS+Div布局網(wǎng)頁(yè)設(shè)計(jì)與制作 Dreamweaver CC 標(biāo)準(zhǔn)教程本章學(xué)習(xí)的主要內(nèi)容： 1. 盒子模型 2. 布局技術(shù) 3. “上中下”布局 4. “左中右”布局 8.1 盒子模型盒子模型是CSS樣式布局的重要概念。網(wǎng)頁(yè)中元素都占據(jù)一定的空間，除了元素內(nèi)容之外還包括元素周圍的空間，一般地把元素和它周圍空間所形成的矩形區(qū)域稱為盒子（box）。從布局的角度看，網(wǎng)頁(yè)是由很多盒子組成，根據(jù)需要將諸多盒子在網(wǎng)頁(yè)中進(jìn)行排列和分布，就形成了網(wǎng)頁(yè)布局。 8.1 盒子模型 8.1.1 盒子結(jié)構(gòu) 8.1.2 盒子屬性 8.1.1 盒子結(jié)構(gòu) 盒子模型通過定義模型結(jié)構(gòu)，描述網(wǎng)頁(yè)元素的顯示方式和元素之間的相互關(guān)系，確定網(wǎng)頁(yè)元素在網(wǎng)頁(yè)布局中的空間和位置。 8.1.1 盒子結(jié)構(gòu) 8.1.2 盒子屬性在CSS樣式中，將盒子模型的內(nèi)邊距、邊框和外邊距，按top、bottom、left、right的四個(gè)方向，分別進(jìn)行定義和設(shè)置，描述盒子屬性。 8.1.2 盒子屬性例如，在網(wǎng)頁(yè)中創(chuàng)建一個(gè)ou9紅軟基地

標(biāo)簽，ID標(biāo)識(shí)為Div1，并在其中插入一個(gè)圖像，代碼如下： 8.1.2 盒子屬性 8.2 布局方法在CSS+Div布局中，

標(biāo)簽是盒子模型的主要載體，具有分割網(wǎng)頁(yè)的功能。 CSS樣式中的position屬性和float屬性決定這些

標(biāo)簽的相互關(guān)系和分布排列的位置。 8.2 布局技術(shù) 8.2.1

標(biāo)簽 8.2.2 position定位屬性 8.2.3 浮動(dòng)方式 8.2.1

標(biāo)簽

一個(gè)塊狀容器類標(biāo)簽，即在

和

之間可以容納各種HTML元素，同時(shí)也構(gòu)成一個(gè)獨(dú)立的矩形區(qū)域。無論在頁(yè)面中使用多少個(gè)標(biāo)簽，

標(biāo)簽之間僅存在并列關(guān)系和內(nèi)嵌關(guān)系。 8.2.1

標(biāo)簽 8.2.1

標(biāo)簽 8.2.2 position定位屬性 position（定位）屬性包括了四種屬性值：static，relative，absolute和fixed. Static靜態(tài)定位為默認(rèn)值，網(wǎng)頁(yè)元素遵循HTML的標(biāo)準(zhǔn)定位規(guī)則，即網(wǎng)頁(yè)各種元素按照“前后相繼”的順序進(jìn)行排列和分布。 Relative相對(duì)定位，網(wǎng)頁(yè)元素也遵循HTML的標(biāo)準(zhǔn)定位規(guī)則，但需要為網(wǎng)頁(yè)元素相對(duì)于原始的標(biāo)準(zhǔn)位置設(shè)置一定的偏移距離。 CSS+Div的布局方式采用了標(biāo)準(zhǔn)定位規(guī)則的布局方式，這也是系統(tǒng)的默認(rèn)方式。 8.2.2 position定位屬性 absolute絕對(duì)定位方式，網(wǎng)頁(yè)元素不再遵循HTML的標(biāo)準(zhǔn)定位規(guī)則，脫離了“前后相繼”的定位關(guān)系，以該元素的上級(jí)元素為基準(zhǔn)設(shè)置偏移量進(jìn)行定位。 Fixed固定定位與絕對(duì)定位類似，也脫離了“前后相繼”的定位規(guī)則，但元素的定位是以瀏覽器窗口為基準(zhǔn)進(jìn)行。 8.2.3 浮動(dòng)方式 float屬性包含三個(gè)屬性值：Left控制網(wǎng)頁(yè)元素向左浮動(dòng)，Right控制網(wǎng)頁(yè)元素向浮右動(dòng)，None沒有浮動(dòng)。 clear屬性包括三個(gè)屬性值：left清除向左浮動(dòng)，right清除向浮右動(dòng)，none沒有清除。 clear屬性與float屬性配合使用，清除各種浮動(dòng)。 8.2.3 浮動(dòng)方式無浮動(dòng) 8.2.3 浮動(dòng)方式 8.2.3 浮動(dòng)方式左右浮動(dòng) 8.2.3 浮動(dòng)方式 8.2.3 浮動(dòng)方式全部左浮動(dòng) 8.2.3 浮動(dòng)方式 8.2.3 浮動(dòng)方式使用左清除 8.2.3 浮動(dòng)方式 8.3 “上中下”布局在“上中下”布局中，

標(biāo)簽按照前后相繼的順序排列，分割網(wǎng)頁(yè)空間，不需要使

標(biāo)簽浮動(dòng)，其大小和外觀由CSS樣式控制。 8.3 “上中下”布局 8.3.1 課堂案例-網(wǎng)頁(yè)設(shè)計(jì)大賽 8.3.2 在Dreamweaver中插入

標(biāo)簽 8.3.1課堂案例-網(wǎng)頁(yè)設(shè)計(jì)大賽案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)“上中下”布局的方法。案例知識(shí)要點(diǎn)：在【插入】面板【HTML】選項(xiàng)卡中，使用【Div】按鈕創(chuàng)建網(wǎng)頁(yè)布局結(jié)構(gòu)；在【CSS設(shè)計(jì)器】面板中，使用【添加選擇器】按鈕創(chuàng)建

標(biāo)簽的ID樣式，并采用缺省的【position】和【float】屬性，完成“上中下”的布局。素材所在位置：光盤/案例素材/ch08/課堂案例-網(wǎng)頁(yè)設(shè)計(jì)大賽。案例布局要求如圖8-9所示，案例效果如圖8-10所示。 8.3.2 在Dreamweaver中插入

標(biāo)簽在【插入Div標(biāo)簽】對(duì)話框中，各個(gè)選項(xiàng)含義如下：【ID】：可以在下拉框中直接輸入或選擇一個(gè)名稱，為

標(biāo)簽設(shè)置網(wǎng)頁(yè)中的唯一標(biāo)識(shí)。【類】：可以在下拉框中直接輸入或選擇一個(gè)名稱，為

標(biāo)簽設(shè)置一個(gè)類樣式，設(shè)置網(wǎng)頁(yè)布局和外觀。【新建CSS規(guī)則】：為

標(biāo)簽新建一個(gè)ID樣式或類樣式。【插入】：其各種選項(xiàng)決定了

標(biāo)簽之間是并列關(guān)系還是嵌入關(guān)系，其選項(xiàng)包括： 8.3.2 在Dreamweaver中插入

標(biāo)簽 “在插入點(diǎn)”表示在插入點(diǎn)插入一個(gè)

標(biāo)簽，嵌入已經(jīng)存在的

標(biāo)簽中，如果插入點(diǎn)前有內(nèi)容，那么換行插入。 “在選定內(nèi)容旁換行”表示在該文字所在行插入一個(gè)

標(biāo)簽，嵌入已經(jīng)存在的

標(biāo)簽中，保留原內(nèi)容。 “在標(biāo)簽之前”表示插入一個(gè)

標(biāo)簽，與指定的

標(biāo)簽形成并列關(guān)系。 “在標(biāo)簽之后”表示插入一個(gè)

標(biāo)簽，與指定的

標(biāo)簽形成并列關(guān)系。 8.3.2 在Dreamweaver中插入

標(biāo)簽 “在開始標(biāo)簽之前”表示在標(biāo)簽之前，插入一個(gè)

標(biāo)簽。 “在開始標(biāo)簽之后”表示在標(biāo)簽之前，插入一個(gè)

標(biāo)簽。 “在開始標(biāo)簽之后”表示在標(biāo)簽之后，插入一個(gè)

標(biāo)簽。 8.4 “左中右”布局在“左中右”布局中，首先插入若干個(gè)

標(biāo)簽，并按照前后相繼順序排列；然后，設(shè)置CSS樣式的【float】和【clear】屬性，使

標(biāo)簽浮動(dòng)，實(shí)現(xiàn)“左中右”的布局；最后，設(shè)置CSS樣式其他屬性控制

標(biāo)簽的外觀。 8.4 “左中右”布局 8.4.1 課堂案例-連鎖餐廳 8.4.2 使用CSS樣式布局 8.4.1課堂案例-連鎖餐廳案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)“左中右”布局的方法。案例知識(shí)要點(diǎn)：在【插入】面板【HTML】選項(xiàng)卡中，使用【Div】按鈕，插入

標(biāo)簽；在【插入Div】對(duì)話框中，使用【新建CSS規(guī)則】按鈕，創(chuàng)建

標(biāo)簽的相關(guān)樣式，設(shè)置【position】、【float】和【clear】屬性，完成“左中右”的網(wǎng)頁(yè)布局。素材所在位置：光盤/案例素材/ch08/課堂案例-連鎖餐廳。案例布局要求如圖8-38所示，案例效果如圖8-39所示。 8.4.2 使用CSS樣式布局 1. 在Dreamweaver中

標(biāo)簽的浮動(dòng)設(shè)置 2. 常用布局形式在CSS+Div布局中，將網(wǎng)頁(yè)版面分割成左側(cè)，中部和右側(cè)三個(gè)部分的形式。將網(wǎng)頁(yè)分割成左右兩個(gè)部分。 8.4.2 使用CSS樣式布局 8.4.2 使用CSS樣式布局 8.4.2 使用CSS樣式布局 8.5 練習(xí)案例 8.5.1 練習(xí)案例-電子產(chǎn)品 8.5.2 練習(xí)案例-裝修公司 8.5.1練習(xí)案例-電子產(chǎn)品案例練習(xí)目標(biāo)：練習(xí)“上中下”布局的方法。案例操作要點(diǎn)： 1．創(chuàng)建文件名稱為index.html的文檔，并將所有樣式存放在product樣式文檔中。插入ID名稱為container的

標(biāo)簽，寬度為1000px，并居中對(duì)齊。 2．在container的

標(biāo)簽中，插入ID名稱為header，menu，banner，info和footer的5個(gè)

標(biāo)簽，寬度均為1000px，高度分別為38px，34px，468px，165px和64px。 3．在menu的

標(biāo)簽中，插入名稱為nav的

標(biāo)簽，寬度450px，高度34px，左外邊距550px。 8.5.1 練習(xí)案例-電子產(chǎn)品 4．利用#menu樣式為menu的

標(biāo)簽添加圖像背景。在#nav標(biāo)簽中，輸入文字“公司介紹產(chǎn)品展示客戶服務(wù) 人員招募互動(dòng)社區(qū)”，并設(shè)置#nav樣式，字體大小為16px，行高度為30px，顏色為#FFF。 5．設(shè)置#nav a:link，#nav a:visited樣式屬性，顏色為#FFF，文字裝飾為無，設(shè)置#nav a:hover樣式屬性，文字裝飾為下劃線，完成導(dǎo)航條的制作。 6．在ID名稱為info的

標(biāo)簽中，插入1*3表格，寬度為100%，將三個(gè)圖像分別插入到單元格中，設(shè)置#info樣式背景為黑色。素材所在位置：光盤/案例素材/ch08/練習(xí)案例-電子產(chǎn)品。案例布局要求如圖8-67所示，案例效果如圖8-68所示。 8.5.2 練習(xí)案例-裝修公司案例練習(xí)目標(biāo)：練習(xí)“左中右”布局的方法。案例操作要點(diǎn)： 1．創(chuàng)建文件名稱為index.html的新文檔，并將所有樣式存放在decoration樣式文檔中。插入ID名稱為container的

標(biāo)簽，寬度為1000px，高度為860px，并居中對(duì)齊。 2．在container的

標(biāo)簽中，插入ID名稱為menu，info1，info2，info3和footer的5個(gè)

標(biāo)簽，寬度和高度分別為1000px和107px，160px和670px，320px和670px，310px和670px，1000px和83px。其中ID名稱為info1，info2，info3的

標(biāo)簽為左浮動(dòng)，ID名稱為footer的

標(biāo)簽取消左浮動(dòng)。 8.5.2練習(xí)案例-裝修公司 3．在footer標(biāo)簽中，插入兩個(gè)

標(biāo)簽，其類樣式名稱為.f1和.f2，其寬度分別為580px和280px，并設(shè)置它們?yōu)樽蟾?dòng)。 4．設(shè)置頁(yè)面屬性的背景為#CCC，邊距為為0，字體大小為12px，文字顏色為#999。設(shè)置#container樣式的背景為白色。 5．標(biāo)題樣式.text1，文本大小為30px，顏色為#451B08，左對(duì)齊；副標(biāo)題樣式.text2，文本大小為18px；職位標(biāo)題文本樣式.text3，文本大小14px，下部?jī)?nèi)邊距5px，下部邊框?yàn)閷?shí)線，寬度為1px，顏色為#999。 8.5.2 練習(xí)案例-裝修公司 6．設(shè)置#info1樣式的左右內(nèi)邊距分別為85px；#info2樣式的左右內(nèi)邊距為10px；#info3樣式的左右內(nèi)邊距分別為10px，上部?jī)?nèi)邊距為10px；.f1樣式的上部和左側(cè)外邊距分別為20px和60px；.f2樣式的上部和左側(cè)外邊距分別為30px和60px，字體為黑體，大小為20px，顏色為#66250F。素材所在位置：光盤/案例素材/ch08/練習(xí)案例-裝修公司。案例布局要求如圖8-69所示，案例效果如圖8-70所示。

div+css的ppt：這是div+css的ppt，包括了Div+css的概述，DIV+CSS布局，SPAN和DIV的區(qū)別，CSS概述，用CSS定義樣式，盒子模型，普通流定位機(jī)制等內(nèi)容，歡迎點(diǎn)擊下載。

div css教程ppt：這是div css教程ppt（部分ppt內(nèi)容已做更新升級(jí)），包括了傳統(tǒng)布局與CSS布局，XHTML與CSS基礎(chǔ)，CSS網(wǎng)頁(yè)布局與定位，實(shí)例：三欄居中式布局等內(nèi)容，歡迎點(diǎn)擊下載。

PPT分類Classification

久久无码高潮喷水抽搐,极品馒头泬19p,久久人人爽精品玩人妻av,精品国产成人国产在线视,精品视频一区二区三区在线观看

div css布局ppt下載

div css布局ppt

素材評(píng)分榜

素材排行榜