第6講DIV+CSS布局—圖片_第1頁
第6講DIV+CSS布局—圖片_第2頁
第6講DIV+CSS布局—圖片_第3頁
第6講DIV+CSS布局—圖片_第4頁
第6講DIV+CSS布局—圖片_第5頁
已閱讀5頁，還剩7頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

2、tml 調整邊框寬度：border-width 6-2.html 設置邊框顏色：border-color 6-3.html版權所有陜西新華電腦軟件學校-電子商務教研組5任務一任務一 圖片樣式圖片樣式uBorder-style屬性：none 無邊框（默認值）dotted點線dashed虛線solid 實線double雙直線groove凹型線ridge凸型線inset嵌入式outset嵌出式版權所有陜西新華電腦軟件學校-電子商務教研組6任務一任務一 圖片樣式圖片樣式注意：A.Css中的邊框屬性可以用一句CSS完成實例：6-04.htmlB.css中允許對圖片邊框的上下左右分別設置實例：6-05.h

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論