第一步:确定 banner 区域的height background
第二步:加背景图
.banner {
height: 420px;
background-color: #0092cb;
}
.banner .wrapper {
background-image: url(/resources/uploads/img/
xueChengZX/banner.png);
}
第三步:创建左右盒子
第四步:加代码,让左右盒子分别在左右两侧
第五步:设计.banner .left a 转块级元素
第六步:鼠标 a:hover
.banner .wrapper {
display: flex;
justify-content: space-between;
}

.banner .left a:hover {
background-image: url(../images/right-hover.png);
color: #00a4ff;
}
.banner .left a {
/* 块级:宽度是父级的100% */
display: block;
height: 46px;
background: url(/resources/uploads/img/xueChengZX
/right.png) no-repeat right center;
line-height: 46px;
font-size: 16px;
color: #fff;
}

确定内边距

padding: 3px 20px;

确定背景颜色

background-color: rgba(0,0,0,0.42);