<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none ;
}
a {
text-decoration: none;
}
/*顶部通栏部分*/
.tonglan {
height: 40px;
background: #232E30;
}
.banxin {
width: 712px;
height: 40px;
/*background: pink;*/
margin: 0 auto ;
line-height: 40px;
}
.banxin h3 {
float: left;
color: #F3F4F4;
}
.banxin span {
font-size: 12px;
}
.banxin a {
float: right;
color: #DCEAEA;
font-size: 14px;
}
.hangye {
height: 562px;
background: #FFFFFF;
text-align: center;
}
.hangye-t {
width: 712px;
height: 562px;
/*background: pink;*/
margin: 0 auto;
/*overflow: hidden;*/
padding-top: 65px;
box-sizing: border-box;
}
.hangye-t h2 {
text-align: center;
padding-bottom: 23px;
font-weight: normal;
/*padding-right: 100px;*/
}
.hangye-t p {
font-size: 14px;
color: #9B9C9E;
padding-bottom: 66px;
}
.hangye-b {
height: 248px;
width: 100%;
position: relative;
/*background: pink;*/
}
.hangye-b li {
float: left;
height: 248px;
width: 228px;
background: #FFFFFF;
margin-right: 14px;
overflow: hidden;
box-shadow: 0 0 20px 5px #E3E1E1;
}
.hangye-b li:nth-child(3) {
margin-right: 0;
}
.hangye-b li img {
border-bottom: 3px solid #57CDDE;
}
.hangye-b li h4 {
padding-top: 16px;
color: #57CDDE;
}
.hangye-b li p {
font-size: 12px;
padding-top: 13px;
}
.hangye-t .nav {
/*position: absolute;
bottom: 0;
left: 0;*/
width: 255px;
height: 32px;
line-height: 32px;
margin: 34px auto 0;
/*background: pink;*/
border: 2px solid #92D7E4;
}
.hangye-t .nav a {
color: #92D7E4;
}
/*职问新媒体*/
.meiti {
height: 492px;
background: #F1F1F1;
background: url(img/11.png);
}
.meiti-b {
width: 712px;
height: 492px;
margin: 0 auto ;
}
.meiti-b .mei-t-l {
width: 350px;
height: 100%;
position: relative;
/*background: blue;*/
float: left;
/*text-align: center;*/
}
.meiti-b .mei-t-l h3 {
margin-top: 70px;
}
.meiti-b .mei-t-l span {
display: block;
color: #5D4C48;
margin: 22px 0;
}
.meiti-b .mei-t-l p {
font-size: 12px;
color: #5D4C48;
margin: 24px auto 18px;
}
.meiti-b .mei-t-r {
width: 227px;
height: 260px;
background: url(img/4.gif) color;
float: right;
overflow: hidden;
margin-top: 155px;
}
.meiti-b .mei-t-r img {
width: 227px;
height: 260px;
}
/*精选文章部分*/
.meiti-b .mei-t-l dl {
width: 168px;
height: 120px;
/*background: red;*/
line-height: 24px;
}
.meiti-b .mei-t-l dl dt {
font-size: 14px;
font-weight: 700;
}
.meiti-b .mei-t-l dl dt span {
}
.meiti-b .mei-t-l dl a {
color: #85D1DE;
font-size: 12px;
}
.meiti-b .mei-t-l img {
/*position: absolute;*/
width: 90px;
height: 90px;
margin-top: 20px;
}
.meiti-b .mei-t-l .p{
position: absolute;
left: 100px;
bottom: 40px;
}
/*职问题库*/
.tiku {
height: 415px;
background: #FFFFFF;
}
.tiku-b {
width: 712px;
height: 415px;
margin: 0 auto;
/*background-color: pink;*/
}
.tiku-b .tiku-l img {
float: left;
width: 294px;
height: 252px;
background: red;
margin: 68px 34px;
}
.tiku-b .tiku-r {
width: 234px;
height: 300px;
/*background-color: blue;*/
float: right;
margin-top: 70px;
text-align: right;
}
.tiku-b .tiku-r h3 {
line-height: 46px;
}
.tiku-b .tiku-r p {
font-size: 12px;
color: #CDD0D3;
line-height: 18px;
}
.tiku-b .tiku-r span {
display: block;
color: #CDD0D3;
font-size: 14px;
line-height: 62px;
}
.tiku-b .tiku-r ul {
width: 190px;
height: 29px;
float: right;
}
.tiku-b .tiku-r ul li {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
background: red;
margin-right: 30px;
float: left;
}
.tiku-b .tiku-r ul li a {
color: #FFFFFB;
}
.tiku-b .tiku-r ul li:first-child {
background: url("img/8.png") no-repeat;
}
.tiku-b .tiku-r ul li:last-child {
margin-right: 0;
background: url("img/7.png") no-repeat ;
}
/*底部*/
.guanyu {
height: 227px;
width: 100%;
background: #2C2E30;
position: relative;
}
.guanyu-b {
width: 712px;
height: 227px;
/*background: pink;*/
margin: 0 auto;
overflow: hidden;
}
.guanyu-img {
/*background: red;*/
width: 115px;
height: 50px;
margin: 20px 0;
float: left;
}
.guanyu-img img {
width: 115px;
height: 24px;
}
.guanyu-img p {
font-size: 12px;
color: #C9CACB;
}
.guanyu-hezuo {
width: 348px;
height: 128px;
/*background: blue;*/
float: right;
margin-top: 24px;
}
.guanyu-hezuo .ul {
width: 300px;
height: 40px;
}
.guanyu-hezuo h4 {
color: #fff;
padding-bottom: 10px;
}
.guanyu-hezuo .ul li img {
width: 30px;
height: 30px;
}
.guanyu-hezuo .ul li {
width: 35px;
height: 34px;
margin-right: 30px;
float: left;
padding-bottom: 19px;
}
.guanyu-hezuo .ul li:last-child {
margin-right: 0;
}
.guanyu-hezuo .ul1 {
width: 234px;
height: 48px;
}
.guanyu-hezuo .ul1 li {
width: 53px;
height: 39px;
margin-right: 35px;
float: left;
}
.guanyu-hezuo .ul1 li img {
width: 53px;
height: 27px;
}
.guanyu-hezuo .ul1 li:last-child {
margin-right: 0;
}
.guanyu .dibu {
width: 100%;
height: 85px;
border-top: 2px solid #414345;
/*background: pink;*/
position: absolute;
bottom: 0;
left: 0;
}
.dibu .dibu-b {
width: 712px;
height: 100%;
/*background: pink;*/
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.dibu .dibu-b p {
margin-top: 18px;
color: #4D5158;
font-size: 12px;
}
.dibu .dibu-b p span {
color: #FFFCC6;
}
</style>
</head>
<body>
<!-- 顶部通栏部分 -->
<div class="tonglan">
<div class="banxin">
<h3>职问 <span>zhiwen.me</span></h3>
<a href="#">注册/登录</a>
</div>
</div>
<!-- 中间大盒子部分 -->
<div class="hangye">
<div class="hangye-t">
<h2>行业训练营</h2>
<p>课程+辅导+岗位，一站式求职辅导方案</p>
<div class="hangye-b">
<ul>
<li>
<img src="img/1.png" alt="">
<h4>四大行业训练营</h4>
<p>从OT到Par面，<br />四大顶尖导师手把手教你进四大</p>
</li>
<li>
<img src="img/2.png" alt="">
<h4>从简历到面试，</h4>
<p>从OT到Par面，<br />顶尖红圈所导师手把手教你进四大</p>
</li>
<li>
<img src="img/3.png" alt="">
<h4>质询行业训练营</h4>
<p>从简历到Case，<br />MBB顶尖导师手把手教你进四大</p>
</li>
</ul>
</div>
<div class="nav">
<a href="#">进一步了解</a>
</div>
</div>
</div>
<!-- 职问新媒体 -->
<div class="meiti">
<div class="meiti-b">
<div class="mei-t-l">
<h3>职问新媒体</h3>
<span>25岁职场青年读本，影响一代人的职场思维</span>
<p>覆盖法律，咨询，金融财务等领域的20万人，拥有温度的内容启发年轻人对职场的思考。</p>
<dl>
<dt>精选文章</dt>
<dd><a href="#">麦肯锡青春，小红花人生</a></dd>
<dd><a href="#">金融街年轻人的错误人生</a></dd>
<dd><a href="#">安达信往事：三木悲剧</a></dd>
<dd><a href="#">生而骄傲：UBer的那些年轻人</a></dd>
</dl>
<img src="img/10.png" alt="">
<p class="p">关注 职问公众号 了解更多</p>
</div>
<div class="mei-t-r">
<img src="img/4.gif" alt="">
</div>
</div>
</div>
<!-- 职问题库部分 -->
<div class="tiku">
<div class="tiku-b">
<div class="tiku-l">
<img src="img/5.png" alt="">
<div/>
<div class="tiku-r">
<h3>职问题库APP</h3>
<span>求职有笔试，就用问题题库APP</span>
<p>
第一款求职笔试App正式上线<br>
我们准备了5000道笔试题<br>
涵盖7大行业，53家公司<br>
并有答案和解析，做出这个职问题库App<br>
让你随时随地练笔试
</p>
<ul>
<li><a href="#">ios</a></li>
<li><a href="#">Android</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="guanyu">
<div class="guanyu-b">
<div class="guanyu-img">
<img src="img/logo.png" alt="">
<p>关于我们|联系我们</p>
</div>
<div class="guanyu-hezuo">
<h4>合作机构</h4>
<ul class="ul">
<li><img src="img/584.jpg" alt=""></li>
<li><img src="img/585.jpg" alt=""></li>
<li><img src="img/586.jpg" alt=""></li>
<li><img src="img/587.jpg" alt=""></li>
<li><img src="img/588.jpg" alt=""></li>
</ul>
<ul class="ul1">
<li><img src="img/589.jpg" alt=""></li>
<li><img src="img/590.jpg" alt=""></li>
<li><img src="img/591.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="dibu">
<div class="dibu-b">
<p>2017@ 职问 深圳市凯为咨询有限公司版权所有<br /><span>粤ICP备15041822</span></p>
</div>
</div>
</div>
<!-- 底部 -->
</body>
</html>