HBuilder X 小白日记02-布局和网页背景颜色

html：

例子1：

整个：

css案例：

1.首先右键，创建css文件

2.在html文件的头部分，引用css，快捷方式：link+Tab键

 <link rel="stylesheet" href=" ">

3.先在css文件里面写个初始化，每个浏览器中默认外边距和内边距的值不同，为了让主流浏览器出来的显示相同，我们把初始的padding,margin都设置为0；

知识点：

内边距 padding :上内边距[右内边距 下内边距 左内边距]；

外边距 margin

通配符后代选择器：

*{

      属性1 : 属性值1;

      属性2 : 属性值2;

      属性3 : 属性值3;

}

它能匹配页面中所有的元素 eg.

若未加弹性布局 即 无display:flex;  ：

4.弹性布局  display: flex;

下面是加了弹性布局的效果：

5.居中对齐 justify-content:center;

可以看到，图片在网页顶部水平排列到了一起

接下来，我们需要让图片位于网页正中：

6.中点对齐(它可以让所有的图片 居中对齐到一条线上)

中点(线)对齐  align-items: center;

可以看到，图片水平排列到网页中部了。

现在网页有了规范，接下来我们就可以追求一下颜色了：

知识点：

7. 线性渐变

 background-image:linear-gradient(渐变颜色，起始颜色，...，结束颜色)；

#fff为白色

渐变角度：用 角度值 指定 渐变的方向（或角度）

1. to left  ：设置渐变为从右到左，相当于：270deg

2. to right ：设置渐变为从左到右，相当于：90deg

3. to top ：设置渐变为从下到上，相当于：0deg 

4. to bottom ：设置渐变为从上到下，相当于：180deg 这是默认值，等同于 留空不写

在网页，右击，点击检查

找到对应的代码，然后鼠标点击颜色框，就可以快速的找到想要的颜色了，当找到满意的颜色，就将它粘贴复制到代码里即可。

eg.

注：Ctrl+S 保存，再运行