網(wǎng)站重構(gòu)和css編程進階(參考版)
2024-08-12 13:43本頁面
【正文】 實踐總結(jié) a. 區(qū)塊之間應(yīng)該獨立 * b. 準(zhǔn)確的使用 ID和 Class c. 使用 div和 span要賦給有意義的名稱 d. 不要過度使用沒有語義的 div和 span* e. 先編寫 html代碼，然后才是 CSS 五、編程規(guī)范 * 1. CSS命名規(guī)范 2. 六、瀏覽器 BUG和 CSS調(diào)試 1. 常見的瀏覽器 bug 2. CSS調(diào)試技巧 常見的瀏覽器 bug * a. 雙空白邊 (Doublemargin)浮動 bug b. IE6重復(fù)字符 bug CSS調(diào)試技巧 a. 增加 border b. 增加帶顏色的背景 (background) 七、更深入的話題 1. CSS Framework 2. CSS Filter 3. CSS 2 The End 參考書目： 《 網(wǎng)站重構(gòu) 》 《 精通 CSS高級 Web解決方案 》 。 圖文混排 * 優(yōu)點：定位準(zhǔn)確，重用性高。 圖文混排 * a. 浮動的圖文混排 優(yōu)點：簡單，方便。 表格和表單 a. 數(shù)據(jù)表格 ① caption ② thead,tbody,tfoot ③ th 表格和表單 * 和表格 table類似，一個展現(xiàn)二維數(shù)據(jù)，一個是收集二維的數(shù)據(jù) (鍵值對 )，推薦使用table來組織表單。當(dāng)鼠標(biāo)滑過(hover)a時顯示 a的內(nèi)容。為了修正 IE和 Opera瀏覽器，設(shè)置背景顏色并把 a標(biāo)簽的透明度設(shè)置為 1。通過同一個邊框顏色的漸變形成陰影。 圖像陰影和圖像映射 * 原理：給圖像加上邊框 (border)和填充 (padding)。 》非常漂亮的純 CSS陰影效果 ③ 因為浮動元素脫離了文檔流，所以包含圖片和文本的 div不占據(jù)空間，所以要在這個 div的某個地方清除浮動 *。 普通流、絕對定位、和浮動 * c. 浮動 普通流、絕對定位、和浮動 * c. 浮動 普通流、絕對定位、和浮動 * c. 浮動
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1