前端界面布局相关整理之2017

 

1.html 图片和p标签对齐

 

修改之后

<p><img className="cq-icon" src="/assets/img/indexImage/prone.png" alt="" />统一社会信用代码：    9150000xxxxx8DPP6M</p>
<p><img className="cq-icon" src="/assets/img/indexImage/repeo.png" alt="" />法定代表人：    雷X</p>
<p><img className="cq-icon" src="/assets/img/indexImage/repen.png" alt="" />工商登记号:1101080xxxxx422</p>

//css 添加如下样式可以实现
.cq-icon{
  vertical-align:middle;
  padding-right: 6px;
}

 

2.实现下图效果展示，不使用图片

<div>
         <h3>登记信息</h3>
</div>

//css样式

h3{
  text-indent: 1em;
  position: relative;
  font-weight: bold;
  margin-bottom: 20px;
  &:before{
    content: " ";
    position: absolute;
    width: 5px;
    height: 20px;
    background: #e67817;
    left:0;
  }
}