报纸排版模拟

在使用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属性。另外在图片左边的文字排版时,要注意看文字与图片的距离,设置换行标签,不然图片会把文字覆盖。

猜你喜欢

转载自blog.csdn.net/guitarist0505/article/details/79742372