职问.png

Bertha 。 2022-05-27 06:45 109阅读 0赞

![20180413120658911][]

<!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>

[20180413120658911]: /images/20220527/2e81e55c037c4d0b9c07b04d31d121be.png