第8課 CSS基礎(chǔ)(四)

1、上次課內(nèi)容回顧：圖片邊框圖片邊框 邊框邊框粗細(xì)粗細(xì)border-width 邊框顏色邊框顏色border-color 邊框樣式邊框樣式border-style 邊框?qū)傩赃吙驅(qū)傩詁order圖片縮放圖片縮放 圖片寬度圖片寬度width 圖片高度圖片高度height2022-3-28CSS基礎(chǔ)（四）1圖文混排圖文混排 文字環(huán)繞文字環(huán)繞float 圖片與文字的邊距圖片與文字的邊距外邊距：外邊距：margin 內(nèi)邊距：內(nèi)邊距：padding圖片與文字對(duì)齊方式圖片與文字對(duì)齊方式 橫向?qū)R方式：借助父元素的對(duì)齊方式橫向?qū)R方式：借助父元素的對(duì)齊方式 縱向?qū)R方式縱向?qū)R方式top/middle/botto

2、m/baseline/text-bottom/text-top/middle/sub/super/像素值像素值2022-3-28CSS基礎(chǔ)（四）2上次課內(nèi)容回顧：上次課內(nèi)容回顧：背景顏色背景顏色background-color背景圖像背景圖像background-image背景圖像平鋪背景圖像平鋪background-repeat背景圖像位置背景圖像位置background-position背景圖片位置固定背景圖片位置固定background-attachment2022-3-28CSS基礎(chǔ)（四）312.7 使用滑動(dòng)門技術(shù)的標(biāo)題對(duì)于這樣標(biāo)題寬度不固定，需要變化寬度，而同時(shí)要對(duì)于這樣標(biāo)題寬度不固

3、定，需要變化寬度，而同時(shí)要保證花紋在左右兩端，需要使用保證花紋在左右兩端，需要使用“滑動(dòng)門技術(shù)滑動(dòng)門技術(shù)”。所謂所謂“滑動(dòng)門滑動(dòng)門”，就是兩個(gè)嵌套的元素，各自使用一，就是兩個(gè)嵌套的元素，各自使用一個(gè)背景圖像，二者中間部分重疊，兩端不重疊，這樣個(gè)背景圖像，二者中間部分重疊，兩端不重疊，這樣左右兩端的花紋就可以都被顯示出來，中間部分的寬左右兩端的花紋就可以都被顯示出來，中間部分的寬度可以自動(dòng)適應(yīng)，因此寬度變化時(shí)依然可以保證左右度可以自動(dòng)適應(yīng)，因此寬度變化時(shí)依然可以保證左右兩端的圖案不變。兩端的圖案不變。2022-3-28CSS基礎(chǔ)（四）4知識(shí)要點(diǎn)知識(shí)要點(diǎn)u用用CSSCSS設(shè)置表格樣式設(shè)置表格樣式u

4、控制表格控制表格u美化表格美化表格u制作案例制作案例2022-3-286CSS基礎(chǔ)（四）知識(shí)回顧HTML表格標(biāo)記表格標(biāo)記 2022-3-28CSS基礎(chǔ)（四）7知識(shí)回顧其他表格標(biāo)記和屬性其他表格標(biāo)記和屬性cellspacing cellpadding2022-3-28CSS基礎(chǔ)（四）8第15章 用CSS設(shè)置表格【學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)】表格是網(wǎng)頁制作中使用最多的工具之一，通過表格配合表格是網(wǎng)頁制作中使用最多的工具之一，通過表格配合文字和精美的圖片，才能完成優(yōu)秀的網(wǎng)頁，常用于統(tǒng)計(jì)文字和精美的圖片，才能完成優(yōu)秀的網(wǎng)頁，常用于統(tǒng)計(jì)數(shù)據(jù)、制作調(diào)查表、無邊框表格排版等，可通過數(shù)據(jù)、制作調(diào)查表、無邊框表格排版等，

5、可通過CSS設(shè)設(shè)置表格的顏色、標(biāo)題、邊框、背景等。置表格的顏色、標(biāo)題、邊框、背景等。本章主要內(nèi)容包括：本章主要內(nèi)容包括：表格標(biāo)簽表格標(biāo)簽用用CSS設(shè)置表格結(jié)構(gòu)設(shè)置表格結(jié)構(gòu)用用CSS設(shè)置表格樣式設(shè)置表格樣式用用CSS設(shè)置表格的斑馬紋效果設(shè)置表格的斑馬紋效果92022-3-28CSS基礎(chǔ)（四）第15章 用CSS設(shè)置表格2022-3-2810CSS基礎(chǔ)（四）21網(wǎng)頁中的表格11淘寶網(wǎng)商品搜索頁面淘寶網(wǎng)商品搜索頁面2022-3-28CSS基礎(chǔ)（四）網(wǎng)頁中的表格12得意生活網(wǎng)社區(qū)頁面得意生活網(wǎng)社區(qū)頁面2022-3-28CSS基礎(chǔ)（四）網(wǎng)頁中的表格13天涯社區(qū)網(wǎng)發(fā)帖頁面天涯社區(qū)網(wǎng)發(fā)帖頁面2022-3-28

6、CSS基礎(chǔ)（四）15.1 控制表格1、 表格中的標(biāo)記表格中的標(biāo)記表格由行、列和單元格表格由行、列和單元格3部分組成，常用標(biāo)記參見部分組成，常用標(biāo)記參見HTML部分。下表為表格常用元素標(biāo)簽及說明部分。下表為表格常用元素標(biāo)簽及說明例第例第15章章01begin.htmHTML中表格常用屬性：中表格常用屬性： border bgcolor width height cellspacing cellpadding142022-3-28CSS基礎(chǔ)（四）2、 設(shè)置表格的邊框設(shè)置表格的邊框邊框作為表格的分界在顯示時(shí)往往必不可少。根據(jù)不同的邊框作為表格的分界在顯示時(shí)往往必不可少。根據(jù)不同的需求，可以對(duì)表格和單

7、元格應(yīng)用不同的邊框?？梢远x整需求，可以對(duì)表格和單元格應(yīng)用不同的邊框?？梢远x整個(gè)表格的邊框也可以對(duì)單獨(dú)的單元格分別進(jìn)行定義。個(gè)表格的邊框也可以對(duì)單獨(dú)的單元格分別進(jìn)行定義。CSS的邊框?qū)傩允敲阑砀竦囊粋€(gè)關(guān)鍵元素，利用的邊框?qū)傩允敲阑砀竦囊粋€(gè)關(guān)鍵元素，利用CSS可以定可以定義各種邊框樣式。義各種邊框樣式。語法語法：樣式名：樣式名border: 屬性值；屬性值；要點(diǎn)要點(diǎn)：先設(shè)置：先設(shè)置樣式，再分別對(duì)該樣式的樣式，再分別對(duì)該樣式的和和進(jìn)行設(shè)置進(jìn)行設(shè)置例第例第15章章01record.htm在在table標(biāo)簽中添加屬性標(biāo)簽中添加屬性cellspacing=0例第例第15章章01record-2px

8、.htm152022-3-28CSS基礎(chǔ)（四）15.1 控制表格2、 設(shè)置表格的邊框設(shè)置表格的邊框(1) 設(shè)置單元格邊框設(shè)置單元格邊框語法：樣式名border-collapse:屬性值；說明：該樣式表示相鄰的邊框線是否合并，屬性值可為separate(默認(rèn)值)或collapse(重疊)，該樣式可設(shè)置邊框?yàn)?px的細(xì)線表格例第例第15章章01record- collapse.htm(2) 相鄰邊框的合并規(guī)則相鄰邊框的合并規(guī)則見見P220CSS2規(guī)范規(guī)范下的合并規(guī)則下的合并規(guī)則例P221(3) 邊框的間距邊框的間距(單元格外邊距）單元格外邊距）語法：樣式名border-spacing:屬性值；例第

9、例第15章章01record- separate.htm補(bǔ)充：?jiǎn)卧駜?nèi)邊距使用padding162022-3-28CSS基礎(chǔ)（四）15.1 控制表格2、 設(shè)置表格的邊框設(shè)置表格的邊框172022-3-28CSS基礎(chǔ)（四）15.1 控制表格邊框：邊框：1 1像素，實(shí)線，像素，實(shí)線，#0058a3#0058a3；字體：字體：ArialArial；文字大?。何淖执笮。?4px14px；注意邊框重疊的處理方式注意邊框重疊的處理方式對(duì)齊對(duì)齊方式？是否方式？是否加加粗？粗？底色底色#4bacff#4bacff、文字顏色、文字對(duì)齊方、文字顏色、文字對(duì)齊方式、加粗、內(nèi)部間距式、加粗、內(nèi)部間距文字大小、對(duì)齊方式

10、、文字顏色、內(nèi)文字大小、對(duì)齊方式、文字顏色、內(nèi)部間距部間距背景顏色：背景顏色：#eaf5ff#eaf5ff背景顏色：背景顏色：#c7e5ff#c7e5ff3、確定表格的寬度、確定表格的寬度CSS表格寬度分為表格寬度分為“自動(dòng)方式自動(dòng)方式”和和“固定方式固定方式”兩種兩種語法語法：樣式名：樣式名table-layout:屬性值；屬性值；width:值；值；說明說明：屬性值可為：屬性值可為auto(自動(dòng)自動(dòng))或或fixed(固定固定)例第例第15章章03中的日歷采用了固定方式中的日歷采用了固定方式182022-3-28CSS基礎(chǔ)（四）15.1 控制表格4、其他與表格相關(guān)的標(biāo)記、其他與表格相關(guān)的標(biāo)記

11、(1) 劃分結(jié)構(gòu)表格劃分結(jié)構(gòu)表格標(biāo)簽標(biāo)簽、和和基本語法：基本語法： 說明說明：在：在CSS樣式表中可分別對(duì)樣式表中可分別對(duì)、和和中的中的設(shè)置不同的樣式，設(shè)置不同的樣式， 如：如：tbody th屬性名：屬性值；屬性名：屬性值；192022-3-28CSS基礎(chǔ)（四）15.1 控制表格4、其他與表格相關(guān)的標(biāo)記、其他與表格相關(guān)的標(biāo)記(2) 劃分劃分列列結(jié)構(gòu)結(jié)構(gòu)標(biāo)簽標(biāo)簽在在CSS樣式表中可單獨(dú)對(duì)某些列設(shè)置不同的樣式樣式表中可單獨(dú)對(duì)某些列設(shè)置不同的樣式IE瀏覽器下：瀏覽器下：如：如： 注意注意：firefox瀏覽器不支持瀏覽器不支持202022-3-28CSS基礎(chǔ)（四）15.1 控制表格2022-3-2

12、8CSS基礎(chǔ)（四）2115.2 美化表格2022-3-28CSS基礎(chǔ)（四）2215.2 美化表格capitontheadtbodytfoot15.2 美化表格15.2.1搭建搭建HTML結(jié)構(gòu)結(jié)構(gòu)15.2.2 整體設(shè)置整體設(shè)置 設(shè)置設(shè)置table和和table caption的樣式的樣式15.2.3 設(shè)置單元格樣式設(shè)置單元格樣式 設(shè)置設(shè)置tbody tr、thead tr、 tfoot tr 以及以及tr和和td 的樣式的樣式15.2.4 斑馬紋效果斑馬紋效果 設(shè)置設(shè)置tbody tr.even樣式并對(duì)所有偶數(shù)行應(yīng)用該樣式樣式并對(duì)所有偶數(shù)行應(yīng)用該樣式例第例第15章章02table-0.htm15

13、.2.5 設(shè)置列樣式設(shè)置列樣式 在在標(biāo)簽后添加六個(gè)標(biāo)簽后添加六個(gè)標(biāo)記，并設(shè)置標(biāo)記，并設(shè)置col.center和和col.right兩種樣式，且應(yīng)用在不同列標(biāo)簽兩種樣式，且應(yīng)用在不同列標(biāo)簽中中例第例第15章章02table-1-ie.htm232022-3-28CSS基礎(chǔ)（四）15.3 案例-日歷例第例第15章章03 calendar.htm例例CSS表格范例表格范例242022-3-28CSS基礎(chǔ)（四）2022-3-28CSS基礎(chǔ)（四）2515.3 案例-日歷15.3.1搭建搭建HTML結(jié)構(gòu)結(jié)構(gòu)15.3.2 設(shè)置整體樣式和表頭樣式設(shè)置整體樣式和表頭樣式 設(shè)置設(shè)置table和和table caption的樣式的樣式15.3.3 設(shè)置日歷單元格樣式設(shè)置日歷單元格樣式 設(shè)置設(shè)置tbody tr、thead tr、 tfoot tr 以及以及tr和和td 的樣式的樣式例第例第15章章03table-1-ie.htm2022-3-28CSS基礎(chǔ)（四）2615.3 案例-日歷說明：說明：padding的順序的順序 padding: 10px 5px 15px 20px; 上、右、下、左上、右、下、左 padding: 10px 5px 15px; 上、上、