時間:2023-09-29 00:36:01 | 來源:網(wǎng)站運營
時間:2023-09-29 00:36:01 來源:網(wǎng)站運營
HTML & CSS 基礎(chǔ)入門【5】邊框與背景:<!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>
<!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>
<!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>
背景圖像<!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ǔ),入門
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。