7.背景圖檔:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
width: 200px;
height: 150px;
background-color: cadetblue;
/*設定背景圖檔*/
background-image: url(../imgs/1.jpg);
/*設定圖檔尺寸*/
background-size: 100px 80px;
/*禁止重複*/
background-repeat: no-repeat;
/*設定背景圖檔的位置:橫向百分比和縱向百分比*/
background-position: 50% 50%;
}
#d2{
width: 611px;
height: 376px;
background-color: #e8e8e8;
/*設定背景圖檔*/
background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png);
background-size: 318px 319px;
background-repeat: no-repeat ;
background-position: 90% 70%;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
</body>
</html>
注:圖檔的url路徑要取到正确位置,"
../
“為所在檔案夾的上一級,”
/
"為所在檔案夾下,下圖為1.jpg的
顯示效果：
8.顯示方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width:100px;
}
span{
background-color: green;
width: 100px;
/* span本來是不能修改寬高的
但是顯示方式改成block或inline-block
就可以修改了*/
display:block;
}
div{
width:50px;
height:50px;
background-color: #5F9EA0;
/*塊級元素修改成行内塊
即修改了寬高又能在一行之内顯示*/
display: inline-block;
}
a{
width:80px;
height:80px;
background-color:yellow;
/*塊級元素修改成行内塊
即修改了寬高又能在一行之内顯示*/
display: inline-block;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.youku.com">優酷</a>
<a href="http://www.qq.com">騰訊</a>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>s1</span>
<span>s2</span>
<span>s3</span>
<img src="../imgs/1.jpg" >
<img src="../imgs/2.jpg" >
<img src="../imgs/3.jpg" >
</body>
</html>
測試效果：
附所有代碼：
https://download.csdn.net/download/qq_44273429/12705870