背景图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 边框 border 1px粗细 solid样式 red颜色*/div{width: 1000px;height: 700px;border: 1px solid red;/*background-image 默认是全部平铺的repeat-x x轴平铺repeat-y y轴平铺no-repeat 不平铺，就一张图片*/background-image: url("images/2.jpg");}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
练习
.title{font-size: 28px; /* 字体大小 */font-weight: bold; /* 粗体 */text-indent: 1em; /* 首行缩进 */line-height: 35px; /* 行高 *//*background: red颜色 url图片 220px 2px图片放置位置 no-repeat平铺方式 */background: red url("../images/down.png") 220px 2px no-repeat;
}
ul li{height: 30px; /* 行高 */list-style: none; /* 去掉圆点 */text-indent: 1em; /* 首行缩进 */background-image: url("../images/right.png");background-repeat: no-repeat;background-position: 185px 1px;
}
渐变
https://www.grabient.com/ 渐变色 网站
background-color: #4158D0;
background-image: linear-gradient(301deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{background: linear-gradient(301deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);}</style></head>
<body>
<p>哈哈哈哈
</p>
<p>哈哈哈哈
</p>
哈哈哈哈</body>
</html>
https://www.bilibili.com/video/BV1YJ411a7dy?p=13
