这个效果图怎么做出来的啊

文字居中可以用 center 标签，可以用div style="text-align:center;"

图片居左，文字自动换行，可以在 img 标签上设置 align="left" 属性

小女孩是背景图片，未覆盖文字，所以可以用 background:url(小女孩图片) no-repeat right bottom 设置背景图片不重复，居右靠底

1、body添加背景图片

2、中间使用div，设置背景色并插入文字即可

图文混排加 精灵图 。

CSS精灵图（sprite）_wangwenkai76的博客-CSDN博客    说到精灵图（雪碧图），大家肯定和我一样觉得这个很新鲜。在学习了有关精灵图（雪碧图）的一些知识后，就来和大家讨论一下，我个人对精灵图（雪碧图）的一些理解和实现方法吧。1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。2、精灵图技术的本质... https://blog.csdn.net/wangwenkai76/article/details/82556642