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

下載本文檔

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

文檔簡(jiǎn)介

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

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

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論