列表效果：
html：
css：
div.join{
background-color:#f6f6f6;
padding-bottom: 30px;
}
div.join .list-join li{
float:left;
margin-top: 30px;
margin-left: 1%;
width: 24%;
height: 322px;
background-color:#fff;
}
div.join .list-join li:nth-child(){
margin-left: 0;
}
div.join .list-join li:hover{
-moz-box-shadow:0 0 10px #cac3c3;
-webkit-box-shadow:0 0 10px #cac3c3;
box-shadow:0 0 10px #cac3c3;
}
div.join .list-join li:hover h3,div.join .list-join li:hover span{
color: #4063a5;
}
div.join .list-join .pic{
display:block;
width: 100%;
height: 219px;
overflow:hidden;
text-align:center;
line-height:219px;
vertical-align:middle;
}
div.join .list-join .pic img{
display:inline-block;
vertical-align:middle;
max-width:100%;
max-height:219px;
transition: all 2s;
}
div.join .list-join .pic img:hover{
transform: scale(1.1);
}
div.join .list-join .title{
display:block;
width: 86%;
height: 51px;
background-color:#fff;
color: #505050;
padding: 25px 25px;
font-size:20px;
font-family: ‘scource’;
}
div.join .list-join .title h3{
width: 100%;
height: 35px;
overflow:hidden;
}
div.join .list-join .title span{
font-size:15px;
color: #666;
}
div.join-main{
margin-left: 30px;
}
div.join-main h1{
margin: 30px;
border-bottom:1px solid #efefef;
padding-bottom: 30px;
}
div.join-main .need{
margin-left: 30px;
}div.join-main .need li{
line-height:30px;
color: #333;
}
div.join-main .need span{
font-size:20px;
}
div.join-main .need .ren li{
margin-left: 30px;
}