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
