資源描述：
《使用CSS樣式表設(shè)置圖片效果》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、第八講使用CSS樣式表設(shè)置圖片效果回顧C(jī)SS中如何設(shè)置文字樣式？從哪些方面？在Google公司Logo案例中，它的實現(xiàn)思路是怎樣的？CSS中如何設(shè)置段落樣式？會使用CSS對圖片邊框進(jìn)行設(shè)置會使用CSS對圖片進(jìn)行對齊會使用CSS對圖片進(jìn)行剪切會使用CSS實現(xiàn)圖片替代文本會使用CSS對圖文進(jìn)行混排圖文實例：八仙過海本講目標(biāo)導(dǎo)入首先，在網(wǎng)絡(luò)世界中，各種各樣的圖片組成了豐富多彩的頁面，傳達(dá)給用戶各種信息。其次，圖片的使用方式大體分為三種：1、作為單獨的圖片本身存在；2、作為背景圖片存在；3、作為浮動元素存在。本講中，我們僅涉及到第一種情況，即以![]()
標(biāo)記的方式存在于網(wǎng)頁中，并且占位。圖
2、片邊框-1如上所示，我們發(fā)現(xiàn)通過border屬性可以為![]()
標(biāo)記的圖片添加邊框。border-style:dotted;/*點畫線*/border-color:#FF9900;/*邊框顏色*/border-width:5px;/*邊框粗細(xì)*/問題：邊框都是黑色的，風(fēng)格單一，只能在邊框粗細(xì)上調(diào)整，那CSS對于圖片邊框都有哪些屬性進(jìn)行設(shè)置
3、呢？案例演示2案例演示1圖片邊框-2CSS還可以分別設(shè)置4個邊框的不同樣式borderborder-left/*左邊框*/border-right/*右邊框*/border-top/*上邊框*/border-bottom/*下邊框*/border-top-color/*上邊框顏色*/border-top-style/*上邊框類型*/border-top-width/*上邊框粗細(xì)*/如果4個邊框都采用右側(cè)的寫法會如何呢？案例演示1案例演示2圖片的對齊-1橫向水平對齊，分為左、中、右3種
4、jpg">
|
|
|
實現(xiàn)圖片水平對齊，不能直接對圖片設(shè)置text-align屬性，而是通過對父元素添加該屬性實現(xiàn)的。案例演示圖片的對齊-2縱向垂直對齊，通過vertical-align屬性案例演示2案例演示1圖片的剪切-1在網(wǎng)站設(shè)計中，有時候會遇到對一張圖片做多處使用的情況。例如在子頁面中以200*200尺寸顯
5、示，而在首頁由于所給的空間不夠，只允許顯示200*100的尺寸，那該怎么辦呢？CSS能很好的實現(xiàn)圖片的剪切圖片的剪切-2在此，介紹一個新屬性：overflow:hidden（將超出容器的部分隱藏起來的作用）案例演示
HTML部分：div{width:300px;height:260px;overflow:hidden;}img{margin-left:-180px;margin-top:-50px;}CSS部分：圖片替代文本什么時候才會用“圖片替代文本”呢？案例演示1、使用特
6、殊字體制作的圖片作為文章標(biāo)題更為吸引人，改善閱讀環(huán)境；2、不破壞原有文本結(jié)構(gòu)，不影響搜索引擎的收錄。圖文混排文章段落中經(jīng)常需要插入圖片，我們通過兩種方式對比進(jìn)行了解：第一種方式：傳統(tǒng)的表格式布局中，插入一個表格，在表格的單元格中插入圖片，通過對單元格設(shè)置align屬性來控制圖片居中、居左、居右顯示。第二種方式：在CSS布局中，我們采用新的思路實現(xiàn)，主要是通過對圖片設(shè)置float屬性。案例演示圖文實例：八仙過海案例演示千里之行始于足下14
