本章主要总结本次实训所需前端基础知识使用，其包括HBuiler的下载和使用；弹性布局知识内容；以及图标库的使用。
HBuilder的下载和使用
-
点击连接进入官网，直接选择与自己电脑匹配的版本下载；
-
下载到本地后直接进行解压找到运行文件；
-
右键以管理员身份运行进入；
-
创建需要的文件；
弹性布局
块级元素div默认占用一行
例：块级div实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级布局</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
border-style: solid;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
例：弹性布局div实例：需要在外围再一个div，然后设置其样式为display:flex;默认主轴设置为横轴。
改变主轴方向，调为纵轴：flex-direction:column;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
border-style: solid;
}
#fl{
width: 1000px;
height: 1000px;
background-color:blue ;
border-style: solid;
display: flex;
}
</style>
</head>
<body>
<div id="fl">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
**总结：
1 设置弹性布局(为外围容器设置属性)display：flex ；当外围元素无法容纳内围元素的时候，内围元素会被挤压，不会溢出。
2 改变主轴方向flex-direction： column/row
3 自动换行flex-wrap: wrap;
3 主轴对齐方式justify-content: left/right/center/space-between/space-around;
4 侧轴对齐方式align-content: center/flex-start/flex-end;
align-items:center/flex-start/flex-end;**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
border-style: solid;
}
#fl{
width: 400px;
height: 1000px;
background-color:blue ;
border-style: solid;
/* 弹性布局，按主轴方向排列（水平，垂直）display: flex； */
display: flex;
/* flex-direction： column/row（纵轴、横轴） */
/* 自动换行flex-wrap: wrap; */
flex-wrap: wrap;
/* 主轴对齐方式justify-content：left/right/center/space-between/space-arround */
justify-content: right;
/* 侧轴对齐方式：align-content : center/flex-start/flex-end
align-items: center/flex-start/flex-end */
align-content: center;
}
</style>
</head>
<body>
<div id="fl">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
绘制第三方图标
-
下载“font-awesome”
-
将“font-awesome” 复制到项目下
-
引入css文件
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"/>（在head中引入） -
进入图标库官网“www.fontawesome.com.cn/faicons/” 查询要使用的图标的名称
-
使用
<i class = "fa 图标名"></i>方式绘制图标
