一、背景相关属性
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景相关属性</title>
<style>
body{
background-color: greenyellow;
}
div{
width: 400px;
height: 400px;
font-size: 40px;
border: 5px black solid;
/*默认背景色*/
/*background-color: transparent;*/
/*设置背景颜色*/
background-color: #0dcaf0;
/*设置背景图片*/
background-image: url("../pictures/喜羊羊.jpg");
/*设置背景图片的重复方式*/
/*background-repeat: no-repeat;*/
/*只在水平方向上重复*/
background-repeat: repeat-x;
/*控制背景图片的位置*/
/*background-position: left top;*/
/*控制背景图片的位置-第一种写法：关键词*/
background-position: center bottom;
/*控制背景图片的位置-第二种写法：具体的像素值*/
/*单写一个数值：表示的是x轴方向*/
background-position: 70px 120px;
/*复合属性*/
background: skyblue url("../pictures/灰太狼.jpg") center bottom 120px;
}
</style>
</head>
<body>
<div>你好啊！</div>
</body>
</html>显示结果：
二、鼠标相关属性
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标相关属性</title>
<style>
div{
width: 400px;
height: 400px;
background-color: skyblue;
/*cursor: wait;*/
/*cursor: move;*/
/*cursor: help;*/
cursor: url("../pictures/喜羊羊.jpg"),pointer;
}
button{
cursor: pointer;
}
input{
cursor: move;
}
</style>
</head>
<body>
<div>把鼠标放进来看一看
<input type="text">
<a href="#">百度</a>
<button>点我</button>
</div>
</body>
</html>显示结果：
