效果如下
image.png
代码如下
<style>
body{
font-family: 黑体;
font-size:14px;
}
span {
color:red;
font-size:16px;
}
.fbox {
display: flex;
width: 400px;
height:120px;
align-items: center;
opacity: 0.9;
background-size:400px 120px;
border:1px solid #2894FF;
}
.child1 {
background-color:white;
margin: 3px;
}
.ch {
border:1px solid white;
margin:5px;
line-height: 9px;
opacity:0.9;
}
.child2 {
border:1px solid #66B3FF;
display:flex;
align-items: center;
line-height: 10px
}
</style>
<body>
<div class=fbox>
<div class="child1">
</div>
<div class="child2">
<div class='ch'>
<p>聚焦客户之声,打造<span>专业、高效</span>的服务体系</p>
<p>以<span>客户体验</span>为核心,以<span>技术创新</span>为驱动</p>
<p>成为产品及流程变革的有力<span>推动者</span></p>
</div>
</div>
</div>
</body>
存在问题
如果加图片背景的话，设置透明度会导致其上面的文字也变得透明，尚未解决~
总结
还是flex布局好用，让什么float之类的见鬼去吧
