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

1.12 – 创建第二个内容版块

完成蓝色缎带的修饰效果之后，我们的第一个内容版块就完成了。接下来我们开始设计第二个版块，里面的内容主要是这个模板主题的简单介绍文本以及近期的设计项目列表，首先来看一下HTML：

<div id="block_portfolio">              
            <div id="portfolio_items">                  
                <div class="mini_portfolio_item">  
                    <div class="block_inside">  
                         <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />  
                         <h3>PSDTUTS Theme Design</h3>  
                         <p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>  
                         <a href="#" class="button">View Project</a>  
                     </div>                       
                 </div>                      
                <div class="mini_portfolio_item">  
                    <div class="block_inside">  
                         <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />  
                         <h3>PSDTUTS Theme Design</h3>  
                         <p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>  
                         <a href="#" class="button">View Project</a>  
                     </div>                       
                 </div>                      
                 <div class="mini_portfolio_item">  
                    <div class="block_inside">  
                         <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />  
                         <h3>PSDTUTS Theme Design</h3>  
                         <p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>  
                         <a href="#" class="button">View Project</a>  
                     </div>                       
                 </div>                  
             </div>                  
             <div id="text_column">  
                 <h2 id="text_title">Creatif is a ...</h2>  
                 <p>You can use it to ...<a href="#">How to Be a Rockstar Wordpress Designer</a> by Rockstar Resources due for release in 2008.</p>  
                 <p>The book teaches you ...</p>  
               <p>And as ...<a href="http://psdtuts.com">PSDTUTS</a> and <a href="http://nettuts.com">NETTUTS</a>.</p>  
  </div>    
         </div>  

看起来很多是么？其实并不复杂，且听我一一道来：

1.首先我们创建一个名为block_portfolio的容器定义内容区域；

2.接着定义一个portfolio_items容器，其中包含了三个结构相似的子内容模块，即效果图中的左图右文搭配，我们暂且称之为“项目列表”，每个子模块我们都命名为mini_portfolio_item：

3.然后是一个名为text_column的容器，里面包括一些文本和一个H2标题元素的“主题简介”：

4.内容部分完整了之后，我们要把它们排版成两列布局；

5.对于主题简介中的H2元素，我们将会应用图像替换文本技术；

6.最后是对项目列表中的三个独立部分进行一些外观修饰，比如我们之前做过的双线边框以及蓝色缎带修饰；