第7章用CSS設(shè)置圖像和圓角_第1頁
第7章用CSS設(shè)置圖像和圓角_第2頁
第7章用CSS設(shè)置圖像和圓角_第3頁
第7章用CSS設(shè)置圖像和圓角_第4頁
第7章用CSS設(shè)置圖像和圓角_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

第7章用CSS設(shè)置圖像和圓角

本章簡介：圖片是網(wǎng)頁中不可缺少的內(nèi)容，它能使頁面更加豐富多彩，能讓人更直觀地感受網(wǎng)頁所要傳達給瀏覽者的信息。本節(jié)詳細介紹CSS設(shè)置圖片風(fēng)格樣式的方法，包括圖片的邊框、對齊方式和圖文混排等，并通過實例綜合講解文字和圖片的各種運用。使用CSS可以方便地使用各種手段把頁面靈活地分為多個部分。但是簡單分割出來的都是矩形方框，設(shè)置背景顏色和邊框的顏色，產(chǎn)生的都只能是單調(diào)的矩形方框。而在網(wǎng)頁中，經(jīng)常需要用到圓角的設(shè)計。

用CSS設(shè)置圖像樣式7.1用CSS設(shè)置背景樣式7.2設(shè)置圓角效果7.37.1用CSS設(shè)置圖像樣式圖片不僅能夠增加網(wǎng)頁的吸引力，同時也大大地提升了用戶瀏覽網(wǎng)頁的體驗。圖片的展示形式豐富多樣，不同形式的圖片展現(xiàn)也讓瀏覽網(wǎng)頁的樂趣變得更加多樣化。作為單獨的圖片本身，它的很多屬性可以直接在HTML中進行調(diào)整，但是通過CSS統(tǒng)一管理，不但可以更加精確地調(diào)整圖片的各種屬性，還可以實現(xiàn)很多特殊的效果。首先講解用CSS設(shè)置圖片基本屬性的方法，為進一步深入探討打下基礎(chǔ)。7.1.1設(shè)置圖片邊框在HTML中可以直接通過<img>標(biāo)記的border屬性值為圖片添加邊框，屬性值為邊框的粗細，以像素為單位，從而控制邊框的粗細。當(dāng)設(shè)置該值為0時，則顯示為沒有邊框。1．基本屬性2．為不同的邊框分別設(shè)置樣式7.1.2設(shè)置多色邊框在上述的案例中，使用borde-color屬性為圖像添加邊框色，不過添加的都是單一顏色值。CSS3增強了該屬性的功能，使它可以為邊框添加更多的顏色，從而方便設(shè)計者設(shè)計漸變等絢麗的邊框效果。border-color屬性可以設(shè)置很多不同的值，從而對列邊框設(shè)置不同的樣式。邊框漸變色顯示邊框立體效果7.1.3設(shè)置邊框背景在CSS3之前，如果要添加圖像邊框，元素的長或?qū)捠请S時可變的，用戶通常采用的做法是讓元素的每條邊單獨使用一幅圖像文件，但是這種做法也有缺點：一方面是比較麻煩；另一方面是頁面上使用的元素比較多。針對這種情況，CSS3中增加了一個border-image屬性，可以讓處于隨時變化狀態(tài)的元素的長或?qū)挼倪吙蚪y(tǒng)一使用一個圖像文件來繪制。邊框背景圖像在GoogleChrome瀏覽器中預(yù)覽7.1.4設(shè)置各種邊框效果使用border-image屬性，制作對角圓角效果。圓角邊框素材對角圓角7.1.4設(shè)置各種邊框效果使用border-image屬性，制作對角圓角效果。圓角邊框素材對角圓角邊框背景圖像下方兩個角為圓角效果7.1.4設(shè)置各種邊框效果邊框背景圖像下方兩個角為圓角效果7.1.4設(shè)置各種邊框效果邊框背景圖像下方兩個角為圓角效果使用邊框圖像也可以制作出陰影的效果，和前面相同，在制作之前，要先制作出帶有陰影效果的圖像。7.1.4設(shè)置各種邊框效果邊框背景圖像圓角效果的選項卡我們在瀏覽網(wǎng)頁時，會經(jīng)常發(fā)現(xiàn)一些圓角效果的選項卡，這些選項卡如何制作呢？現(xiàn)在就比較方便了，可以使用邊框圖像屬性來進行制作，和前面相同在制作之前，想制作一個圓角圖像。7.1.5圖片縮放CSS控制圖片的大小與HTML一樣，也是通過width和height兩個屬性來實現(xiàn)的。所不同的是CSS中可以使用更多的值，如上一章中“文字大小”一節(jié)提到的相對值和絕對值等。7.1.6圖文混排Word中文字與圖片有很多排版的方式，在網(wǎng)頁中同樣可以通過CSS設(shè)置實現(xiàn)各種圖文混排的效果。本節(jié)介紹CSS圖文混排的具體方法。1．文字環(huán)繞2．設(shè)置圖片與文字的間距圖片與文字的距離7.1.7制作八大行星科普網(wǎng)頁實例本節(jié)通過具體實例，進一步講解圖文混排方法的使用，并把該方法運用到實際的網(wǎng)站制作中。本例以介紹太陽系的八大行星為題材，充分利用CSS圖文混排的方法，實現(xiàn)頁面效果。八大行星頁面7.1.8設(shè)置圖片與文字的對齊方式當(dāng)圖片與文字同時出現(xiàn)在頁面上的時候，圖片的對齊方式就顯得很重要了。如何能夠合理地將圖片對齊到理想的位置，成為頁面是否整體協(xié)調(diào)、統(tǒng)一的重要因素。1．橫向?qū)R方式2．縱向?qū)R方式水平對齊圖像與文字中間對齊7.2用CSS設(shè)置背景樣式本節(jié)首先要介紹顏色的多種設(shè)置方法，之后介紹如何設(shè)置網(wǎng)頁和文字的背景顏色，以及多種背景圖片樣式的設(shè)置方法。7.2.1設(shè)置背景顏色在HTML中，設(shè)置網(wǎng)頁的背景顏色利用的是<body>標(biāo)記中的bgcolor屬性，而在CSS中不但可以設(shè)置網(wǎng)頁的背景顏色，還可以設(shè)置文字的背景顏色。在CSS中，網(wǎng)頁元素的背景顏色使用background-color屬性來設(shè)置，屬性值為某種顏色。顏色值的表示方法和前面介紹的文字顏色設(shè)置方法相同。網(wǎng)頁的初始效果設(shè)置標(biāo)題“綠底白字”效果7.2.2設(shè)置背景圖像背景不僅可以設(shè)置為某種顏色，CSS中還可以用圖像作為網(wǎng)頁元素的背景，而且用途極為廣泛。設(shè)置背景圖像，使用background-image屬性實現(xiàn)。準(zhǔn)備一個背景圖像文件頁面的body元素設(shè)置了背景圖像后的效果7.2.3設(shè)置背景圖像平鋪在默認(rèn)情況下，圖像會自動向水平和豎直兩個方向平鋪。如果不希望平鋪，或者只希望沿著一個方向平鋪，可以使用background-repeat屬性來控制。漸變色構(gòu)成的背景圖像同時設(shè)置背景圖像和背景顏色7.2.4設(shè)置多重背景圖像background是CSS中使用最多一種屬性。為了設(shè)計師能夠靈活地設(shè)計網(wǎng)頁效果，CSS3增強了該屬性的功能，允許在同一元素內(nèi)疊加多個背景圖像。background屬性可以設(shè)置很多不同的值，從而對背景圖像設(shè)置不同的樣式。拼合圖像素材多背景拼合效果7.2.5設(shè)置背景圖像位置通過background-position屬性設(shè)置背景圖像的具體位置。將背景圖像放在左上角用百分比設(shè)置背景圖像的位置7.2.6固定背景圖片位置在網(wǎng)頁上設(shè)置背景圖片時，隨著滾動條的移動，背景圖片也會跟著一起移動。使用CSS的background-attachment屬性可以把背景圖像設(shè)置成固定不變的效果，使背景圖像固定，而不跟隨網(wǎng)頁內(nèi)容一起滾動。背景圖像會隨頁面一起移動將背景圖像固定在瀏覽器窗口中7.2.7設(shè)置背景圖像坐標(biāo)原點background-origin屬性定義background-position屬性的參考位置。在默認(rèn)情況下，background-position屬性總是以元素的左上角坐標(biāo)原點進行背景圖像定位。使用background-origin屬性可以改變這種定位方式。設(shè)置背景圖像坐標(biāo)以邊框開始7.2.8設(shè)置背景圖像的大小在CSS2.0及以前的版本中，圖像大小是不可以控制的，如果想要使背景圖像填充元素的背景區(qū)域，則需要事先設(shè)計更大的背景圖像，否則背景圖像只能按照平鋪的方法進行填充。CSS3新增了background-size屬性，該屬性可以控制背景圖像的大小。沒有控制大小之前控制大小之后的效果7.2.9設(shè)置標(biāo)題的圖像替換使用背景圖像的方式替換標(biāo)題。制作一個標(biāo)題背景圖像圖像替換的最終效果7.3設(shè)置圓角效果在網(wǎng)頁設(shè)計中，通常需要把網(wǎng)頁分為若干個部分，這正是CSS的強項。使用CSS可以方便地使用各種手段把頁面靈活地分為多個部分。但是簡單分割出來的都是矩形方框，設(shè)置背景顏色和邊框的顏色，產(chǎn)生的都只能是單調(diào)的矩形方框。而在網(wǎng)頁中，經(jīng)常需要用到圓角的設(shè)計。本章專門對圓角的設(shè)計進行介紹。7.3.1圓角屬性在CSS3之前，如果要用圓角效果，需要圖像文件才能達到。在CSS3中可以使用border-radius屬性就可以實現(xiàn)圓角效果。7.3.2圓角實例div{height:120px;border:10pxsolid#C0C;-moz-border-radius:20px;/*兼容Gecko引擎*/-webkir-border-radius:20px;/*兼容Webkit引擎*/border-radius:20px;/*兼容標(biāo)準(zhǔn)引擎*/}元素四角均為圓角7.3.3圓角實例使用border-radius屬性可以設(shè)置容器邊角效果。不同屬性值的效果7.

溫馨提示

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

評論

0/150

提交評論