第3課CSS1-設(shè)置方框與背景效果_第1頁
第3課CSS1-設(shè)置方框與背景效果_第2頁
第3課CSS1-設(shè)置方框與背景效果_第3頁
第3課CSS1-設(shè)置方框與背景效果_第4頁
第3課CSS1-設(shè)置方框與背景效果_第5頁
已閱讀5頁，還剩44頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

CSS第3課用CSS設(shè)置方框效果設(shè)置對象的背景顏色與背景圖像特別案例：首字下沉圖片替換標(biāo)題技術(shù)利用滑動門技術(shù)制作寬度變化的背景制作高度變化的背景效果第五章、用CSS設(shè)置方框效果邊框?qū)傩裕篵order寬度和高度：width、height對象浮動：float對象外邊距：margin5.1、給對象添加設(shè)置邊框

屬性（border）邊框?qū)傩杂?個：border-width：邊框粗細(xì)border-color：邊框顏色border-style：邊框線形也可以寫成：.test1{border:#0091pxdotted}

邊框顏色粗細(xì)線型<h1class=“test1">美麗的陽朔</h1><imgclass=“test2"src="pic/1.jpg"/>創(chuàng)建CSS樣式如下：<style>.test1{border:#0093pxdotted}.test2{border:#F002pxsolid}</style>應(yīng)用CSS樣式后給圖片加邊框給h1標(biāo)題加邊框給p段落加邊框。給任何的標(biāo)記加邊框邊框線型：5.2 設(shè)置對象寬度與高度

屬性（width、height）Width：設(shè)置寬度，如width：30%注意：當(dāng)設(shè)置值為百分?jǐn)?shù)時，表示對象寬度為其父層標(biāo)記寬度的30%。Height：設(shè)置高度，如height：100pxCSS屬性如下：.test1{width:250px;}.test2{width:50%;height:50%}<h1class="test1">美麗的陽朔</h1><imgclass="test2"src="pic/1.jpg"/>設(shè)置圖片寬度與高度為250px絕對長度設(shè)置圖片寬度與高度為父層方框的百分比長度。5.3 設(shè)置對象的文字環(huán)繞

（float屬性）Float的屬性值有：Left：元素向左浮動Right：元素向右浮動Inherit：繼承父級元素的浮動屬性None：取消浮動浮動的原理：盒子可以是所有的html元素，比如圖片、表格、甚至是文字。<body><h1

class="test1">美麗的陽朔</h1><img

class="test2"

src="pic/1.jpg"/><p><spanclass=“firstletter”>陽</span>朔縣（英文名：Yangshuo），電話區(qū)碼：0773，郵編區(qū)碼：541900陽朔縣位于廣西壯族自治區(qū)東北部，桂林市區(qū)東南面，地處東經(jīng)110。13'-110。40'，北緯24。38’—25。04’之間。</p><p>隸屬廣西桂林市,位于漓江西岸,風(fēng)景秀麗。建縣始于隋開皇十年（公元590年），距今已1400余年?？h城距桂林市區(qū)65公里，距自治區(qū)首府南寧445公里?！?lt;/p></body>案例：設(shè)置圖片與文字環(huán)繞效果設(shè)置CSS屬性如下：<style>.test2{ width:150px;

float:right;

}.firstletter{ font:3em"華文琥珀";

float:left;}</style>對象設(shè)置了浮動后，則后面的內(nèi)容會填補其旁邊的空白。5.4 設(shè)置對象的外邊距（margin）Margin設(shè)置對象與外部元素的距離。也可以單獨設(shè)置某個方向的外邊距。Margin-top:設(shè)置上方外邊距Margin-left:設(shè)置左側(cè)外邊距Margin-right:設(shè)置右側(cè)外邊距Margin-bottom:設(shè)置底部外邊距<style>.test2{

margin-left:20px; margin-bottom:10px}p{ font-size:13px; line-height:1.5}.firstletter{ font:3em"華文琥珀"; float:left;

margin-right:10px}</style>設(shè)置對象外邊距與文字的距離5.5內(nèi)邊距－－padding用于設(shè)置對象邊框與內(nèi)容之間的距離。padding可以設(shè)置4個屬性值：如：padding：10px20px10px20px； 按照順時針方向，依次為上、右、下、左padding的值。第6章、設(shè)置對象的背景顏色與背景圖像6.1 設(shè)置背景顏色(background-color)6.2 設(shè)置背景圖像(background-image)6.3 設(shè)置背景圖像平鋪(background-repeat)6.4 設(shè)置背景圖像位置(background-position)6.5 設(shè)置背景圖片位置固定(background-attachment)Ps：以上屬性可設(shè)置于任何的對象如標(biāo)題、段落、表格、圖片等。6.1 設(shè)置背景顏色(background-color)<style>.test1{ …… width:250px;

background-color:黃色;}.firstletter{ ……

background-color:黑色;

color:白色 padding:5px}</style><body><h1class="test1">美麗的陽朔</h1><imgclass="test2"src="pic/1.jpg“><p><spanclass=“firstletter”>陽</span>朔縣（英文名：Yangshuo），…………</p></body>設(shè)置首字背景色6.2 設(shè)置背景圖像(background-image)準(zhǔn)備幾個背景圖像：bg-2.jpgbg-5.jpgbg-1.jpg<style>body{

background-image:url(pic/bg-2.jpg)}.test1{

background-image:url(pic/bg-1.jpg)}Span.firstletter{

background-image:url(pic/bg-5.jpg)}</style><body><h1class="test1">美麗的陽朔</h1><imgclass="test2"src="pic/1.jpg“><p><spanclass=“firstletter”>陽</span>朔縣（英文名：Yangshuo），…………</p></body>設(shè)置對象背景圖片及瀏覽窗背景圖6.3 設(shè)置背景圖像平鋪

(background-repeat)在設(shè)置背景時，圖像有水平和豎直方向平鋪。repeat：默認(rèn)值沿水平和豎直方向平鋪repeat-x：只沿水平方向平鋪repeat-y：只沿豎直方向平鋪no-repeat：不平鋪，只顯示一次bg-g.jpg準(zhǔn)備一個帶漸變的背景圖像:由于瀏覽窗對應(yīng)的標(biāo)記是body，所以其背景圖片是通過給body添加background-屬性實現(xiàn)的。<style>body{background-image:url(pic/bg-g.jpg);background-repeat:repeat-x;background-color:#CCC}</style>案例：制作瀏覽窗頂部漸變的網(wǎng)頁背景效果：6.4 設(shè)置背景圖像位置(background-position)設(shè)置背景圖像位置在其父層元素的四個角落，有以下幾個值：left、right、center、top、bottom設(shè)置背景圖像在其父層元素的坐標(biāo)位置，元素的左上角作為坐標(biāo)起點。用數(shù)值或百分比表示位置值。案例1：設(shè)置網(wǎng)頁背景圖像位置在瀏覽器左下角<style>body{ background-image:url(pic/cup.gif); background-position:bottomleft; background-repeat:no-repeat}</style>案例2：設(shè)置網(wǎng)頁背景圖像位置在瀏覽器頂部100px、左側(cè)50px處。<style>body{background-image:url(pic/cup.gif);background-position:50px150px;background-repeat:no-repeat}</style>6.5 設(shè)置背景圖片位置固定(background-attachment)背景圖像固定屬性有三個值：Fixed：背景固定。Scroll：隨著滾動條移動，背景圖像也跟著一起移動。Inherit：繼承父層元素的屬性值。6.6 圖片替換技術(shù)

---要求在不需要插入圖片的情況下，利用背景圖像技術(shù)實現(xiàn)用圖片替換標(biāo)題效果標(biāo)題替換前用圖片替換標(biāo)題1、制作一個標(biāo)題背景圖像:h1.gif步驟：2、接下來對html代碼做小小調(diào)整，給h1標(biāo)題添加一個外層標(biāo)記div：<div><h1>

美麗的陽朔</h1></div>3、先設(shè)置外層標(biāo)記div：為了方便觀察div和h1的范圍變化，我們替它們加上邊框，完成后再把它刪掉?？煽吹絛iv的邊框比h1的邊框有一段距離，這是標(biāo)記的默認(rèn)樣式造成的。到底是div的內(nèi)邊距還是h1的外邊距造成這樣的距離呢？答案：經(jīng)過測試得知，div是不帶任何內(nèi)、外邊距的，所以我們需要把h1的外邊距設(shè)置為0，以使得兩者邊緣重合。設(shè)置div的背景圖片為制作好的標(biāo)題圖片，不重復(fù)，位置居中。為保證div能完整顯示背景圖片，還要設(shè)置其高度height與背景圖片相一致。Div{……..height：與圖片高度一致;………}4、設(shè)置內(nèi)層的h1標(biāo)記隱藏： h1{。。。。Visibility：hidden。。。。}5、最后去掉邊框線。6.7 滑動門技術(shù)在一個網(wǎng)頁中，可能需要給標(biāo)題添加背景圖片，由于標(biāo)題的寬度各不相同，是否意味著我們需要制作不同寬度的背景圖片呢？在這里我們利用滑動門技術(shù)，只需要制作一個背景圖片，然后給標(biāo)題文字設(shè)置兩個重疊的背景圖，上面的背景遮蔽下面的，我們通過設(shè)置參數(shù)使下面的背景露出左側(cè)的花紋，而上面的背景只顯示右側(cè)的花紋。然后給對象設(shè)置不同的寬度，即可產(chǎn)生寬度變化的效果，我們把這種背景橫向變化稱之為水平滑動?；谕瑯拥脑恚覀冞€可以對不同的段落文字共享相同的背景圖片，并制作高度變化的垂直滑動效果。案例制作背景寬度水平變化的效果制作背景高度垂直變化的效果制作標(biāo)題的水平滑動準(zhǔn)備一個背景圖像準(zhǔn)備一個背景圖像.修改網(wǎng)頁html代碼，替每個h3標(biāo)題添加一個外層標(biāo)記DIV。

<div><h3>瀘沽湖島嶼</h3></div>設(shè)置外層標(biāo)記div：我們必須讓兩個背景圖完全重疊。因此要觀察div和h3的范圍，我們分別給它們加上邊框線，完成后再把它刪掉。通過邊框線可看到，由于h3的默認(rèn)外邊距導(dǎo)致了兩個標(biāo)記之間產(chǎn)生了距離，我們設(shè)置h3的外邊距為0，使得兩者邊框重合。H3{。。Margin：0px。。。}以下設(shè)置div屬性：設(shè)置div背景為制作好的圖片，不重復(fù)，背景圖位置居左。為使得背景能完整顯示，再設(shè)置div的高度與背景圖片相一致。

{。。height:與圖片一致。。}此時我們看到一個固定寬度的背景圖片，但只有一個是不能做出滑動背景效果的。我們需要替其內(nèi)嵌的標(biāo)記h3再設(shè)置相同的背景圖片，不重復(fù)，位置居右，高度與圖片相一致。此時兩個嵌套標(biāo)記的背景圖分別居住左右兩端，兩端的位置在哪里是根據(jù)div的寬度來決定的，由于div目前沒有設(shè)置寬度，因此其寬度會自動延伸至其父層標(biāo)記body（即瀏覽窗）的寬度?；瑒娱T的原理就是利用兩個嵌套的標(biāo)記，設(shè)置相同的背景圖片，當(dāng)div寬度縮小時，兩個背景互相重疊，內(nèi)嵌標(biāo)記h3的背景顯示在頂層，遮蔽其父親div的背景。當(dāng)我們設(shè)置div寬度為200px，該寬度小于圖片寬度，使得h3的背景圖左側(cè)花紋無法顯示，這正是我們需要的。接下來，我們希望露出被遮蔽的div背景圖的左側(cè)花紋：設(shè)置div的左內(nèi)邊距為花紋寬度：

div{….padding-left:25px..}這是設(shè)置div寬度為500px的效果，我們看到右側(cè)一個完整的圖片是h3的背景，左側(cè)被遮蔽一半的是div的背景。但這不是我們要的，我們希望h3的左側(cè)花紋不要顯示，由于h3的寬度是根據(jù)div的寬度而自動延伸，因此我們只要設(shè)置更小的div寬度?，F(xiàn)在所有標(biāo)題的花紋都顯示出來了，但寬度都一樣。這也不是我們需要的。但我們離成功只差一步了，撤銷對div標(biāo)記的寬度設(shè)置，為了做出寬度不同的效果，我們應(yīng)根據(jù)標(biāo)題的文字?jǐn)?shù)量來設(shè)置不同的寬度值，并分別應(yīng)用在每個標(biāo)題上。我們創(chuàng)建幾個選擇器，設(shè)置不同的寬度，并應(yīng)用在每個標(biāo)題的div標(biāo)記中。.title1{width:180px}.title2{width:200px}.title3{width:280px}.title4{width:300px}。。。。。<divclass="title1"><h3>瀘沽湖簡介</h3></div><divclass="title2"><h3>瀘沽湖島嶼</h3></div>。。。。。。設(shè)置h3的右內(nèi)邊距為25px，文字居中，以使得文字與左右端距離相等。

h3{…padding-right:25px;text-align:center…}最后，去掉全部輔助邊框線。制作背景高度垂直滑動的效果準(zhǔn)備一個背景圖像注意：如果我們要在同一個網(wǎng)頁制作垂直變化的滑動門效果，由于要繼續(xù)添加div標(biāo)記，因此，之前做水平滑動時使用的div標(biāo)記選擇器都應(yīng)全部改用類別選擇器。div{。。。。}，要改為：.title1，.title2，.title3，.title4，{。。。}準(zhǔn)備一個背景圖像.修改網(wǎng)頁html代碼，替每段p標(biāo)記文字添加一個外層標(biāo)記DIV。并賦予每個div一個類別名稱為”text”。<divclass="text”><p>省級風(fēng)景名勝區(qū)瀘沽湖。。。</p></div><divclass="text"><p>瀘沽湖山美水美人更美，….</p></div>……設(shè)置類別選擇器“.text”的樣式：我們首先讓兩個背景圖完全重疊。因此要觀察div和h3的范圍，我們分別給它們加上邊框線，完成后再把它刪掉。同樣的由于p的默認(rèn)外邊距導(dǎo)致了兩個標(biāo)記之間產(chǎn)生了距離，我們設(shè)置p的外邊距為0，使得兩者邊框重合。

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論