本文已参与「新人创作礼」活动，一起开启掘金创作之路。
目录
第一关 CSS背景相关的概念
编辑
第二关 CSS-背景色的设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-背景色的设置</title>
<style type="text/css">
h2{font:微软雅黑;
text-align:center;
}
#p1{font-size:13px;
color:#979797;
text-align:center;
}
hr{border:1px solid #CCCCCC;}
#p2{text-indent:2em;}
span{color:blue;}
.background{
/* ********* Begin ********* */
background-color:#add;
/* ********* End ********* */
}
</style>
</head>
<body class="background">
<div class="backgroundImage">
<h2>新媒体的大势所趋</h2>
<p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
<hr size="2" color="#CCCCCC" />
<p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
</div>
</body>
</html>
第三关 CSS-背景图的设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-背景色的设置</title>
<style type="text/css">
h2{font:微软雅黑;
text-align:center;
}
#p1{font-size:13px;
color:#979797;
text-align:center;
}
hr{border:1px solid #CCCCCC;}
#p2{text-indent:2em;}
span{color:blue;}
.background{background-color:#add;}
.backgroundImage{
width:360px;
height:240px;
overflow:scroll;
padding:30px;
border:3px solid #30F;
/* ********* Begin ********* */
background-image: url("https://www.educoder.net/api/attachments/2478800");
background-attachment: scroll;
background-size:cover;
background-position: -260px 0px;
/* ********* End ********* */
}
</style>
</head>
<body class="background">
<div class="backgroundImage">
<h2>新媒体的大势所趋</h2>
<p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
<hr size="2" color="#CCCCCC" />
<p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
</div>
</body>
</html>
\
-
注意：
- 一行中如果格子数目超过12,则超出部分自动换行
- 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备
- 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一行
-
同一套页面可以兼容不同分辨率的设备
-
实现：依赖于栅格系统：将一行平均分为12个格子，可以指定元素占几个格
-
步骤：
-
定义容器：
- 容器分类：container:两边留白
- container-fluid:每一种设备都是100%的宽度
-
定义行：相当于之前的tr 样式：row
-
定义元素： 指定该元素在不同设备上，所占的格子数目。 样式：col-设备代号-格子数目
-
设备代号：
- xs：超小屏幕
- sm：平板
- md：电脑
- lg：电视
-
-
右键->刷新
编辑
这是我新建的名为test的数据库，Sc，Course，Student为我新建的表
编辑
如果新建了表在所建数据库没有显示，则可以尝试
点击 test 右键，刷新
编辑
\
