div css布局ppt下載

素材大小：: 1 MB

素材授權：: 免費下載

素材格式：: .ppt

素材上傳：: lipeier

上傳時間：: 2020-02-13

素材編號：: 251008

素材類別：: 課件PPT

素材預覽

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

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

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

標簽，ID標識為Div1，并在其中插入一個圖像，代碼如下： 8.1.2 盒子屬性 8.2 布局方法在CSS+Div布局中，

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

標簽的相互關系和分布排列的位置。 8.2 布局技術 8.2.1

標簽 8.2.2 position定位屬性 8.2.3 浮動方式 8.2.1

標簽

一個塊狀容器類標簽，即在

和

之間可以容納各種HTML元素，同時也構成一個獨立的矩形區(qū)域。無論在頁面中使用多少個標簽，

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

標簽 8.2.1

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

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

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

標簽 8.3.1課堂案例-網(wǎng)頁設計大賽案例學習目標：學習“上中下”布局的方法。案例知識要點：在【插入】面板【HTML】選項卡中，使用【Div】按鈕創(chuàng)建網(wǎng)頁布局結構；在【CSS設計器】面板中，使用【添加選擇器】按鈕創(chuàng)建

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

標簽在【插入Div標簽】對話框中，各個選項含義如下：【ID】：可以在下拉框中直接輸入或選擇一個名稱，為

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

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

標簽新建一個ID樣式或類樣式。【插入】：其各種選項決定了

標簽之間是并列關系還是嵌入關系，其選項包括： 8.3.2 在Dreamweaver中插入

標簽 “在插入點”表示在插入點插入一個

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

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

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

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

標簽，與指定的

標簽形成并列關系。 “在標簽之后”表示插入一個

標簽，與指定的

標簽形成并列關系。 8.3.2 在Dreamweaver中插入

標簽 “在開始標簽之前”表示在標簽之前，插入一個

標簽。 “在開始標簽之后”表示在標簽之前，插入一個

標簽。 “在開始標簽之后”表示在標簽之后，插入一個

標簽。 8.4 “左中右”布局在“左中右”布局中，首先插入若干個

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

標簽浮動，實現(xiàn)“左中右”的布局；最后，設置CSS樣式其他屬性控制

標簽的外觀。 8.4 “左中右”布局 8.4.1 課堂案例-連鎖餐廳 8.4.2 使用CSS樣式布局 8.4.1課堂案例-連鎖餐廳案例學習目標：學習“左中右”布局的方法。案例知識要點：在【插入】面板【HTML】選項卡中，使用【Div】按鈕，插入

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

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

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

標簽，寬度為1000px，并居中對齊。 2．在container的

標簽中，插入ID名稱為header，menu，banner，info和footer的5個

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

標簽中，插入名稱為nav的

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

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

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

標簽，寬度為1000px，高度為860px，并居中對齊。 2．在container的

標簽中，插入ID名稱為menu，info1，info2，info3和footer的5個

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

標簽為左浮動，ID名稱為footer的

標簽取消左浮動。 8.5.2練習案例-裝修公司 3．在footer標簽中，插入兩個

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

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

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

PPT分類Classification

国产午夜福利在线观看红一片,久久精品国产再热青青青,又硬又粗又大一区二区三区视频,中文字幕乱码免费,久久超碰97文字幕 ,中国精学生妹品射精久久

div css布局ppt下載

div css布局ppt

素材評分榜

素材排行榜