关于底部样式的实现
这里有一个技术难点就是实现右侧图片和文字向图片对齐的效果
我这里用到了弹性布局和定位
<section class="box">
<img src="/img/footer_v180123.png">
<div class="buttom">
<section class="tab">
<ul>
<li><a> 关于我们 |</a></li>
<li><a> 人才招聘 |</a></li>
<li><a> 联系我们 |</a></li>
<li><a> 友情链接 |</a></li>
<li><a> 版权声明 |</a></li>
<li><a> 服务中心 </a></li>
</ul>
</section>
<div class="buttom-buttom">
<div class="licen">
<div class="licen-img1"><img src="/img/culture.png" alt=""></div>
<p>Copyright ◎ 2009-2016 yinyuetai.com 广播电视节目制作经营 许可证编号(京)字第1891号
|京网文[2014]2037-287号|
<span style="color: #36C893;">网络视听许可证0110413号</span></p >
<p>京公网安备11010502014900号L京ICP备11024134号-11京ICP证060716号|出版物经营许可证 新出发京委字笔朝130062号|增值电信业务经营许可证B2-201405004853631</p >
<div class="licen-img2"><img src="/img/biaoshi.gif" alt=""></div>
</div>
<p>食品经营许可证s证:JY111050404885363| 经营执照</p >
</div>
</div>
</section>
这里是一些基本的布局,想实现文字靠图片对齐先用弹性布局
display: flex;
然后让文字可换行
flex-direction: column;
然后让文字上下居中左右靠右边
justify-content:center;
align-items: end;
然后把文字的padding-right调试一下留出一些空隙把图片添加进去
这里需要先给.licen一个相对定位
position: relative;
最后再给图片一个绝对定位靠右显示即可实现效果
position: absolute;
top: -5px;
right: 1%;