css設(shè)計徹底研究ppt課件(編輯修改稿)
2025-05-26 04:15 本頁面
【文章內(nèi)容簡介】 } 第 3課 深入理解盒子模型 ? CSS中的幾何題 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 準(zhǔn)備代碼 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 1——設(shè)置第 1個浮動的 div 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 2——設(shè)置第 2個浮動的 div 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 3——設(shè)置第 3個浮動的 div 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 4——改變浮動的方向 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 5——再次改變浮動的方向 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 6——全部向左浮動 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 7——使用 clear屬性清除浮動的影響 第 3課 深入理解盒子模型 ? 盒子的浮動 ? 實驗 8——擴展盒子的高度 第 4課 盒子的浮動與定位 ? 盒子的定位 ? 廣義的“定位”：當(dāng)提到把希望某個元素放到某個位置的時候，這個動作可以稱為定位操作，可以使用任何 CSS規(guī)則來實現(xiàn)，這就是泛指的一個網(wǎng)頁排版中的定位操作，使用傳統(tǒng)的表格排版時，同樣存在定為的問題。 ? 狹義的“定位”：在 CSS中有一個非常重要的屬性 position，這個單詞要翻譯為中文，也是定位的意思，然而要使用 CSS進行定位操作的手段，并不僅僅通過擇個屬性來實現(xiàn)，因此不要把把二者混淆。 第 4課 盒子的浮動與定位 ? 盒子的定位 ? static：這是默認(rèn)的屬性值，也就是該盒子按照標(biāo)準(zhǔn)流（包括浮動方式）進行布局。 ? relative：稱為相對定位，使用相對定位的盒子的位置根據(jù)常以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離。相對定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。 ? absolute：絕對定位，盒子的位置以他的包含框為基準(zhǔn)進行偏移。絕對定位的框從標(biāo)準(zhǔn)流中脫離。這意味著它們對其后的兄弟盒子的定位沒有影響，其他的盒子就好形這個盒子不存在一樣。 ? fixed：稱為固定定位，它和絕對定位類似，只是以瀏覽器窗口為基準(zhǔn)，進行定位。 第 4課 盒子的浮動與定位 ? 盒子的定位 ? static：這是默認(rèn)的屬性值，也就是該盒子按照標(biāo)準(zhǔn)流（包括浮動方式）進行布局。 第 4課 盒子的浮動與定位 ? 盒子的定位 ? Relative：稱為相對定位，使用相對定位的盒子的位置根據(jù)常以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離。相對定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。 第 4課 盒子的浮動與定位 ? 盒子的定位 ? Absolute：絕對定位，盒子的位置以他的包含框為基準(zhǔn)進行偏移。絕對定位的框從標(biāo)準(zhǔn)流中脫離。這意味著它們對其后的兄弟盒子的定位沒有影響，其他的盒子就好形這個盒子不存在一樣。 第 4課 盒子的浮動與定位 ? 盒子的定位 ? Fixed：稱為固定定位，它和絕對定位類似，只是以瀏覽器窗口為基準(zhǔn)，進行定位。 第 4課 盒子的浮動與定位 ? 盒子的 display屬性 body divBox1/div divBox2/div divBox3/div spanBox4/span spanBox5/span spanBox6/span divBox7/div spanBox7/span /body 第 4課 盒子的浮動與定位 ? 盒子的 display屬性 body div style=display:inlineBox1/div div style=display:inlineBox2/div div style=display:inlineBox3/div span style=display:blockBox4/span span style=display:blockBox5/span span style=display:blockBox6/span div style=display:noneBox7/div span style=display:noneBox8/span /body 第 5課 介紹文字和圖像的排版 ? CSS文字樣式 ? 準(zhǔn)備網(wǎng)頁 ? 設(shè)置字體 ? 文字大小 ? 行高 ? 文字顏色與背景顏色 ? 文字加粗、傾斜與大小寫 ? 文字的裝飾效果 ? 文字的水平對齊方式 ? 文字布局 ? 段落的垂直對齊方式 第 5課 介紹文字和圖像的排版 ? CSS圖像樣式 ? 基本設(shè)置 ? 背景圖像 ? 標(biāo)題的圖像替換 第 5課 介紹文字和圖像的排版 ? CSS圖像陰影 ? 基本設(shè)置 ? 柔邊陰影 ? IE6兼容 第 5課 介紹文字和圖像的排版 ? CSS圖像陰影 圖 像透 明圖 像透 明圖 像圖 像第 6課 鏈接與導(dǎo)航 ? 動態(tài)超鏈接 a:link, a:visited {textdecoration:none。} a:hover, a:active {textdecoration:underline。} 屬性 說明 a:link 超鏈接的普通樣式 ， 即正常瀏覽狀態(tài)的樣式 a:visited 被點擊過的超鏈接的樣式 a:hover 鼠標(biāo)指針經(jīng)過超鏈接上時的樣式 a:active 在超鏈接上單擊時 ， 即 “ 當(dāng)前激活 ” 時 ， 超鏈接的樣式 第 6課 鏈接與導(dǎo)航 ? 按鈕式超鏈接 第 6課 鏈接與導(dǎo)航 ? 浮雕背景超鏈接 第 6課 鏈接與導(dǎo)航 ? 讓下劃線動起來 第 6課 鏈接與導(dǎo)航 ? 簡單的豎直排列菜單 第 6課 鏈接與導(dǎo)航 ? 橫豎自由轉(zhuǎn)換菜單 第 7課 豎直排列的導(dǎo)航菜單 ? 雙豎線菜單 第 7課 豎直排列的導(dǎo)航菜單 ? 雙斜角橫線菜單 第 7課 豎直排列的導(dǎo)航菜單 ? 立體菜單 第 7課 豎直排列的導(dǎo)航菜單 ? 箭頭菜單 第 7課 豎直排列的導(dǎo)航菜單 ? 帶說明信息的菜單 第 8課 水平排列的導(dǎo)航菜單 ? 自適應(yīng)的水平菜單 第 8課 水平排列的導(dǎo)航菜單 ? 自適應(yīng)的
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1