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

 #block_portfolio {   
    overflow:auto;   
    margin-bottom:20px;   
}   

#portfolio_items {   
    width:615px;   
    margin-right:25px;   
    float:left;     
}   

#text_column {   
    float:rightright;   
    width:310px;   
}   

#text_column h2#text_title {    
    text-indent:-9999px;   
    background-image:url(images/creatif.jpg);   
    background-repeat:no-repeat;   
    width:310px;   
    height:129px;   
}   
  
.mini_portfolio_item {   
    border:1px solid #a3a09e;   
    margin-bottom:10px;     
}   

.mini_portfolio_item .block_inside {    
    background:none; background-color:#e2dddc;    
    padding:25px 30px 15px 30px;    
}   

.mini_portfolio_item .thumbnail { 
    float:left; 
    margin-right:20px; 
    border:1px solid #979390; 
}

1.首先因为整个内容模块采用的两列布局，所以我们还是要在主容器的样式#block_portfolio中设置overflow:auto；

2.接着在项目列表样式#portfolio_items中设置左浮动以及615px的宽度值，并定义25px的右边界，以避免其与右侧的主题简介粘得太近；

3.主题简介样式#text_column中只是简单的定义了右浮动和310px的宽度；

4.对主题简介模块中的H2元素应用text-indent图像替换文本技术；

最后是各个项目列表子项的样式定义：

1.首先是1px的黑色边框，10px的底边界用于间隔三个子项；

2.然后因为之前我们已经为.block_inside编写了一些CSS样式，在这里为了更好的符合第二内容模块的需要，我们对.block_inside中的一些属性进行重定义，主要包括背景图像、背景颜色和填充几个方面；

3.最后为子项中的缩略图定义左浮动以及边框；

原文地址：From PSD to HTML, Building a Set of Website Designs Step by Step

翻译整理：西米CC - The Beauty of CSS Design

本教程涉及素材打包下载：

ziddeu     Uploaded