HTML_CSS学习：背景、鼠标相关属性

一、背景相关属性

相关代码：

<!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>

显示结果：