web編程基礎(chǔ)精通cssdiv網(wǎng)頁與布局

1、WEB 編程基礎(chǔ)HTML-頁面中的內(nèi)容CSS-控制HTML的樣式JAVASCRIPT-增加動態(tài)效果注：以上均為瀏覽器識別的語言，客戶端的語言以上可以做出有內(nèi)容、布局、樣式的靜態(tài)頁面；結(jié)合服務(wù)器端技術(shù)實(shí)現(xiàn)動態(tài)頁面；精通CSS+DIV網(wǎng)頁樣式與布局第一課 初探CSS1.1 CSS的概念1.2 使用CSS控制頁面1.1 CSS的概念CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。標(biāo)記的概念, , , , , etc.HTML的缺陷代碼的重復(fù)不便于做大量修改 1-2.htmlCSS的引用 1-3.html1.2

2、 使用CSS控制頁面1.2.1 行內(nèi)樣式 (1-5.html)1.2.2 內(nèi)嵌式 (1-6.html)1.2.3 鏈接式 (1-7.html)1.2.4 導(dǎo)入樣式 (1-8.html)第二課 CSS基本語法2.1 CSS選擇器2.2 選擇器的聲明2.3 CSS的繼承2.1 CSS選擇器即定義CSS的方式2.1.1 標(biāo)記選擇器2.1.2 類別選擇器2.1.3 ID選擇器2.1.1 標(biāo)記選擇器h1color:red;font-size:25px;h1 color: red;font-size: 25px;選擇器屬性值聲明1聲明22.1.2 類別選擇器例：2-1.html .class color:

3、 green;font-size: 25px;類別選擇器屬性值聲明1聲明2自定義 類別名稱2.1.3 ID選擇器例：2-2.html 如果一個ID出現(xiàn)在2個相同的標(biāo)簽中，會導(dǎo)致JavaScript語法混亂。#id color: yellow;font-size: 25px;ID選擇器屬性值聲明1聲明2自定義 ID名稱2.2 選擇器的聲明2.2.1 集體聲明 (2-6.html)2.2.2 選擇器的嵌套 (2-8.html)2.3 CSS的繼承2.3.1 父子關(guān)系 (2-9.html)標(biāo)簽1 標(biāo)簽2 （注意此處的空格）例如：p span標(biāo)簽1.任意類別例如：span.myclassname12.

4、3.2 CSS繼承的運(yùn)用 (2-10.html)第三課 CSS文字效果3.1 CSS文字樣式3.2 文字實(shí)例：模擬Google公司logo3.3 CSS段落文字3.4 段落實(shí)例：百度搜索3.1 CSS文字的樣式3.1.1 字體例：font-family: 黑體,幼圓3.1.2 文字大小例：3-2.html3.1.3 文字顏色例：3-5.html3.1.4 文字粗細(xì)例：3-6.html3.1.5 斜體例：3-7.html3.1.6 下劃線、頂劃線、刪除線 3-8.html3.1.7 英文字母大小寫 3-9.html3.2 模擬Google公司logoGoogle3.3 CSS 段落文字3.3.1

5、 段落水平、垂直對齊方式text-align: left | right | center | justifyvertical-align: top | bottom | middle3.3.2 行間距、字間距、詞間距l(xiāng)ine-height: 1cmletter-spacing: 1cmword-spacing: 1cm3.3.3 首字放大float: left; (漂浮位置)padding-right: 5px (與右邊的間隔)3.3.4 頁面背景色background-color: black3.3.5 邊距與間隙margin,padding (各帶四個方向)3.4 實(shí)戰(zhàn)：百度搜索 3-1

6、9.html中國春節(jié)網(wǎng)歡迎光臨中國春節(jié)網(wǎng)，中國古代歷法發(fā)展春節(jié)：傳統(tǒng)和現(xiàn)代 元宵 燈節(jié) 百度快照春節(jié) TOM新聞春節(jié)流行三類“拜年短信”；春節(jié)期間電視節(jié)目早知道；TOM游戲與大家同過快樂春節(jié) /hot/2008 百度快照第四課 CSS 圖片效果4.1 圖片樣式4.2 圖片對齊4.3 圖文混排4.4 圖文實(shí)例：八仙過海4.1 圖片樣式4.1.1 圖片邊框 4-1.html4.1.2 圖片縮放 4-1.html4.2 圖片的對齊4.2.1 橫向?qū)R4-2.html4.2.2 縱向?qū)Rvertical-align:baseline; 基線對齊vertical-align:middle;中部對齊ver

7、tical-align:sub;文本下標(biāo)vertical-align:super;文本上標(biāo)vertical-align:top;頂端對齊vertical-align:text-top;頂端對齊vertical-align:bottom;底端對齊vertical-align:text-bottom;底端對齊4.3 圖文混排4.3.1 文字環(huán)繞 (4-9.html)4.3.2 圖片和文字的間距 (4-9.html)4.4 實(shí)戰(zhàn) 八仙過海學(xué)生根據(jù)作業(yè)要求，利用CSS制作網(wǎng)頁。第五課 CSS 頁面背景5.1 背景顏色5.2 背景圖片5.3 古詞念奴嬌赤壁懷古5.1 背景顏色5.1.1 頁面背景顏色 5

8、-1.htmlbackground-color: 顏色代碼5.1.2 用背景色給頁面分塊 5-2.html5.2 背景圖片5.2.1 頁面的背景圖 5-3.htmlbackground-image:url(圖片地址);5.2.2 背景圖片的重復(fù) 5-5.html5.2.3 背景圖片的位置 5-8.html5.2.4 固定背景圖片 5-10.html5.3 古詞實(shí)戰(zhàn) 念奴嬌赤壁懷古5-13.html第六課 CSS設(shè)置表格和表單樣式6.1 控制表格6.2 表格實(shí)例一：隔行變色6.3 CSS與表單6.4 CSS制作實(shí)用菜單 （附加）6.1 控制表格6.1.1 表格中的標(biāo)記 6.1.2 表格的顏色 6

9、-2.html6.1.3 表格的邊框 6-3.html6.2 表格實(shí)例一：隔行變色6-4.html6.3 CSS與表單6.3.1 表單中的元素 6-7.html6.3.2 巧妙的運(yùn)用CSS“文字按鈕” 6-9.html“多彩下拉菜單”6-10.html“類似EXCEL的表格” 6-11.html6.4 CSS制作實(shí)用菜單 （附加）菜單的切換顯示 6-12.html經(jīng)典標(biāo)簽式TAB菜單 tab1.html第9課 CSS濾鏡的使用CSS濾鏡并不是瀏覽器的插件，也不符合CSS標(biāo)準(zhǔn)，而是微軟公司為增強(qiáng)瀏覽器功能而特意開發(fā)的并整合在IE瀏覽器中的一類功能的集合。CSS濾鏡的標(biāo)識符是“filter”，例如：Filter:filtername(parameters);濾鏡實(shí)例蒙版遮罩效果9-3.html模糊效果9-5.html圖片的翻轉(zhuǎn)效果9-10.html陰影的制作9-16.html波浪形文字9-20.ht