HTML中的圖片,我們只需要掌握它的標(biāo)簽寫法以及它的三個屬性就基本OK了。" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > HTML & CSS 基礎(chǔ)入門【5】邊框與背景

HTML & CSS 基礎(chǔ)入門【5】邊框與背景

時間:2023-09-29 00:36:01 | 來源:網(wǎng)站運營

時間:2023-09-29 00:36:01 來源:網(wǎng)站運營

HTML & CSS 基礎(chǔ)入門【5】邊框與背景:

HTML圖片標(biāo)簽

圖片是網(wǎng)頁上必不可少且及其常見的元素,同樣,它的使用也是及其的簡單,所以就沒有單獨寫一篇。

HTML中的圖片,我們只需要掌握它的標(biāo)簽寫法以及它的三個屬性就基本OK了。

寫法格式:<img src="圖像源文件的路徑"/>

說明:圖片<img/>標(biāo)簽跟段落<p></p>標(biāo)簽不太一樣,<img/>是一個自閉合標(biāo)簽,不是成對出現(xiàn)的。另外,src屬性指明的圖片文件路徑可以為相對路徑也可以為絕對路徑。

相對路徑:以當(dāng)前網(wǎng)頁文件所在的文件夾為基準(zhǔn)定位,如當(dāng)前網(wǎng)頁所在的文件夾里面有個images文件夾,該文件夾里有一張圖片“風(fēng)景1.jpg”,那么,這張圖片的相對路徑就是:“images/風(fēng)景1.jpg”

絕對路徑:絕對路徑是指文件的完整路徑,如:D:/學(xué)習(xí)/HTML/images/風(fēng)景1.jpg。 另外,我們可以在CSS中使用width和height來定義圖片的大小。這樣,不管圖片的實際大小是多少,我們都可以按照網(wǎng)頁的實際需求來定義圖片的顯示大小。

來個例子看看

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*設(shè)置ID為img1的圖片的寬:80px;高:111px*/ #img1{width:80px;height:111px;} </style></head><body><!--alt:圖片未正常顯示時提示文字,title:當(dāng)鼠標(biāo)移入圖片時提示文字--> <img src="images/汽車人1.jpg" alt="汽車人" title="擎天柱"/> <img id="img1" src="images/汽車人1.jpg" alt="汽車人" title="擎天柱"/></body></html>

CSS 邊框

我們可以為網(wǎng)頁上的元素設(shè)置邊框,比如圖片、表格、文本塊等等。要為某個元素加上邊框,一般只需設(shè)置三個屬性即可。

注意:上表中的三個屬性寫起來很麻煩,因此CSS提供了一個簡潔的寫法:

來個例子看看

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> img { /*未采用簡寫方式,邊框為紅色虛線*/ border-width:2px; border-style:dashed; border-color:red; } span { /*采用簡寫方式,邊框為綠色實線*/ border:2px solid green; } </style></head><body> <img src="images/汽車人1.jpg" alt="擎天柱"/> <span>左邊是擎天柱</span></body></html>

CSS 背景

背景也是網(wǎng)頁設(shè)計中最常用的樣式之一,要想頁面美觀,漂亮的背景是必須的。在CSS中,主要通過背景顏色背景圖像兩種方式來設(shè)置背景樣式。

背景顏色background-color

在CSS中,可以通過background-color屬性來定義元素的背景顏色。顏色的取值可以是關(guān)鍵字(如:red、blue、green等,基本上都是顏色的英文名稱),也可以是一個16進(jìn)制的RGB值。

color和background-color

color是前景色(就是元素文本的顏色),background-color是背景色。

來個例子看一下

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div { width:180px; height:60px; background-color:red; } span { color:white; /*文字顏色:白色*/ background-color:blue; /*背景顏色:藍(lán)色*/ } </style></head><body> <div>我是div元素,紅色背景</div> <span>我是span元素,藍(lán)底白字</span></body></html>背景圖像

如果背景顏色已經(jīng)滿足不了需求,那么就可以使用漂亮的圖片做背景,如果需要設(shè)置背景圖像,需要掌握以下四個屬性設(shè)置:

background-image:設(shè)置背景圖像的地址路徑,這是個必選屬性。

background-repeat:設(shè)置背景的重復(fù)方式,屬性取值repeat表示水平垂直方向上都平鋪,repeat-x 和 repeat-y只在水平或垂直方向上重復(fù),no-repeat表示不平鋪。

background-position:定義背景圖片的位置。

background-attachment:當(dāng)文檔比較長,該屬性可定義背景圖像是否隨文檔滾動。scroll表示背景圖像隨對象滾動而滾動,是默認(rèn)選項;fixed可以固定背景圖像。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div {/*為所有的DIV元素設(shè)置同樣的大小和邊框*/ width:280px; height:150px; border:2px solid red; } #div1 { background-image:url("images/背景.png"); background-repeat:no-repeat; background-position:center; } #div2 { background-image:url("images/背景.png"); background-repeat:repeat; } </style></head><body> <div id="div1">第一個DIV,背景圖片位置居中,不平鋪。</div> <div id="div2">第一個DIV,背景圖片重復(fù)平鋪。</div></body></html>--------------------END

關(guān)鍵詞:背景,邊框,基礎(chǔ),入門

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉