时间：2023-09-29 00:36:01 | 来源：网站运营
时间：2023-09-29 00:36:01 来源：网站运营
HTML & CSS 基础入门【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"> /*设置ID为img1的图片的宽：80px；高：111px*/ #img1{width:80px;height:111px;} </style></head><body><!--alt:图片未正常显示时提示文字，title:当鼠标移入图片时提示文字--> <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; /*背景颜色：蓝色*/ } </style></head><body> <div>我是div元素，红色背景</div> <span>我是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 {/*为所有的DIV元素设置同样的大小和边框*/ 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，背景图片重复平铺。</div></body></html>--------------------END关键词：背景,边框,基础,入门
