圖像、CSS樣式定義與應(yīng)用、浮動窗體_第1頁
圖像、CSS樣式定義與應(yīng)用、浮動窗體_第2頁
圖像、CSS樣式定義與應(yīng)用、浮動窗體_第3頁
圖像、CSS樣式定義與應(yīng)用、浮動窗體_第4頁
圖像、CSS樣式定義與應(yīng)用、浮動窗體_第5頁
已閱讀5頁，還剩28頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

圖像、CSS樣式定義與應(yīng)用、浮動窗體回顧設(shè)置標(biāo)題用哪個標(biāo)簽？段落的設(shè)置用哪個標(biāo)簽?文本字體的設(shè)置用那個標(biāo)簽?列舉出2個屬性滾動字符有那個標(biāo)簽來控制？默認(rèn)的滾動方向是怎么樣的？清單的分類預(yù)習(xí)檢查控制圖片顯示的標(biāo)簽是什么？CSS樣式表的引入有幾種方式？本講目標(biāo)理解在頁面中如何插入圖像掌握CSS樣式定義及應(yīng)用掌握HTML頁面的浮動窗體在網(wǎng)頁中插入圖像HTML采用的圖像格式有g(shù)if、jpg、png3種在網(wǎng)頁中插入圖像時，必須使用HTML的<img>標(biāo)記

<imgsrc="圖形文件地址"><Body> <imgsrc="liwupu.jpg"></Body>

這個圖形文件可以是本地機(jī)上的圖形，也可以是位于遠(yuǎn)程主機(jī)上的圖形2．設(shè)置圖像布局“width=#、height=#”屬性。此屬性用來設(shè)定圖片大小，此寬度及高度一般采用像素作單位<Body><imgsrc="liwupu.jpg"width=120height=160></Body>通常只設(shè)為圖片的真實大小，以免失真，若需要改圖片大小最好使用圖像編輯工具圖片邊框厚度“border=#”屬性用來設(shè)定圖片邊框厚度<Body><imgsrc="liwupu.jpg"border="5"></Body>

align=#屬性 此屬性用來調(diào)整圖片旁邊文字的位置，你可以控制文字出現(xiàn)在圖片的偏上方、中間、底部、左右等，可選值：top,middle,bottom,left,right，內(nèi)定為bottom<Body><imgsrc="bamboo.JPG"align="left"width="100"height="150"hspace="20"><h3align="center">定風(fēng)波-蘇軾</h3><p>莫聽穿林打葉聲，何妨吟嘯且徐行。竹杖芒鞋輕勝馬，誰怕？一蓑煙雨任平生。料峭春風(fēng)吹酒醒，微冷，山頭斜照卻相迎。回首向來蕭瑟處，歸去，也無風(fēng)雨也無晴。</p></Body>

alt=""屬性

此屬性是用以描述該圖形的文字，若用戶使用文字瀏覽器，由于不支持圖片，這些文字會代替圖片而被顯示。若在支持圖片顯示的瀏覽器，當(dāng)鼠標(biāo)移至圖片上該些文字亦會顯示

<Body> <imgsrc="bamboo.JPG"alt="歲寒三友--竹"></Body>

小結(jié)在HTML中插入圖片用什么標(biāo)簽？圖片標(biāo)簽中的常用屬性有那些?CSSCSS就是CascadingStyleSheets，中文翻譯為“層疊樣式表”，簡稱樣式表，它是一種制作網(wǎng)頁的新技術(shù)CSS是一種用來裝飾HTML的標(biāo)記集合，是對HTML標(biāo)記的一種擴(kuò)展，可以進(jìn)一步美化HTML頁面樣式表的作用覆蓋瀏覽器頁面布局可以重用多個文檔可以鏈接到一個樣式表樣式表規(guī)則樣式規(guī)則樣式表規(guī)則RuleSelector

{property:value;property:value;...}規(guī)則選擇器聲明屬性屬性值樣式表中的選擇器簡單選擇器(僅描述元素，而不考慮該元素在文檔結(jié)構(gòu)中的位置)HTML選擇器--選擇器是HTML標(biāo)記的名稱類選擇器—使用HTML元素的CLASS屬性ID選擇器—使用HTML元素的ID屬性上下文選擇器(引用元素的上下文)HTML選擇器示例<HTML><HEAD><STYLETYPE="text/css">

P{font-style:italic;font-weight:bold;color:limegreen}

</STYLE></HEAD><Body> <P>這些選擇器使用HTML元素的名稱唯一的區(qū)別是刪除了尖括號。</P> </BODY></HTML>HTML選擇器示例類選擇器示例<HTML> <HEAD> <STYLETYPE="text/css">

.water{color:blue} .danger{color:red} </STYLE> </HEAD> <BODY> <Pclass=water>測試水</P> <Pclass=danger>測試危險</P> <P>無樣式</P> <BR> <EMclass=danger>斜體</EM> </BODY></HTML>類選擇器示例ID選擇器示例<HTML> <HEAD> <TITLE>ID選擇器</TITLE> <STYLETYPE="text/css"> #control{color:red} </STYLE> </HEAD> <BODY> <Pid="control">這是火焰的顏色</P> <BR> <P>本段沒有應(yīng)用樣式</P> </BODY></HTML>ID選擇器示例上下文選擇器示例<HTML> <HEAD> <TITLE>上下文選擇器</TITLE> <STYLETYPE="text/css"> BODY {color:blue;background:lavender;font-family:Arial;} UL{color:red} </STYLE> <HEAD> <BODY>

<UL><LI>芒果<LI>桔子<LI>蘋果</UL> <OL><LI>芒果<LI>桔子<LI>蘋果 </OL> </BODY></HTML>上下文選擇器示例在HTML中引用樣式表Style元素Style屬性Link元素使用Style元素STYLE元素應(yīng)插入文檔的<HEAD>元素部分中，所有規(guī)則都放置在開始標(biāo)記和結(jié)束標(biāo)記之間。顯示頁面時，只有嵌入了STYLE元素的文檔會受到影響<STYLETYPE="text/css">H1 {color:maroon;} P {color:hotpink;font-family:Arial;}</STYLE><STYLETYPE="text/css">@import'sheet1.css'

</STYLE>導(dǎo)入外部樣式表使用Style屬性－－內(nèi)嵌樣式表style屬性用于將樣式表應(yīng)用于單個元素。直接將在HTML標(biāo)記里加入style參數(shù)，而style參數(shù)的內(nèi)容就是CSS的屬性和值。樣式表可以只有一條規(guī)則。使用Style屬性，可以繞過Style元素，而將聲明直接放入單個的開始標(biāo)記中。<HTML> <HEAD><TITLE>設(shè)置屬性</TITLE></HEAD><BODY><Pstyle="color:aqua;font-Style:italic;">本段應(yīng)用了內(nèi)嵌樣式<BR><P>本段以默認(rèn)樣式顯示。<BR><P>您能發(fā)現(xiàn)本行中的<SPANstyle="color:red">不同之處</SPAN>嗎？</BODY></HTML>使用Link元素－－鏈入外部樣式表 鏈入外部樣式表是把樣式表保存為一個樣式表文件，然后在頁面中用<link>標(biāo)記鏈接到這個樣式表文件，這個<link>標(biāo)記必須放到頁面的<head>區(qū)內(nèi)<HTML> <HEAD><TITLE>設(shè)置屬性</TITLE><LINKREL=stylesheetHREF="stylesmine.css“Type="text/css"></HEAD><BODY>。。。。。。。。。。。。。。。。。。。。</BODY></HTML>樣式表屬性2-1樣式表屬性2-2小結(jié)CSS樣式表有什么用途？頁面引入樣式表有幾種方式?浮動窗口Iframe標(biāo)記，又叫浮動幀標(biāo)記，你可以用它將一個HTML文檔嵌入在一個HTML中顯示如同“畫中畫“電視

Iframe標(biāo)記的使用<Iframesrc="URL"width="x"height="x"scrolling="[OPTION]"frameborder="x"></iframe>

文件的路徑，既可是HTML文件，也可以是文本、ASP、JSP等

"畫中畫"區(qū)域的寬與高是否出現(xiàn)滾動條區(qū)域邊框的寬度

另外，在<iframe>中還可以添加name=#屬性，屬性后面的文字將出現(xiàn)在不支持FRAMES的瀏覽器中浮動窗口實例我們先創(chuàng)建一個文件名叫iframe.html文件，其代碼如下：<html> <head> <Title>

登鸛雀樓

</Title> </head> <bodybgcolor="pink"> <h3align="center">

登鸛雀樓

</h3> <Palign="center">白日依山盡，黃河入海流。

<br>欲窮千里目，更上一層樓。

</P> </body></html>效果如圖所示主頁面代碼<Html><Head><Title>

浮動窗口</Title></Head><Iframesrc="iframe.html"></iframe></Html>效果如圖所示設(shè)置浮動窗口區(qū)域的寬與高<Html><Head><Title>

浮動窗口</Title></Head><Iframesrc="iframe.html"width="400"height=300></iframe></Html>效果如圖所示

設(shè)置浮動窗口區(qū)域邊框<Html><Head><Title>

浮動窗口</Title></Head><Iframesr

溫馨提示

  • 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

提交評論