（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目七電子課件

1、YCF正版可修改PPT（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目七電子課件CSS 3圖文混排項(xiàng)目七授課教師：姓名WEB前端設(shè)計(jì)基礎(chǔ)Contents1.項(xiàng)目描述2.知識(shí)準(zhǔn)備3.項(xiàng)目實(shí)施4.項(xiàng)目拓展5.項(xiàng)目小結(jié)6.技能訓(xùn)練一 項(xiàng)目描述本項(xiàng)目學(xué)習(xí)要點(diǎn)CSS 3美化段落；CSS 3美化圖片；CSS 3圖文混排。CSS 3美化文本；二 知識(shí)準(zhǔn)備CSS 3美化文本；CSS 3美化段落；CSS 3圖文混排。CSS 3美化圖片；CSS 3美化文本1.設(shè)置文本字體在CSS 3樣式中，使用font-family屬性定義文本的字體類型，格式如下：font-family：字體1,字體2,字體3;font-family可定義多種

2、字體，多個(gè)字體將按優(yōu)先順序排列，以逗號(hào)隔開（逗號(hào)為英文逗號(hào)）。如果字體名稱包含空格，如Times New Roman，則應(yīng)該將名稱用引號(hào)括起來。CSS 3美化文本2.設(shè)置文本大小在CSS 3樣式中，使用font-size屬性定義文本的大小，格式如下：font-size：像素值/關(guān)鍵字;font-size的屬性值可以使用兩種方式，一種是使用像素為單位的數(shù)值；二是使用關(guān)鍵字，如表所示。關(guān)鍵字說 明xx-small最小。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整x-small較小。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整small小。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整medium默認(rèn)值，正常。絕對(duì)字體尺寸，根據(jù)對(duì)

3、象字體進(jìn)行調(diào)整large大。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整x-large較大。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整xx-large最大。絕對(duì)字體尺寸，根據(jù)對(duì)象字體進(jìn)行調(diào)整larger相對(duì)字體尺寸。相對(duì)于父對(duì)象中字體尺寸進(jìn)行相對(duì)增大，使用成比例的em單位計(jì)算smaller相對(duì)字體尺寸。相對(duì)于父對(duì)象中字體尺寸進(jìn)行相對(duì)減小，使用成比例的em單位計(jì)算length百分?jǐn)?shù)或由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長(zhǎng)度值，不可為負(fù)值。百分比取值是基于父對(duì)象中的字體尺寸CSS 3美化文本3.設(shè)置文本粗細(xì)在CSS 3樣式中，使用font-weight屬性定義文本的粗細(xì)程度，格式如下：font-weight:粗細(xì)值/關(guān)鍵字;

4、粗細(xì)值可以使用兩種方式，一是使用100900 的數(shù)值（100、200、900），值越大就表示越粗，值越小就表示越細(xì)，400相當(dāng)于正常字體normal，是瀏覽器默認(rèn)的字體粗細(xì)， 700相當(dāng)于bold；二是使用關(guān)鍵字，關(guān)鍵字如表所示。如果沒有設(shè)置該屬性，則使用默認(rèn)值normal。關(guān)鍵字說 明normal默認(rèn)值，標(biāo)準(zhǔn)字體lighter定義更細(xì)的字體，相對(duì)值bold定義粗體字體bolder定義更粗的字體，相對(duì)值CSS 3美化文本4.設(shè)置文本顏色在CSS 3樣式中，使用color屬性定義文本的顏色，格式如下： color:顏色值;顏色值可以使用顏色的英文名稱、一個(gè)十六進(jìn)制的RGB值等多種方式來表示，如表

5、所示。顏色值說 明color_name顏色值為顏色名稱的英文（例red，表示紅色）hex_number顏色值為十六進(jìn)制值（例#ff0000或#f00，表示紅色）rgb_number顏色值為RGB代碼（例rgb(255,0,0)，表示紅色）rgba_number顏色值為RGBA代碼（例rgba(255,0,0,0.5)，表示紅色）inherit從父元素繼承顏色hsl_number顏色值為HSL代碼（例hsl(0,75%,50%)）hsla_number顏色值為HSLA代碼（例hsla(120,50%,50%,1)）CSS 3美化文本5.設(shè)置文本樣式在CSS 3樣式中，使用font-style屬性

6、定義文本的樣式，格式如下： font-style:屬性值;屬性值如表所示。屬性值說 明normal默認(rèn)值，標(biāo)準(zhǔn)的字體樣式italic斜體的字體樣式oblique傾斜的字體樣式inherit從父元素繼承的字體樣式CSS 3美化文本6.設(shè)置文本陰影效果在CSS 3樣式中，文本陰影效果屬于文本的高級(jí)樣式，如果使用上面的CSS樣式進(jìn)行定義，不能得到正確顯示效果，這就需要使用特定的CSS標(biāo)簽來完成。使用CSS 3樣式中的text-shadow屬性定義文字的陰影效果，格式如下： text-shadow:陰影水平偏移值（可取正負(fù)值） 陰影垂直偏移值（可取正負(fù)值） 陰影模糊值 陰影顏色;text-shadow

7、屬性有四個(gè)，后兩個(gè)為可選。CSS 3美化文本6.設(shè)置文本陰影效果【例7-1】CSS3設(shè)置文本陰影效果實(shí)例，代碼如下所示（示例文件7-1.html）。設(shè)置文本陰影*margin:0;padding:0;h1font-family: Arial Black;font-size: 60px;text-shadow: 2px 3px 6px #333;h2font-family: Arial Black;font-size: 60px;/*設(shè)置多重陰影效果使用逗號(hào)隔開*/text-shadow: 2px 2px 0px #333, 2px 5px 10px green, 2px -2px 5px re

8、d;Text shadowText shadow在chrome瀏覽器中預(yù)覽CSS 3美化文本7.設(shè)置文本溢出效果text-overflow屬性定義當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記。要實(shí)現(xiàn)溢出文本時(shí)產(chǎn)生省略號(hào)的效果，還必須定義強(qiáng)制文本在一行顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）。text-overflow屬性格式如下： text-overflow:clip | ellipsis | string;text-overflow屬性值如表所示。屬性值說 明clip簡(jiǎn)單地修剪文本，不顯示省略標(biāo)記ellipsis當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記string

9、使用給定的字符串來代表被修剪的文本CSS 3美化文本8.設(shè)置文本控制換行當(dāng)在一個(gè)指定區(qū)域顯示的一行文本過長(zhǎng)，一行內(nèi)顯示不完時(shí)，就需要進(jìn)行換行設(shè)置。在CSS 3中使用word-wrap屬性來控制文本換行。word-wrap屬性格式如下：word-wrap:normal | break-word;word-wrap屬性值如表所示。屬性值說 明normal只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）break-word內(nèi)容將在邊界內(nèi)換行CSS 3美化文本8.設(shè)置文本控制換行【例7-2】CSS3美化文本實(shí)例，代碼如下所示（示例文件7-2.html）。CSS3美化文本bodyfont-family: 微軟

10、雅黑;font-size: 14px;pcolor:rgb(200,60,0);中國(guó)夢(mèng)始信泥土有芬芳(font-weight: : bold;)轉(zhuǎn)眼捏成這般模樣(font-weight: bolder;)你是女媧托生的精靈(font-weight: lighter;)你是夸父追日的夢(mèng)想(font-weight: normal;)讓我輕輕走過你的跟前(font-weight: 100;)沐浴著你童真的目光(font-weight: 400;)讓我牽手與你同行(font-weight: 900;)小腳丫奔跑在希望的田野上(font-size: 80%;)啊，中國(guó)(font-style: inher

11、it;)我的夢(mèng)(font-style: italic;)夢(mèng)正香(font-style: oblique;)在chrome瀏覽器中預(yù)覽CSS 3美化文本9.設(shè)置在線字體在CSS 3之前，網(wǎng)頁設(shè)計(jì)師在使用字體時(shí)，必須保證使用的字體在用戶的計(jì)算機(jī)中也已安裝好，才能正確還原設(shè)計(jì)者的字體設(shè)計(jì)意圖?，F(xiàn)在通過CSS3，網(wǎng)頁設(shè)計(jì)師可以使用任意字體，可將該字體文件存放到 web 服務(wù)器上，字體會(huì)在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)上。格式如下：font-face font-family: ; src: , *; font-weight: ; font-style: ; CSS 3美化文本9.設(shè)置在線字體YourWe

12、bFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認(rèn)字體，他將被引用到你的Web元素中的font-family。如“font-family:YourWebFontName;”source:此值指的是你自定義的字體的存放路徑，可以是相對(duì)路徑也可以是絕路徑；format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識(shí)別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；weight和style:這兩個(gè)值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。CS

13、S 3美化文本9.設(shè)置在線字體【例7-3】CSS3在線字體實(shí)例，代碼如下所示（示例文件7-3.html）。CSS 3在線字體 font-facefont-family: TestFont;src: url(fonts/Sansation_Light.ttf);divfont-family:TestFont;font-size: 60px;color:#f00;CSS 3 Web Font在chrome瀏覽器中預(yù)覽CSS 3美化文本10.設(shè)置旋轉(zhuǎn)特效transform屬性能夠設(shè)置元素的旋轉(zhuǎn),向元素應(yīng)用2D或3D轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。其屬性值有很多，包括rotate

14、( ) / skew( ) / scale( ) / translate( , ) ，分別還有x、y之分，比如：rotatex( ) 和 rotatey( ) ，以此類推。在此簡(jiǎn)單介紹一下ratate值。格式如下：transform:rotate(angle單位為deg); 定義2D旋轉(zhuǎn)在參數(shù)中規(guī)定角度,angle表示角度。CSS 3美化段落1.設(shè)置詞間距在網(wǎng)頁設(shè)計(jì)中，如果單詞之間的間隔設(shè)置合理，將給人賞心悅目的感覺。在CSS 3中使用word-spacing屬性定義增加或者減少詞與詞之間的間隔。格式如下：word-spacing: normal | length;word-spacing屬性

15、值如表所示。屬性值說 明normal默認(rèn)值，定義單詞之間的標(biāo)準(zhǔn)間隔length定義單詞之間的固定寬度，可取正負(fù)值，單位為像素CSS 3美化段落2.設(shè)置字間距在CSS 3中使用letter-spacing來定義文本之間的距離，格式如下：letter-spacing: normal | length;letter-spacing屬性值如表所示。屬性值說 明normal默認(rèn)間隔，以標(biāo)準(zhǔn)間隔顯示length由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長(zhǎng)度值，可取正負(fù)值，單位為像素CSS 3美化段落3.設(shè)置文本修飾效果在CSS 3中，使用text-decoration屬性可以為文本設(shè)置多種修飾效果，如下劃線、刪除線等，格

16、式如下： text-decoration:屬性值; text-decoration屬性值如表所示。屬性值說 明none默認(rèn)值，對(duì)文本不進(jìn)行任何修飾，用這個(gè)屬性值也可以去掉已經(jīng)有下劃線或刪除線或頂劃線的樣式overline上劃線underline下劃線line-through刪除線blink閃爍CSS 3美化段落3.設(shè)置文本修飾效果【例7-4】CSS 3美化段落實(shí)例一，代碼如下所示（示例文件7-4.html）。CSS3美化段落例1pline-height: 10px;始信泥土有芬芳轉(zhuǎn)眼捏成這般模樣你是女媧托生的精靈你是夸父追日的夢(mèng)想Let me gently walk past you.Bath

17、ed in your childlike eyes.Let me walk through your eyes.Small feet running in the field of hope.Well, ChinaMy dream!The dream is fragrant.在chrome瀏覽器中預(yù)覽CSS 3美化段落4.設(shè)置文本的垂直對(duì)齊方式在CSS 3中，使用vertical-align屬性設(shè)置垂直對(duì)齊方式，此屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊，可設(shè)置為負(fù)長(zhǎng)度值和百分比值。在表單元格中，此屬性可設(shè)置單元格內(nèi)容的對(duì)齊方式。格式如下：vertical-align:屬性值;

18、vertical-align屬性值如表所示。屬性值說 明baseline默認(rèn)，元素放在父元素的基線上sub垂直對(duì)齊文本的下標(biāo)super垂直對(duì)齊文本的上標(biāo)top元素的頂端與行中最高元素的頂端對(duì)齊text-top元素的頂端與父元素字體的頂端對(duì)齊middle此元素放在父元素的中部bottom元素的頂端與行中最低元素的頂端對(duì)齊text-bottom把元素的底端與父元素字體的底端對(duì)齊length設(shè)置元素的堆疊順序%使用 line-height 屬性的百分比值來排列此元素，允許使用負(fù)值inherit從父元素繼承 vertical-align 屬性的值CSS 3美化段落5.設(shè)置文本的水平對(duì)齊方式文本除了垂直

19、對(duì)齊方式外，還有水平對(duì)齊方式，包括水平方向上的居中、左對(duì)齊、右對(duì)齊等。在CSS 3中，使用text-align屬性可定義文本的水平對(duì)齊方式，格式如下：text-align:屬性值;text-align屬性值如表所示。屬性值說 明start文本向行的開始邊緣對(duì)齊end文本向行的結(jié)束邊緣對(duì)齊left文本向行的左邊緣對(duì)齊，默認(rèn)值right文本向行的右邊緣對(duì)齊center文本在行內(nèi)居中對(duì)齊justify文本根據(jù)text-justify的屬性值設(shè)置分散對(duì)齊inherit繼承父元素的對(duì)齊方式CSS 3美化段落6.設(shè)置文本大小寫轉(zhuǎn)換在文本編輯中，根據(jù)需要將大寫字母轉(zhuǎn)換為小寫字母，或?qū)⑿懽帜皋D(zhuǎn)換為大寫字母，

20、都是非常常見的。在CSS 3中，使用text-transform屬性可定義文本的大小寫轉(zhuǎn)換，格式如下：text-transform:屬性值;text-transform屬性值如表所示。屬性值說 明none無轉(zhuǎn)換capitalize將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫，其余不轉(zhuǎn)換uppercase轉(zhuǎn)換成大寫lowercase轉(zhuǎn)換成小寫CSS 3美化段落7.設(shè)置文本的行高在CSS 3中，使用line-height屬性可定義文本的行高，即一行的高度，格式如下：line-height:屬性值;line-height屬性值如表所示。屬性值說 明normal默認(rèn)行高，即網(wǎng)頁文本的標(biāo)準(zhǔn)行高length百分比數(shù)值

21、或由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長(zhǎng)度值，可以為負(fù)值CSS 3美化段落8.設(shè)置文本的縮進(jìn)在段落文本中通常使用首行縮進(jìn)兩個(gè)字符的方式，來表示段落的開始。在CSS 3中，使用text-indent屬性定義文本塊中的首行縮進(jìn)，格式如下：text-indent:length;其中，length屬性值表示由百分比數(shù)值或由浮點(diǎn)數(shù)和單位標(biāo)識(shí)符組成的長(zhǎng)度值，可以為負(fù)值。也就是說使用text-indent屬性上課以定義兩種縮進(jìn)方式，一種是直接定義縮進(jìn)的長(zhǎng)度，另一種是定義縮進(jìn)的百分比。CSS 3美化段落9.設(shè)置文本的空白處理在CSS 3中，使用white-space屬性定義對(duì)字符串或文本間空白的處理方式，格式如下：wh

22、ite-space:屬性值;white-space屬性值如表所示。屬性值說 明normal默認(rèn)值，空白會(huì)被瀏覽器忽略pre空白會(huì)被瀏覽器保留nowrap文本不會(huì)換行，文本會(huì)在同一行上繼續(xù)，直到遇到標(biāo)簽為止pre-wrap保留空白，但是正常地進(jìn)行換行pre-line合并空白，但是保留換行符inherit從父元素繼承white-space屬性值CSS 3美化段落10.設(shè)置文本的反排在編輯網(wǎng)頁文本時(shí)，通常文檔的基本方向是從左到右，有時(shí)需要將文檔的方向顯示為從右到左，在CSS 3中，通過unicode-bidi和direction兩個(gè)屬性來解決文本反排的效果。unicode-bidi格式如下：unic

23、ode-bidi:屬性值;unicode-bidi屬性值如表所示。屬性值說 明normal默認(rèn)值。元素不會(huì)打開附加的一層嵌套，對(duì)于行內(nèi)元素，順序的隱式重排會(huì)跨元素邊界進(jìn)行embed如果是一個(gè)行內(nèi)元素，將會(huì)打開附加的一層嵌套，這個(gè)嵌套層的方向由 direction 屬性指定，會(huì)在元素內(nèi)部隱式地完成順序重排bidi-override這會(huì)為行內(nèi)元素創(chuàng)建一個(gè)覆蓋，對(duì)于塊級(jí)元素，將為不在另一塊中的行內(nèi)后代創(chuàng)建一個(gè)覆蓋。這說明，順序重排在元素內(nèi)部嚴(yán)格按照 direction 屬性進(jìn)行；忽略了雙向算法的隱式部分。CSS 3美化段落10.設(shè)置文本的反排direction屬性用于設(shè)置文檔流的方向，其格式如下：d

24、irection:屬性值;direction屬性值如表所示。屬性值說 明ltr文本流從左到右rtl文本流從右到左inherit文本流的值不可繼承CSS 3美化段落10.設(shè)置文本的反排【例7-5】CSS 3美化段落實(shí)例二，代碼如下所示（示例文件7-5.html）。CSS3美化段落例2pline-height: 8px;中國(guó)夢(mèng)始信泥土有芬芳轉(zhuǎn)眼捏成這般模樣你是女媧托生的精靈你是夸父追日的夢(mèng)想Let me gently walk past you.Bathed in your childlike eyes.Let me walk through your eyes.Small feet runnin

25、g in the field of hope.Well, China My dream! The dream is fragrant. 在chrome瀏覽器中預(yù)覽CSS 3美化圖片1.圖片大小在HTML 5網(wǎng)頁排版中，設(shè)置圖片的大小有三種方法，分別是：（1）通過描述標(biāo)記width和height縮放圖片。通過img標(biāo)簽的width和height屬性來設(shè)置圖片的大小。width和height分別表示圖片的寬度和高度，可以是數(shù)值或百分比，單位可以是px。（2）使用CSS3中的max-width和max-height縮放圖片。max-width和max-height分別來設(shè)置圖片的寬度最大值和高度最大

26、值。在定義圖片大小時(shí)，如果圖片的默認(rèn)尺寸超過了定義的大小，就以max-width所定義的寬度值顯示，圖片的高度將同比例變化，如果定義的是max-height的值，圖片的寬度將同比例變化。如果圖片的尺寸小于最大寬度或者高度，那么圖片就按原尺寸大小顯示。（3）使用CSS3中的width和height縮放圖片。在CSS3中可以使用width和height屬性來設(shè)置圖片的寬度和高度，從而實(shí)現(xiàn)對(duì)圖片的縮放效果。如果僅僅設(shè)置了圖片的一個(gè)屬性值（width或者h(yuǎn)eight），而沒有設(shè)置另一個(gè)屬性值時(shí)，圖片本身會(huì)自動(dòng)等比例縮放。CSS 3美化圖片1.圖片大小【例7-6】CSS美化網(wǎng)頁圖片實(shí)例，代碼如下所示（示

27、例文件7-6.html）。CSS美化網(wǎng)頁圖片#img02max-width: 150px;#img03width:75px;height:75px;在chrome瀏覽器中預(yù)覽CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式在一個(gè)圖文頁面中，圖片對(duì)齊方式和文字排版同樣影響頁面的整潔簡(jiǎn)約。下面學(xué)習(xí)使用CSS 3屬性定義圖文對(duì)齊方式。設(shè)置圖片水平對(duì)齊text-align圖片的水平對(duì)齊方式和文本的水平對(duì)齊方式類似，都有左、中、右三種對(duì)齊方式。由于標(biāo)簽本身沒有對(duì)齊屬性，所以要定義圖片的對(duì)齊方式，不能對(duì)標(biāo)簽直接定義圖片樣式，需要在圖片的上一級(jí)標(biāo)簽（父標(biāo)簽）定義對(duì)齊方式，讓圖片繼承父標(biāo)簽的對(duì)齊方式，即使用CSS繼承

28、父標(biāo)簽的text-align屬性來定義對(duì)齊方式。CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式text-align屬性取值如表所示。text-align屬性值說明left默認(rèn)值，左對(duì)齊center居中對(duì)齊right右對(duì)齊CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式【例7-7】圖片的水平對(duì)齊實(shí)例，代碼如下所示（示例文件7-7.html）。圖片的水平對(duì)齊方式imgwidth: 75px;height: 75px;圖片左對(duì)齊圖片居中對(duì)齊圖片右對(duì)齊在chrome瀏覽器中預(yù)覽CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式設(shè)置圖片垂直對(duì)齊vertical-align通過對(duì)圖片的垂直對(duì)齊方式的設(shè)置，可以設(shè)置圖片和文字的高度

29、一致，在CSS 3中使用vertical-align屬性來定義。vertical-align屬性設(shè)置元素的垂直對(duì)齊方式，就是定義行內(nèi)元素和基線相對(duì)于該元素所在行的基線的垂直對(duì)齊，允許指定負(fù)值和百分比值，就會(huì)使元素降低。vertical-align屬性常用取值如表所示。vertical-align屬性取值說明top把元素的頂端與行中最高元素的頂端對(duì)齊middle把此元素放置在父元素的中部baseline默認(rèn)，元素放置在父元素的基線上bottom把元素的底端與行中最底的元素底端對(duì)齊CSS 3美化圖片2.設(shè)置圖片的對(duì)齊方式【例7-8】圖片的垂直對(duì)齊實(shí)例，代碼如下所示（示例文件7-8.html）。圖片

30、的垂直對(duì)齊方式pborder:1px red solid;margin-top:5px;imgwidth: 75px;height: 75px;垂直對(duì)齊方式：vertical-align:top;垂直對(duì)齊方式：vertical-align:middle;垂直對(duì)齊方式：vertical-align:bottom;在chrome瀏覽器中預(yù)覽CSS 3圖文混排1. 設(shè)置圖文環(huán)繞效果在CSS 3中，使用浮動(dòng)屬性float可以設(shè)置文字環(huán)繞效果。float屬性主要是定義元素向哪個(gè)方向上浮動(dòng)，浮動(dòng)的元素不管它是哪種元素，都會(huì)生成一個(gè)塊。一般情況下，此屬性總應(yīng)用于圖像，使文字環(huán)繞在圖像周圍，有時(shí)也可以應(yīng)用于其

31、他元素浮動(dòng)，但需要指定一個(gè)明確的寬度，否則此元素會(huì)盡可能變窄。float屬性的取值如表所示。float屬性值說明none默認(rèn)值，元素不浮動(dòng)left元素向左浮動(dòng)right元素向右浮動(dòng)CSS 3圖文混排2. 設(shè)置圖片和文字的間距如果需要設(shè)置圖片和文字之間的距離，即文字之間存在一定間距，可以使用CSS3中的padding屬性來設(shè)置。padding屬性主要用來在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性，即可以設(shè)置元素所有內(nèi)邊距的寬度，或者設(shè)置個(gè)邊上內(nèi)邊距的寬度。padding屬性的語法格式如下：padding:padding-top | padding-right | padding-bottom | paddi

32、ng-left參數(shù)值padding-top用來設(shè)置距離頂部的內(nèi)邊距；padding-right用來設(shè)置距離右部的內(nèi)邊距；padding-bottom用來設(shè)置距離底部的內(nèi)邊距；padding-left用來設(shè)置距離左部的內(nèi)邊距。CSS 3圖文混排2. 設(shè)置圖片和文字的間距【例7-9】圖文混排實(shí)例，代碼如下所示（示例文件7-9.html）。圖文混排pfont-size: 14px;text-indent: 28px;imgwidth: 200px;float:right;border:1px red solid;padding-top:10px;padding-bottom: 30px;paddin

33、g-left: 50px;這幾天心里頗不寧靜。今晚在院子里坐著乘涼，忽然想起日日走過的荷塘，在這滿月的光里，總該另有一番樣子吧。月亮漸漸地升高了，墻外馬路上孩子們的歡笑，已經(jīng)聽不見了;妻在屋里拍著閏兒，迷迷糊糊地哼著眠歌。我悄悄地披了大衫，帶上門出去。沿著荷塘，是一條曲折的小煤屑路。這是一條幽僻的路;白天也少人走，夜晚更加寂寞。荷塘四面，長(zhǎng)著許多樹，蓊蓊郁郁的。路的一旁，是些楊柳，和一些不知道名字的樹。沒有月光的晚上，這路上陰森森的，有些怕人。今晚卻很好，雖然月光也還是淡淡的。路上只我一個(gè)人，背著手踱著。這一片天地好像是我的;我也像超出了平常的自己，到了另一世界里。我愛熱鬧，也愛冷靜;愛群居，

34、也愛獨(dú)處。像今晚上，一個(gè)人在這蒼茫的月下，什么都可以想，什么都可以不想，便覺是個(gè)自由的人。白天里一定要做的事，一定要說的話，現(xiàn)在都可不理。這是獨(dú)處的妙處，我且受用這無邊的荷香月色好了。在chrome瀏覽器中預(yù)覽三 項(xiàng)目實(shí)施圖文混排；圖片特效制作。圖文混排通過此項(xiàng)目的學(xué)習(xí)，學(xué)習(xí)到CSS 3的文本、段落、圖片的屬性設(shè)置，結(jié)合這些知識(shí)制作一個(gè)圖文混排的實(shí)例。圖文混排bodyfont-family: 微軟雅黑,黑體;font-size: 14px;divborder:2px red solid;padding:10px;#img01float: right;text-align: center;#im

35、g01 imgwidth:250px;設(shè)置了ID為“img01”的div塊中img標(biāo)簽寬度為250像素（#img01 imgwidth:250px;）。設(shè)置了ID為“img01”的div塊向右浮動(dòng)（float: right;）、居中對(duì)齊（text-align: center;），實(shí)現(xiàn)了文字和圖片的環(huán)繞效果。設(shè)置了圖片的邊框?yàn)?像素的紅色實(shí)線（border:2px red solid;）、四個(gè)方向的內(nèi)邊距清除10像素（padding:10px;）。圖文混排啟動(dòng)Sublime程序，新建并保存文件名稱為7-10.html。第一步第二步Head標(biāo)簽內(nèi)的代碼輸入如下：內(nèi)嵌式Css樣式部分。設(shè)置了頁面字體

36、為微軟雅黑或黑體（font-family: 微軟雅黑,黑體;）、文字大小14像素（font-size: 14px;）。圖文混排第三步body標(biāo)簽內(nèi)的代碼輸入如下：CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，box model這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。右邊的圖片說明了盒子模型(Box Model)：盒子模型不同部分的說明：Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。Border(邊框) -

37、 圍繞在內(nèi)邊距和內(nèi)容外的邊框。Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。元素的寬度和高度最終元素的總寬度計(jì)算公式是這樣的：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距元素的總高度最終計(jì)算公式是這樣的：總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距使用了標(biāo)題標(biāo)簽h2并居中顯示標(biāo)題。設(shè)置了段落首行縮進(jìn)28像素。將圖片和文字放置在div塊中。使用了無序列表。使用了自定義列表。圖文混排再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四

38、步圖片特效制作圖片在網(wǎng)頁設(shè)計(jì)中越來越被重視，利用CSS屬性可以制作出絢麗的圖片特效，滿足客戶的視覺體驗(yàn)，此項(xiàng)目實(shí)施就是制作一個(gè)圖片特效實(shí)例。 body margin:30px;background-color:#CCC;.photowidth:290px;padding:10px;margin:10px;border:1px solid #BFBFBF;background-color:#FFF;box-shadow:10px 10px 10px #999999;/*圖片陰影的設(shè)置*/.r_leftfloat:left;transform:rotate(8deg);/*圖片向右傾倒*/imgw

39、idth:290px;height:215px;.r_right float:left;transform:rotate(-8deg);/*圖片向左傾倒*/圖片特效制作用Sublime編輯器新建并保存文件7-11.html。第一步第二步Head標(biāo)簽內(nèi)的CSS代碼輸入如下：內(nèi)嵌式Css樣式部分，主要實(shí)現(xiàn)了圖片陰影和div塊的旋轉(zhuǎn)效果。設(shè)置了body元素的背景顏色為灰色（background-color:#CCC;）、上下左右的外邊距為30像素（margin:30px;）。設(shè)置了類名為“photo”的div塊的寬度為290像素、內(nèi)邊距為10像素、外邊距為10像素、邊框?yàn)?像素的深灰色實(shí)線、背景顏色

40、為白色以及設(shè)置了為水平右移10像素、垂直下移10像素、模糊距離為10像素深灰色的陰影。分別設(shè)置了圖片向左、向右的傾斜。第20、25行定義了類名為“r_left”和“r_right”的div塊向左浮動(dòng)。第21、26行定義了兩個(gè)div塊分別向右、向左旋轉(zhuǎn)了8度。當(dāng)margin的屬性值為一個(gè)值是，表示上下左右四個(gè)邊的值都相同；當(dāng)margin的屬性值為兩個(gè)值時(shí)，第一個(gè)值表示上下外邊距的值，第二個(gè)值表示左右外邊距的值；當(dāng)margin的屬性值為三個(gè)值時(shí)，第一個(gè)值表示上外邊距的值，第二個(gè)值表示左右外邊距的值，第三個(gè)值表示下外邊距的值；當(dāng)margin的屬性值為四個(gè)值時(shí)，第一個(gè)值表示上外邊距的值，第二個(gè)值表示右

41、外邊距的值，第三個(gè)值表示下外邊距的值，第四個(gè)值表示左外邊距的值。圖片特效制作第三步body標(biāo)簽內(nèi)的HTML代碼輸入如下：唯有牡丹真國(guó)色，花開時(shí)節(jié)動(dòng)京城。我像只魚兒在你的荷塘，只為和你守候那皎白月光。創(chuàng)建了兩個(gè)div塊，在div塊中分別放置了一張圖片和一段文字。圖片特效制作再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步四 項(xiàng)目拓展在上面的項(xiàng)目實(shí)施中，學(xué)習(xí)制作了圖文混排和CSS圖片特效兩個(gè)實(shí)例，掌握了圖片、文字排版的技巧，下面制作文字、圖片列表排列的實(shí)例，來鞏固提高本項(xiàng)目所學(xué)知識(shí)。四 項(xiàng)目拓展啟動(dòng)Sublime程序，新建并保存文件名稱為7-12.h

42、tml。第一步第二步Head標(biāo)簽內(nèi)的CSS代碼輸入如下：bodybackground-color: #ccc;ulmargin:0 auto;width: 600px;overflow: hidden;list-style: none;lifloat:left;padding:4px 8px; width: 120px;background-color: #fff;margin: 2px 2px;imgdisplay: block;width: 120px;overflow: hidden;設(shè)置了body元素的背景顏色為灰色。設(shè)置了無序列表的上下外邊距為0像素及左右自動(dòng)、寬度為600像素、溢出

43、隱藏、列表樣式為無。設(shè)置了li標(biāo)簽向左浮動(dòng)、上下內(nèi)邊距為4像素及左右內(nèi)邊距為8像素、寬度為120像素、背景顏色為白色、上下外邊距為2像素及左右外邊距為2像素。設(shè)置了img為塊元素、寬度為120像素、溢出隱藏。CSS部分主要完成了無序列表ul、列表項(xiàng)li、圖片img、行內(nèi)標(biāo)簽span和超鏈接標(biāo)簽a及img標(biāo)簽的hover的樣式。使用無序列表的列表項(xiàng)li標(biāo)簽實(shí)現(xiàn)圖片和文字的行內(nèi)排列，在限定ul寬度的情況下，使用左浮動(dòng)的方法讓多個(gè)li標(biāo)簽排成兩行。四 項(xiàng)目拓展第二步atext-decoration: none;color:#666;a:hovercolor:#f60;img:hoveropacity

44、: 0.5;spandisplay: block;width: 100%;height: 100%;line-height: 16px;text-align: center;margin:10px auto;font-size:12px;設(shè)置了a標(biāo)簽鏈接下劃線為無、文本顏色為#666。設(shè)置了當(dāng)鼠標(biāo)移動(dòng)到img標(biāo)簽上的時(shí)候，img標(biāo)簽的不透明度為0.5。設(shè)置了span標(biāo)簽為塊元素、寬度為100%、高度為100%、行高為16像素、文本居中對(duì)齊、上下外邊距為10像素及左右自動(dòng)、文字大小為12像素。設(shè)置了當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上的時(shí)候，a標(biāo)簽的文本顏色為#f60。四 項(xiàng)目拓展第三步2017秋冬長(zhǎng)袖針織高領(lǐng)打底衫毛衣2017秋冬長(zhǎng)袖針織高領(lǐng)打底衫毛衣2017