第6講DIV+CSS布局—圖片

1、陜西新華電腦軟件學(xué)校-電子商務(wù)教研組1第6講 DIV+CSS布局-圖片版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組2任務(wù)一任務(wù)一 圖片樣式圖片樣式任務(wù)二任務(wù)二 圖片對(duì)齊圖片對(duì)齊CSS-圖片教學(xué)重難點(diǎn)教學(xué)重難點(diǎn)課前回顧：課前回顧：CSSCSS文字段落文字段落任務(wù)三任務(wù)三 圖文混排（重點(diǎn)）圖文混排（重點(diǎn)）版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組3課前回顧：課前回顧：CSSCSS文字段落文字段落u文字效果u段落效果版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組4任務(wù)一任務(wù)一 圖片樣式圖片樣式1.1.圖片的邊框：圖片的邊框：borderborder設(shè)置邊框樣式 ：border-style 6-1.h

2、tml 調(diào)整邊框?qū)挾龋篵order-width 6-2.html 設(shè)置邊框顏色：border-color 6-3.html版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組5任務(wù)一任務(wù)一 圖片樣式圖片樣式uBorder-style屬性：none 無邊框（默認(rèn)值）dotted點(diǎn)線dashed虛線solid 實(shí)線double雙直線groove凹型線ridge凸型線inset嵌入式outset嵌出式版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組6任務(wù)一任務(wù)一 圖片樣式圖片樣式注意：A.Css中的邊框?qū)傩钥梢杂靡痪銫SS完成實(shí)例：6-04.htmlB.css中允許對(duì)圖片邊框的上下左右分別設(shè)置實(shí)例：6-05.h

3、tml版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組7任務(wù)一任務(wù)一 圖片樣式圖片樣式2.圖片的縮放圖片的寬度高度語法格式：height:高度值; width:寬度值;常用單位有 %(百分比) 相對(duì)值 px（像素） 固定值實(shí)例：6-4.html 6-5.html注意：只設(shè)置Width屬性，或只設(shè)置height屬性，圖片都會(huì)自動(dòng)等比例縮放。版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組8任務(wù)二任務(wù)二 圖片對(duì)齊圖片對(duì)齊圖片的對(duì)齊方式與文字的對(duì)齊方式基本相同，分為：1.橫向?qū)R （6-6.html）text-align2.縱向?qū)R （6-7.html）vertical-align 縱向精確數(shù)值：6-8.html注意：圖片的“縱向?qū)R”方式不常用2022-3-27版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組9任務(wù)三任務(wù)三 圖文混排圖文混排1.文字環(huán)繞圖片居于文字右邊：float:right圖片居于文字左邊：float:left 實(shí)例：6-9.html 2.設(shè)置圖片和文字之間的間距 6-10.html版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組10本講總結(jié)本講總結(jié)u圖片樣式u圖片對(duì)齊版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)