# 2.内容部分开发
**内容部分被根据颜色，分为三个小部分。**
### 1.**绿色部分：**
~~~css
.green-section{
background: #089DB0;
color: #FFFFFF;
text-align: center;
padding: 100px 0;
}
.wrapper{
max-width: 1080px;
margin: 0 auto;
}
.wrapper .hr{
height: 3px;
background-color:#078494;
width: 60%;
margin: 0 auto;
}
.green-section .icon-group .icon{
display: inline-block;
width: 70px;
height: 70px;
background-color: #0D6F7C;
transform:rotate(45deg);
margin: 20px;
}
.icon-group{
margin-top: 50px;
}
~~~
**注意
1.制作旋转45度的正方形**
### 2.**灰色部分：**
~~~css
.grey-section {
background: #252f34;
color: #FFFFFF;
}
.grey-section .img-section{
width: 45%;
}
.grey-section .text-section{
width:50%;
}
.img-section img{
width: 100%;
}
.article-preview>div{
float: left;
/*font-size: 0;*/
}
.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }
.text-section{
position: relative;
top: 68px;
left: 50px;
/*定位后的溢出清除*/
overflow: hidden;
}
.text-section h2{
margin-bottom: 20px;
font-size: 30px;
}
.text-section .sub-heading{
font-size: 24px;
letter-spacing: 1px;
}
.text-section p{
font-size: 18px;
letter-spacing: 1px;
}
.text-section>*{
width: 90%;
}
~~~
**注意：
1.我们使用:after清除浮动
2.使用:nth-child设置背景的一些样式。
:nth-child\(n\) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 **
### 紫色部分：
注意:我们在卡片部分使用了css3的box-sizing属性
[http://www.jianshu.com/p/e2eb0d8c9de6](http://www.jianshu.com/p/e2eb0d8c9de6)
