第6講 DIV+CSS布局-圖片

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

調(diào)整邊框?qū)挾龋篵order-width6-2.html

設(shè)置邊框顏色：border-color6-3.html4陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)一圖片樣式Border-style屬性：none 無邊框（默認(rèn)值）dotted 點(diǎn)線dashed 虛線solid 實(shí)線double 雙直線groove 凹型線ridge 凸型線inset 嵌入式outset 嵌出式5陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)一圖片樣式注意：A.Css中的邊框?qū)傩钥梢杂靡痪銫SS完成實(shí)例：6-04.htmlB.css中允許對(duì)圖片邊框的上下左右分別設(shè)置實(shí)例：6-05.html6陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)一圖片樣式2.圖片的縮放圖片的寬度高度語法格式：height:高度值;width:寬度值;常用單位有%(百分比)相對(duì)值px（像素）固定值實(shí)例：6-4.html

6-5.html注意：只設(shè)置Width屬性，或只設(shè)置height屬性，圖片都會(huì)自動(dòng)等比例縮放。7陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二圖片對(duì)齊圖片的對(duì)齊方式與文字的對(duì)齊方式基本相同，分為：1.橫向?qū)R（6-6.html）text-align2.縱向?qū)R（6-7.html）vertical-align縱向精確數(shù)值：6-8.html注意：圖片的“縱向?qū)R”方式不常用2023/1/318陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)三圖文混排1.文字環(huán)繞圖片居于文字右邊：float:right圖片居于文字左邊：float:left實(shí)例：6-9.html

2.設(shè)置圖片和文字之間的間距6-10.html9陜西新華電腦軟件學(xué)校-電子商務(wù)教研組本講總結(jié)圖片樣式圖片對(duì)齊10陜西新華電腦軟件學(xué)校-電子商務(wù)教研組作業(yè)1、完成課堂實(shí)例2、