PSD to CSS —— CSS布局实战新概念系列教程

1.11 – 添加缎带修饰

网页局部模块中右上角的蓝色缎带修饰是这个网站界面设计中的一个亮点，只要合理的运用CSS、PNG透明图片和绝对定位属性，这个效果实现起来也不是很难。首先我们要做的还是制作图片，该图仍然包含透明背景区域、并以PNG-24格式保存。

接下来把图片添加到HTML中：

<div class="block">  
    <img src="images/ribbon_featured.png" class="ribbon"/>  
            <span class="block_inside">  
...

我们通过第二行中的<img>标签把这张图片放入网页。注意我在图片上应用了名为ribbon的类样式，而且其位置是在block容器和block_inside容器之间，而不是在block_inside容器里面！这么做的原因是为了避免与之前设置的overflow:auto混淆而产生样式冲突，而现在<img>添加的位置只是稍微影响了布局，其最终的效果呈现主要借助于下列CSS：

 程序代码

.block {   
    border:1px solid #a3a09e;   
    background-color:#ffffff;   
    margin-bottom:20px;   
    position:relative;   
}   
.ribbon {   
    position:absolute;   
    top:-3px;   
    rightright:-3px;   
} 

 1.首先为block容器设置相对定位position:relative，这样一来其下级元素中的绝对定位属性就会以block容器为参照，而不是整张页面了；

2.接着在设置缎带修饰图片位置的时候，让其在右边缘和上边缘分别溢出3px。

很简单不是么？若是在以往，我们可能要通过很复杂的表格布局才能实现类似的效果：