div概念
⭐div
div就是一个容器, 一个盒子。把东西都装在一起。目的就是为了方便管理,把页面分成一块一块的,管理界面,进行调整的时候不需要一个个的调整,可以拿着盒子哟个个的调整,更加方便快捷。
背景图片和插入img的图片,img 直接插入,背景图片是用来做背景的, 和桌面一样
坐标移动的原理
- div背景图片 图片小 div大
background: url( 图片路径) no-repeat (不平铺)坐标(x轴) y 轴;background: ur1("1. jpg’ ) no-repeat 80px 90px;
移动坐标x轴为左负 右正y轴为上负 下正, 可以直接写像素值
若移动左上右下等等,可以直接用 上top 下bottom 左left 右right 居中center
例:移动到右下
background: url(“1. jpg”) no-repeat right bottom- div背景图片,图片大,div小的时候 可以直接用坐标进行调整,左负右正,上负下正, 控制台,进行调整
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div背景颜色和图片</title>
<style>
.content{
width: 500px;
height: 500px;
/* background: rgb(221, 18, 18); */
/* 1像素的边框 实线 黑色 */
border: 1px solid black;
/* 插入图片 图片小 div大的时候默认要自动填充 */
background: url(./img/qq.png) no-repeat center center;
/* 行居中 列居中 */
text-align: center;
line-height: 500px;
}
</style>
</head>
<body>
<!-- (.content 生成div) -->
<div class="content">
我是div
</div>
</body>
</html>
结果: