报纸排版模拟

在使用z-index 的时候需要先设置 position:absolute

如何设置一层模糊？

报纸排版模拟

.leftshadow{
    width: 191px;
    height: 301px;
    float: left;
    position: absolute;
    z-index: 1;
    background-color:rgba(49,111,77,0.60);

主要是

这一行 background-color:rgba(49,111,77,0.60);

如何实现如图所示图片周围有文字包围的效果呢？

报纸排版模拟

开始的时候图片前面的部分文字用<p>包括了，导致图片总是另起一行，这样就没有文字后面紧跟着图片的效果了。

直到把图片<img>包含在<P>里才实现了效果，加上float,margin属性。另外在图片左边的文字排版时，要注意看文字与图片的距离，设置换行标签，不然图片会把文字覆盖。