复刻boss直聘School界面（css+html）-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

<style>
/* 头部样式 */

* {
margin: 0;
padding: 0;
}

body {
background-color: rgba(230, 230, 240, 0.6);
}

.div-head {
width: 100%;
height: 90px;
background-color: rgb(32, 35, 41);
}

.gay {
margin-top: -20px;
}

.div-icon {
float: left;
margin-left: 110px;
margin-top: 40px;
}

.ul-head {
float: left;
list-style-type: none;
margin-top: 40px;
margin-left: 5px;
}

.ul-head li {
float: left;
color: white;
margin-left: 25px;
}

.ul-head li:hover {
color: rgb(93, 213, 200);
}

.ul-head .li-first {
color: rgb(93, 213, 200);
}

.img-head {
width: 100px;
height: 30px;
}

.ul-head-button {
float: right;
list-style-type: none;
margin-top: 15px;
margin-right: 50px;
}

.ul-head-button li {
float: right;
margin-top: 28px;
margin-right: 15px;
color: white;
}

.ul-head-button .button-dl {
width: 57px;
height: 25px;
background-color: rgb(32, 35, 41);
color: white;
border-color: rgb(93, 213, 200);
border-width: 2px;
border-style: solid;
margin-top: -5px;
border-radius: 25px;
font-size: small;
text-align: center;
line-height: 25px;
}

.ul-head-button .button-dl :hover {
background-color: rgb(93, 213, 200);
color: white;
}

.ul-head-button .button-zc {
width: 57px;
height: 25px;
background-color: rgb(32, 35, 41);
color: white;
border-color: rgb(93, 213, 200);
border-style: solid;
border-width: 2px;
border-radius: 25px;
margin-top: -5px;
margin-left: 5px;
font-size: small;
text-align: center;
line-height: 25px;
}

.button-zc:hover {
background-color: rgb(93, 213, 200);
color: white;
}

.div-icon ul {
list-style-type: none;
margin-top: 2px;
}

.div-icon ul>li {
float: left;
color: white;
}

.div-icon ul>li div {
float: left;
}

.div-icon .icon-001 {
color: rgb(93, 213, 200);
font-size: 24px;
font-weight: bold;
margin-top: -7px;
}

.div-icon li .cd {
color: rgb(93, 213, 200);
}
</style>
<div class="div-head">
<div class="gay">
<div class="div-icon">
<ul>
<li class="icon-001">BOSS直聘</li>

</ul>
</div>

<style>
.span-01 {
width: 30px;
height: 17px;
color: white;
background-color: red;
font-size: small;
border-radius: 10px;
position: absolute;
top: -11px;
line-height: 17px;
text-align: center;
}

.ul-head-button .rt-001:hover {
color: rgb(93, 213, 200);
}
</style>
<ul class="ul-head">
<li class="li-first">首页</li>
<li>职位</li>
<li style="position: relative;">校园 <span class="span-01">New</span> </li>
<li>海归</li>
<li>公司</li>
<li>APP</li>
<li>咨询</li>
<li style="position: relative;">发现<span class="span-01">hot</span> </li>
</ul>
<ul class="ul-head-button">
<li>
<div class="button-zc" οnclick="jump()">注册</div>
</li>
<li>
<div class="button-dl">登录</div>
</li>
<li class="rt-001">上传简历</li>
<li class="rt-001" style="position: relative;">我要找工作<span class="span-01">hot</span> </li>
<li class="rt-001">我要招聘</li>
</ul>
</div>
</div>


<style>
.second-box {
width: 100%;
height: 180px;
background-color: #36c6bb;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/banner/top.png) no-repeat;
background-size: auto 100%;
background-position: center;
}
</style>
<div class="second-box"></div>


<style>
.third-box {
width: 100%;
position: relative;
}

.third-box-top {
position: absolute;
width: 980px;
height: 34px;
top: 35px;
left: 300px;
font-size: 0;
}

.tbt-1 {
vertical-align: middle;
display: inline-block;
width: 98px;
height: 34px;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school-search-type@2x.png) no-repeat;
background-size: 250px 112px;
cursor: pointer;
background-position: 0 -78px;
}

.tbt-2 {
vertical-align: middle;
display: inline-block;
width: 98px;
height: 34px;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school-search-type@2x.png) no-repeat;
background-size: 250px 112px;
cursor: pointer;
margin-left: -11px;
background-position: -152px -39px;
}

.third-box-bottom {
position: absolute;
left: 300px;
top: 69px;
width: 980px;
height: 50px;
}

.tbb-btn {
width: 130px;
height: 50px;
line-height: 50px;
background-color: rgb(93, 213, 200);
font-size: 16px;
float: right;
text-align: center;
line-height: 50px;
color: white;
}

.tbb-ipt {
width: 848px;
height: 48px;
float: left;
border: none;
outline: none;
}

.tbb-ipt:hover {
border: 1px solid rgb(93, 213, 200);
}
</style>
<div class="third-box">
<div class="third-box-top">
<div class="tbt-1"></div>
<div class="tbt-2"></div>
</div>
<div class="third-box-bottom">
<input type="text" class="tbb-ipt" placeholder="成都                                   搜索职位、公司">

<div class="tbb-btn">搜索</div>
</div>
</div>


<style>
.four-box {
position: relative;
}

.fb-lbt {
width: 884px;
height: 340px;
position: absolute;
top: 170px;
left: 500px;
z-index: 1;
margin: 0 auto;
background-image: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/banner/bosszhipin.jpg);
animation: cgpic 6s;
animation-iteration-count: infinite;
}

@keyframes cgpic {
25% {
background-image: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/banner/bosszhipin.jpg);
}
50% {
background-image: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/banner/renshebu.jpg);
background-size: 884px 340px;
}
75% {
background-image: url(https://img.bosszhipin.com/static/file/2021/7onvxp591m1637828195167.jpeg);
background-size: 884px 340px;
}
100% {
background-image: url(https://img.bosszhipin.com/static/file/2021/c00k2zjxpx1637821843865.jpg);
background-size: 884px 340px;
}
}

.fb-top {
width: 284px;
height: 150px;
position: absolute;
left: 195px;
top: 170px;
background-color: white;
}

.fb-top ul {
list-style-type: none;
}

.fb-top ul li {
height: 50px;
text-indent: 25px;
line-height: 50px;
color: rgb(70, 69, 69);
font-weight: bold;
font-size: 15px;
}

.fb-top ul li:hover {
background-color: #00c2b3;
color: white;
}

.fb-bottom {
width: 284px;
height: 150px;
position: absolute;
left: 195px;
top: 360px;
background-color: white;
}

.fb-bottom ul {
list-style-type: none;
}

.fb-bottom ul li {
height: 50px;
text-indent: 25px;
line-height: 50px;
color: rgb(70, 69, 69);
font-weight: bold;
font-size: 15px;
position: relative;
}

.fb-bottom ul .li-02 {
font-size: 13px;
margin-top: -18px;
font-weight: normal;
}

.fb-bottom ul .li-02:hover {
color: #00c2b3;
}

.ft-hov {
position: absolute;
left: 300px;
width: 890px;
top: 0px;
height: 340px;
background-color: white;
z-index: 100;
display: none;
}

.ft-hov table {
color: black;
font-weight: normal;
border-collapse: collapse;
margin-left: 50px;
font-size: small;
color: #414a60;
}

.ft-hov table td {
width: 175px;
text-align: left;
}

.ft-hov table .ft {
font-size: normal;
color: rgb(32, 32, 32);
font-weight: bold;
}

.ft-hov table td:hover {
color: #00c2b3;
}

.fb-top ul li:hover .ft-hov {
display: block;
}

.gg {
height: 100px;
overflow-y: scroll;
}
</style>
<div class="four-box">
<div class="fb-top">
<ul>
<li>互联网技术/运营/产品
<div class="ft-hov">
<table>
<tr>
<td class="ft">互联网技术</td>
<td></td>
<td></td>
<td class="ft">运营</td>
<td class="ft">产品</td>
</tr>
<tr>
<td>Android</td>
<td>数据挖掘/机器学习</td>
<td>JAVA</td>
<td>客服</td>
<td>产品经理</td>
</tr>
<tr>
<td>后端开发</td>
<td>搜索/广告/推荐算法</td>
<td>PHP</td>
<td>产品运营</td>
<td>数据产品经理</td>
</tr>
<tr>
<td>Python</td>
<td>Web前端</td>
<td>C/C++</td>
<td>内容运营</td>
<td>用户研究</td>
</tr>
<tr>
<td>IT运维/安全</td>
<td>U3D/COCOS2DX</td>
<td>C#/NET</td>
<td>新媒体</td>
<td></td>
</tr>
<tr>
<td>测试</td>
<td>数据分析</td>
<td>Golang</td>
<td>用户运营</td>
<td></td>
</tr>
<tr>
<td>iOS</td>
<td>语音/视频/图形/开发</td>
<td>IT硬件</td>
<td>SEO/SEM</td>
<td></td>
</tr>
</table>
</div>
</li>
<li>设计/销售/房地产
<div class="ft-hov">
</div>
</li>
<li>人力/法律
<div class="ft-hov">
</div>
</li>
</ul>
</div>
<div class="fb-bottom">
<ul>
<li>学生活动</li>
<div class="gg">
<li class="li-02">2021秋招季-青年职上校招节</li>
<li class="li-02">2021年大中城市联合招聘</li>
<li class="li-02">金秋招聘月2021活动分会场</li>
<li class="li-02">24365校园招聘服务</li>
</div>
</ul>
</div>
<div class="fb-lbt"></div>
</div>


<style>
.h-font-01 {
position: relative;
margin-top: 550px;
}

h3 {
position: absolute;
margin-bottom: 20px;
font-size: 16px;
line-height: 22px;
left: 195px;
color: rgba(10, 10, 10, 0.9);
}
</style>
<div class="h-font-01">
<h3>校招直播</h3>
</div>


<style>
.five-box {
position: relative;
}

.feb-box-son {
margin-top: 45px;
position: relative;
width: 284px;
height: 267px;
background-color: white;
margin-left: 195px;
}

.fbs-01 {
background-image: url(https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20220106/b93206e5b50f908331475530db717aa40a41a1a92ca7d53851708c83c645c2001c048bcf0a5b01c5);
background-size: 284px 159px;
background-repeat: no-repeat;
float: left;
}

.five-box .fbs-02 {
background-image: url(https://img.bosszhipin.com/beijin/icon/be6a37adb46ec8cd29eef9e6676e4eed8ca26beac1ec615c06865bcf71753361.png?x-oss-process=image/watermark,text_6ZO-5a625oC76YOo57q_5LiK55u05pKt5a6j6K6y,g_nw,x_75,y_96,color_FFFFFF,size_84,type_d3F5LW1pY3JvaGVp/watermark,image_YmVpamluL21jcy9iYXIvMjAxOTEyMTYvM2UzNzFlODA5ZDQ5NTExNzdiNDQ3ZTk1N2Y5Zjc4ZDRiZTFiZDRhM2JkMmE2M2YwNzBiZGJkYWRhOWFhZDgyNi5qcGc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsd185MCxsaW1pdF8wL3JvdW5kZWQtY29ybmVycyxyXzE4,g_sw,x_75,y_90/watermark,text_TGlhbmppYS7pk77lrrY=,g_sw,x_180,y_135,color_FFFFFF,size_42,type_d3F5LW1pY3JvaGVp/watermark,text_V0VMQ09NRSBUTyBKT0lOIFVT,g_sw,x_180,y_93,color_FFFFFF,size_24,type_d3F5LW1pY3JvaGVp);
background-size: 284px 159px;
background-repeat: no-repeat;
float: left;
margin-left: 20px;
}

.five-box .fbs-03 {
background-image: url(https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20211224/b93206e5b50f9083b18acedd8d64a121faacf4da88c162817948e357fcd59d3c5fbbae1a128b6f7c);
background-size: 284px 159px;
background-repeat: no-repeat;
float: left;
margin-left: 20px;
}

.five-box .fbs-04 {
background-image: url(https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20211220/b93206e5b50f90836f43274a1f4e474659050fd93d32221ef434d611ac08a45b25f3488b3035f6cb);
background-size: 284px 159px;
background-repeat: no-repeat;
float: left;
margin-left: 20px;
}

.fbs-01-word {
width: 284px;
height: 108px;
position: absolute;
top: 180px;
left: 22px;
}

.f01-wd-01 {
font-weight: bold;
color: rgb(22, 22, 22);
}

.f01-wd-02 {
font-size: 15px;
color: rgb(97, 96, 96);
margin-top: 17px;
}

.fbs-img {
position: absolute;
left: 95px;
top: 40px;
width: 90px;
height: 90px;
background-color: white;
display: none;
}

.feb-box-son:hover .fbs-img {
display: block;
}
</style>
<div class="five-box">
<div class="feb-box-son fbs-01">
<div class="fbs-01-word">
<p class="f01-wd-01">睿魔智能OBSBOT线上校招</p>
<p class="f01-wd-02">硬件工程师-2022校招等12个岗位</p>
</div>
<img class="fbs-img" src="https://img.bosszhipin.com/beijin/weixin-service/qcodeC-3c9677e7e8787079510b058610e8406e.png" alt="">
</div>
<div class="feb-box-son fbs-02">
<div class="fbs-01-word">
<p class="f01-wd-01">睿魔智能OBSBOT线上校招</p>
<p class="f01-wd-02">硬件工程师-2022校招等12个岗位</p>
</div>
<img class="fbs-img" src="https://img.bosszhipin.com/beijin/weixin-service/qcodeC-3c9677e7e8787079510b058610e8406e.png" alt="">
</div>
<div class="feb-box-son fbs-03">
<div class="fbs-01-word">
<p class="f01-wd-01">睿魔智能OBSBOT线上校招</p>
<p class="f01-wd-02">硬件工程师-2022校招等12个岗位</p>
</div>
<img class="fbs-img" src="https://img.bosszhipin.com/beijin/weixin-service/qcodeC-3c9677e7e8787079510b058610e8406e.png" alt="">
</div>
<div class="feb-box-son fbs-04">
<div class="fbs-01-word">
<p class="f01-wd-01">睿魔智能OBSBOT线上校招</p>
<p class="f01-wd-02">硬件工程师-2022校招等12个岗位</p>
</div>
<img class="fbs-img" src="https://img.bosszhipin.com/beijin/weixin-service/qcodeC-3c9677e7e8787079510b058610e8406e.png" alt="">
</div>
</div>


<style>
.font-02 {
position: relative;
margin-top: 870px;
}

.h3-02 {
position: absolute;
font-size: 16px;
line-height: 22px;
top: 30px;
}

.f-02-btn {
position: absolute;
left: 285px;
top: 30px;
}

.f-02-btn ul {
list-style-type: none;
}

.f-02-btn ul li {
float: left;
}

.f-02-btn ul li .f02b-01 {
background: #5dd5c8;
color: #fff;
}

.f02b {
font-size: 14px;
width: 80px;
line-height: 34px;
margin-right: 10px;
text-align: center;
border-radius: 6px;
background-color: white;
color: rgb(22, 22, 22);
}

.f-02-btn ul li .f02b-we:hover {
color: white;
background-color: #5dd5c8;
}
</style>
<div class="font-02">
<h3 class="h3-02">热门公司</h3>
<div class="f-02-btn">
<ul>
<li>
<div class="f02b f02b-01">成都</div>
</li>
<li>
<div class="f02b f02b-we">北京</div>
</li>
<li>
<div class="f02b f02b-we">上海</div>
</li>
<li>
<div class="f02b f02b-we">广州</div>
</li>
<li>
<div class="f02b f02b-we">深圳</div>
</li>
<li>
<div class="f02b f02b-we">全国</div>
</li>
</ul>
</div>
</div>


<style>
.six-box {
position: relative;
}

.sb-bo1 {
width: 384px;
height: 210px;
position: absolute;
background-color: white;
top: 80px;
left: 195px;
}

.sb-top {
position: absolute;
width: 50px;
height: 24px;
top: 0;
right: 0;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/label-xiaozhao.png);
background-size: contain;
}

.sb-bo1-left img {
width: 60px;
height: 60px;
border: none;
}

.sb-bo1-left {
position: absolute;
left: 23px;
top: 23px;
}

.sb-bo1-right {
position: absolute;
left: 90px;
top: 23px;
}

.sb {
position: absolute;
left: 90px;
top: 60px;
}

.sb .sb-bt {
float: left;
font-size: x-small;
color: grey;
}

.sb .bt-01 {
margin-left: 17px;
border-left: 1px solid rgb(151, 151, 151);
}

.six-fonts {
position: absolute;
top: 65px;
font-size: 14px;
padding: 23px 23px;
color: rgb(22, 22, 22);
}

.six-bottom {
position: absolute;
bottom: 0;
left: 32px;
width: 316px;
height: 50px;
}

.six-bottom .sbo-01 {
float: left;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .sbo-02 {
float: right;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .six-over:hover {
color: #36c6bb;
}
</style>
<div class="six-box">
<div class="sb-bo1">
<div class="sb-bo1-left"><img src="https://img.bosszhipin.com/beijin/upload/com/logo/20200429/8f64c9d0b30a53c434b26799ca78966cec9b49ecaf1604cb263748f03d5c2b0f.png?x-oss-process=image/resize,w_100,limit_0" alt=""></div>
<div class="sb-bo1-right">华为</div>
<div class="sb">
<div class="sb-bt">不需要融资</div>
<div class="sb-bt bt-01">    10000以上</div>
<div class="sb-bt bt-01">    计算机软件</div>
</div>
<div class="sb-top"></div>
<div class="six-fonts">华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商，我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物 ...
</div>
<div class="six-bottom">
<div class="sbo-01 six-over">校招职位></div>
<div class="sbo-02 six-over">实习职位></div>
</div>
</div>

</div>

<style>
.six-box {
position: relative;
}

.sb-bo2 {
width: 384px;
height: 210px;
position: absolute;
background-color: white;
top: 80px;
left: 600px;
}

.sb-top {
position: absolute;
width: 50px;
height: 24px;
top: 0;
right: 0;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/label-xiaozhao.png);
background-size: contain;
}

.sb-bo2-left img {
width: 60px;
height: 60px;
border: none;
}

.sb-bo2-left {
position: absolute;
left: 23px;
top: 23px;
}

.sb-bo2-right {
position: absolute;
left: 90px;
top: 23px;
}

.sb {
position: absolute;
left: 90px;
top: 60px;
}

.sb .sb-bt {
float: left;
font-size: x-small;
color: grey;
}

.sb .bt-01 {
margin-left: 17px;
border-left: 1px solid rgb(151, 151, 151);
}

.six-fonts {
position: absolute;
top: 65px;
font-size: 14px;
padding: 23px 23px;
color: rgb(22, 22, 22);
}

.six-bottom {
position: absolute;
bottom: 0;
left: 32px;
width: 316px;
height: 50px;
}

.six-bottom .sbo-01 {
float: left;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .sbo-02 {
float: right;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .six-over:hover {
color: #36c6bb;
}
</style>
<div class="six-box">
<div class="sb-bo2">
<div class="sb-bo2-left"><img src="https://img.bosszhipin.com/beijin/upload/com/logo/20200429/8f64c9d0b30a53c434b26799ca78966cec9b49ecaf1604cb263748f03d5c2b0f.png?x-oss-process=image/resize,w_100,limit_0" alt=""></div>
<div class="sb-bo2-right">华为</div>
<div class="sb">
<div class="sb-bt">不需要融资</div>
<div class="sb-bt bt-01">    10000以上</div>
<div class="sb-bt bt-01">    计算机软件</div>
</div>
<div class="sb-top"></div>
<div class="six-fonts">华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商，我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物 ...
</div>
<div class="six-bottom">
<div class="sbo-01 six-over">校招职位></div>
<div class="sbo-02 six-over">实习职位></div>
</div>
</div>

</div>


<style>
.six-box {
position: relative;
}

.sb-bo3 {
width: 384px;
height: 210px;
position: absolute;
background-color: white;
top: 80px;
left: 1005px;
}

.sb-top {
position: absolute;
width: 50px;
height: 24px;
top: 0;
right: 0;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/label-xiaozhao.png);
background-size: contain;
}

.sb-bo3-left img {
width: 60px;
height: 60px;
border: none;
}

.sb-bo3-left {
position: absolute;
left: 23px;
top: 23px;
}

.sb-bo3-right {
position: absolute;
left: 90px;
top: 23px;
}

.sb {
position: absolute;
left: 90px;
top: 60px;
}

.sb .sb-bt {
float: left;
font-size: x-small;
color: grey;
}

.sb .bt-01 {
margin-left: 17px;
border-left: 1px solid rgb(151, 151, 151);
}

.six-fonts {
position: absolute;
top: 65px;
font-size: 14px;
padding: 23px 23px;
color: rgb(22, 22, 22);
}

.six-bottom {
position: absolute;
bottom: 0;
left: 32px;
width: 316px;
height: 50px;
}

.six-bottom .sbo-01 {
float: left;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .sbo-02 {
float: right;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .six-over:hover {
color: #36c6bb;
}
</style>
<div class="six-box">
<div class="sb-bo3">
<div class="sb-bo3-left"><img src="https://img.bosszhipin.com/beijin/upload/com/logo/20200429/8f64c9d0b30a53c434b26799ca78966cec9b49ecaf1604cb263748f03d5c2b0f.png?x-oss-process=image/resize,w_100,limit_0" alt=""></div>
<div class="sb-bo3-right">华为</div>
<div class="sb">
<div class="sb-bt">不需要融资</div>
<div class="sb-bt bt-01">    10000以上</div>
<div class="sb-bt bt-01">    计算机软件</div>
</div>
<div class="sb-top"></div>
<div class="six-fonts">华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商，我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物 ...
</div>
<div class="six-bottom">
<div class="sbo-01 six-over">校招职位></div>
<div class="sbo-02 six-over">实习职位></div>
</div>
</div>

</div>


<style>
.six-box {
position: relative;
}

.sb-bo4 {
width: 384px;
height: 210px;
position: absolute;
background-color: white;
top: 310px;
left: 195px;
}

.sb-top {
position: absolute;
width: 50px;
height: 24px;
top: 0;
right: 0;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/label-xiaozhao.png);
background-size: contain;
}

.sb-bo4-left img {
width: 60px;
height: 60px;
border: none;
}

.sb-bo4-left {
position: absolute;
left: 23px;
top: 23px;
}

.sb-bo4-right {
position: absolute;
left: 90px;
top: 23px;
}

.sb {
position: absolute;
left: 90px;
top: 60px;
}

.sb .sb-bt {
float: left;
font-size: x-small;
color: grey;
}

.sb .bt-01 {
margin-left: 17px;
border-left: 1px solid rgb(151, 151, 151);
}

.six-fonts {
position: absolute;
top: 65px;
font-size: 14px;
padding: 23px 23px;
color: rgb(22, 22, 22);
}

.six-bottom {
position: absolute;
bottom: 0;
left: 32px;
width: 316px;
height: 50px;
}

.six-bottom .sbo-01 {
float: left;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .sbo-02 {
float: right;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .six-over:hover {
color: #36c6bb;
}
</style>
<div class="six-box">
<div class="sb-bo4">
<div class="sb-bo4-left"><img src="https://img.bosszhipin.com/beijin/upload/com/logo/20200429/8f64c9d0b30a53c434b26799ca78966cec9b49ecaf1604cb263748f03d5c2b0f.png?x-oss-process=image/resize,w_100,limit_0" alt=""></div>
<div class="sb-bo4-right">华为</div>
<div class="sb">
<div class="sb-bt">不需要融资</div>
<div class="sb-bt bt-01">    10000以上</div>
<div class="sb-bt bt-01">    计算机软件</div>
</div>
<div class="sb-top"></div>
<div class="six-fonts">华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商，我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物 ...
</div>
<div class="six-bottom">
<div class="sbo-01 six-over">校招职位></div>
<div class="sbo-02 six-over">实习职位></div>
</div>
</div>

</div>


<style>
.six-box {
position: relative;
}

.sb-bo5 {
width: 384px;
height: 210px;
position: absolute;
background-color: white;
top: 310px;
left: 600px;
}

.sb-top {
position: absolute;
width: 50px;
height: 24px;
top: 0;
right: 0;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/label-xiaozhao.png);
background-size: contain;
}

.sb-bo5-left img {
width: 60px;
height: 60px;
border: none;
}

.sb-bo5-left {
position: absolute;
left: 23px;
top: 23px;
}

.sb-bo5-right {
position: absolute;
left: 90px;
top: 23px;
}

.sb {
position: absolute;
left: 90px;
top: 60px;
}

.sb .sb-bt {
float: left;
font-size: x-small;
color: grey;
}

.sb .bt-01 {
margin-left: 17px;
border-left: 1px solid rgb(151, 151, 151);
}

.six-fonts {
position: absolute;
top: 65px;
font-size: 14px;
padding: 23px 23px;
color: rgb(22, 22, 22);
}

.six-bottom {
position: absolute;
bottom: 0;
left: 32px;
width: 316px;
height: 50px;
}

.six-bottom .sbo-01 {
float: left;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .sbo-02 {
float: right;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .six-over:hover {
color: #36c6bb;
}
</style>
<div class="six-box">
<div class="sb-bo5">
<div class="sb-bo5-left"><img src="https://img.bosszhipin.com/beijin/upload/com/logo/20200429/8f64c9d0b30a53c434b26799ca78966cec9b49ecaf1604cb263748f03d5c2b0f.png?x-oss-process=image/resize,w_100,limit_0" alt=""></div>
<div class="sb-bo5-right">华为</div>
<div class="sb">
<div class="sb-bt">不需要融资</div>
<div class="sb-bt bt-01">    10000以上</div>
<div class="sb-bt bt-01">    计算机软件</div>
</div>
<div class="sb-top"></div>
<div class="six-fonts">华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商，我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物 ...
</div>
<div class="six-bottom">
<div class="sbo-01 six-over">校招职位></div>
<div class="sbo-02 six-over">实习职位></div>
</div>
</div>

</div>


<style>
.six-box {
position: relative;
}

.sb-bo6 {
width: 384px;
height: 210px;
position: absolute;
background-color: white;
top: 310px;
left: 1005px;
}

.sb-top {
position: absolute;
width: 50px;
height: 24px;
top: 0;
right: 0;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school/label-xiaozhao.png);
background-size: contain;
}

.sb-bo6-left img {
width: 60px;
height: 60px;
border: none;
}

.sb-bo6-left {
position: absolute;
left: 23px;
top: 23px;
}

.sb-bo6-right {
position: absolute;
left: 90px;
top: 23px;
}

.sb {
position: absolute;
left: 90px;
top: 60px;
}

.sb .sb-bt {
float: left;
font-size: x-small;
color: grey;
}

.sb .bt-01 {
margin-left: 17px;
border-left: 1px solid rgb(151, 151, 151);
}

.six-fonts {
position: absolute;
top: 65px;
font-size: 14px;
padding: 23px 23px;
color: rgb(22, 22, 22);
}

.six-bottom {
position: absolute;
bottom: 0;
left: 32px;
width: 316px;
height: 50px;
}

.six-bottom .sbo-01 {
float: left;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .sbo-02 {
float: right;
line-height: 50px;
font-size: 14px;
color: grey;
}

.six-bottom .six-over:hover {
color: #36c6bb;
}
</style>
<div class="six-box">
<div class="sb-bo6">
<div class="sb-bo6-left"><img src="https://img.bosszhipin.com/beijin/upload/com/logo/20200429/8f64c9d0b30a53c434b26799ca78966cec9b49ecaf1604cb263748f03d5c2b0f.png?x-oss-process=image/resize,w_100,limit_0" alt=""></div>
<div class="sb-bo6-right">华为</div>
<div class="sb">
<div class="sb-bt">不需要融资</div>
<div class="sb-bt bt-01">    10000以上</div>
<div class="sb-bt bt-01">    计算机软件</div>
</div>
<div class="sb-top"></div>
<div class="six-fonts">华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商，我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物 ...
</div>
<div class="six-bottom">
<div class="sbo-01 six-over">校招职位></div>
<div class="sbo-02 six-over">实习职位></div>
</div>
</div>

</div>


<style>
.font-03 {
position: relative;
margin-top: 1400px;
}

.h3-02 {
position: absolute;
font-size: 16px;
line-height: 22px;
top: 30px;
}

.f-02-btn {
position: absolute;
left: 285px;
top: 30px;
}

.f-02-btn ul {
list-style-type: none;
}

.f-02-btn ul li {
float: left;
}

.f-02-btn ul li .f02b-01 {
background: #5dd5c8;
color: #fff;
}

.f02b {
font-size: 14px;
width: 80px;
line-height: 34px;
margin-right: 10px;
text-align: center;
border-radius: 6px;
background-color: white;
color: rgb(22, 22, 22);
}

.f-02-btn ul li .f02b-we:hover {
color: white;
background-color: #5dd5c8;
}
</style>
<div class="font-03">
<h3 class="h3-02">热门校招</h3>
<div class="f-02-btn">
<ul>
<li>
<div class="f02b f02b-01">全职</div>
</li>
<li>
<div class="f02b f02b-we">实习</div>
</li>
</ul>
</div>
</div>


<style>
.seven-box {
position: relative;
margin-top: 1480px;
margin-left: 195px;
}

.sev-box {
position: absolute;
width: 384px;
height: 140px;
background-color: white;
}

.sevbox-left {
position: absolute;
top: 20px;
left: 20px;
}

.sevbox-right {
position: absolute;
top: 20px;
left: 280px;
color: orangered;
}

.sevbox-bottom {
position: absolute;
top: 50px;
left: 20px;
}

.sevbox-bottom div {
float: left;
font-size: 13px;
}

.sevbox-bottom .sev-bo-son {
margin-left: 12px;
border-left: 1px solid rgb(151, 151, 151);
}

.seven-last {
position: absolute;
bottom: 0;
width: 384px;
height: 60px;
}

.seven-last div img {
position: absolute;
top: 10px;
left: 18px;
width: 40px;
height: 40px;
}

.hxwl {
position: absolute;
top: 20px;
left: 75px;
font-size: 15px;
}

.last-01 {
position: absolute;
top: 22px;
left: 145px;
font-size: 10px;
color: grey;
}

.last-02 {
position: absolute;
top: 22px;
left: 220px;
font-size: 10px;
border-left: 1px solid rgb(150, 148, 148);
color: grey;
}
</style>
<div class="seven-box">
<div class="sev-box">
<div class="sevbox-left">前端开发工程师</div>
<div class="sevbox-right">8-10K 14薪</div>
<div class="sevbox-bottom">
<div>成都</div>
<div class="sev-bo-son">   在校/应届</div>
<div class="sev-bo-son">   本科</div>
</div>
<div class="seven-last">
<div><img src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20160625/0f7c0c88a26918c6bccbb87fe43b5a05a913d92db28697eac97819731866a743.jpg?x-oss-process=image/resize,w_60,limit_0" alt=""></div>
<div class="hxwl">华讯网络</div>
<div class="last-01">计算机软件</div>
<div class="last-02">   未融资</div>
</div>
</div>
</div>


<style>
.seven-box2 {
position: relative;
margin-top: 1480px;
margin-left: 600px;
}

.sev-box {
position: absolute;
width: 384px;
height: 140px;
background-color: white;
}

.sevbox-left {
position: absolute;
top: 20px;
left: 20px;
}

.sevbox-right {
position: absolute;
top: 20px;
left: 280px;
color: orangered;
}

.sevbox-bottom {
position: absolute;
top: 50px;
left: 20px;
}

.sevbox-bottom div {
float: left;
font-size: 13px;
}

.sevbox-bottom .sev-bo-son {
margin-left: 12px;
border-left: 1px solid rgb(151, 151, 151);
}

.seven-last {
position: absolute;
bottom: 0;
width: 384px;
height: 60px;
}

.seven-last div img {
position: absolute;
top: 10px;
left: 18px;
width: 40px;
height: 40px;
}

.hxwl {
position: absolute;
top: 20px;
left: 75px;
font-size: 15px;
}

.last-01 {
position: absolute;
top: 22px;
left: 145px;
font-size: 10px;
color: grey;
}

.last-02 {
position: absolute;
top: 22px;
left: 220px;
font-size: 10px;
border-left: 1px solid rgb(150, 148, 148);
color: grey;
}
</style>
<div class="seven-box2">
<div class="sev-box">
<div class="sevbox-left">前端开发工程师</div>
<div class="sevbox-right">8-10K 14薪</div>
<div class="sevbox-bottom">
<div>成都</div>
<div class="sev-bo-son">   在校/应届</div>
<div class="sev-bo-son">   本科</div>
</div>
<div class="seven-last">
<div><img src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20160625/0f7c0c88a26918c6bccbb87fe43b5a05a913d92db28697eac97819731866a743.jpg?x-oss-process=image/resize,w_60,limit_0" alt=""></div>
<div class="hxwl">华讯网络</div>
<div class="last-01">计算机软件</div>
<div class="last-02">   未融资</div>
</div>
</div>
</div>


<style>
.seven-box3 {
position: relative;
margin-top: 1480px;
margin-left: 1005px;
}

.sev-box {
position: absolute;
width: 384px;
height: 140px;
background-color: white;
}

.sevbox-left {
position: absolute;
top: 20px;
left: 20px;
}

.sevbox-right {
position: absolute;
top: 20px;
left: 280px;
color: orangered;
}

.sevbox-bottom {
position: absolute;
top: 50px;
left: 20px;
}

.sevbox-bottom div {
float: left;
font-size: 13px;
}

.sevbox-bottom .sev-bo-son {
margin-left: 12px;
border-left: 1px solid rgb(151, 151, 151);
}

.seven-last {
position: absolute;
bottom: 0;
width: 384px;
height: 60px;
}

.seven-last div img {
position: absolute;
top: 10px;
left: 18px;
width: 40px;
height: 40px;
}

.hxwl {
position: absolute;
top: 20px;
left: 75px;
font-size: 15px;
}

.last-01 {
position: absolute;
top: 22px;
left: 145px;
font-size: 10px;
color: grey;
}

.last-02 {
position: absolute;
top: 22px;
left: 220px;
font-size: 10px;
border-left: 1px solid rgb(150, 148, 148);
color: grey;
}
</style>
<div class="seven-box3">
<div class="sev-box">
<div class="sevbox-left">前端开发工程师</div>
<div class="sevbox-right">8-10K 14薪</div>
<div class="sevbox-bottom">
<div>成都</div>
<div class="sev-bo-son">   在校/应届</div>
<div class="sev-bo-son">   本科</div>
</div>
<div class="seven-last">
<div><img src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20160625/0f7c0c88a26918c6bccbb87fe43b5a05a913d92db28697eac97819731866a743.jpg?x-oss-process=image/resize,w_60,limit_0" alt=""></div>
<div class="hxwl">华讯网络</div>
<div class="last-01">计算机软件</div>
<div class="last-02">   未融资</div>
</div>
</div>
</div>


<style>
.seven-box4 {
position: relative;
margin-top: 1640px;
margin-left: 195px;
}

.sev-box {
position: absolute;
width: 384px;
height: 140px;
background-color: white;
}

.sevbox-left {
position: absolute;
top: 20px;
left: 20px;
}

.sevbox-right {
position: absolute;
top: 20px;
left: 280px;
color: orangered;
}

.sevbox-bottom {
position: absolute;
top: 50px;
left: 20px;
}

.sevbox-bottom div {
float: left;
font-size: 13px;
}

.sevbox-bottom .sev-bo-son {
margin-left: 12px;
border-left: 1px solid rgb(151, 151, 151);
}

.seven-last {
position: absolute;
bottom: 0;
width: 384px;
height: 60px;
}

.seven-last div img {
position: absolute;
top: 10px;
left: 18px;
width: 40px;
height: 40px;
}

.hxwl {
position: absolute;
top: 20px;
left: 75px;
font-size: 15px;
}

.last-01 {
position: absolute;
top: 22px;
left: 145px;
font-size: 10px;
color: grey;
}

.last-02 {
position: absolute;
top: 22px;
left: 220px;
font-size: 10px;
border-left: 1px solid rgb(150, 148, 148);
color: grey;
}
</style>
<div class="seven-box4">
<div class="sev-box">
<div class="sevbox-left">前端开发工程师</div>
<div class="sevbox-right">8-10K 14薪</div>
<div class="sevbox-bottom">
<div>成都</div>
<div class="sev-bo-son">   在校/应届</div>
<div class="sev-bo-son">   本科</div>
</div>
<div class="seven-last">
<div><img src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20160625/0f7c0c88a26918c6bccbb87fe43b5a05a913d92db28697eac97819731866a743.jpg?x-oss-process=image/resize,w_60,limit_0" alt=""></div>
<div class="hxwl">华讯网络</div>
<div class="last-01">计算机软件</div>
<div class="last-02">   未融资</div>
</div>
</div>
</div>


<style>
.seven-box5 {
position: relative;
margin-top: 1640px;
margin-left: 600px;
}

.sev-box {
position: absolute;
width: 384px;
height: 140px;
background-color: white;
}

.sevbox-left {
position: absolute;
top: 20px;
left: 20px;
}

.sevbox-right {
position: absolute;
top: 20px;
left: 280px;
color: orangered;
}

.sevbox-bottom {
position: absolute;
top: 50px;
left: 20px;
}

.sevbox-bottom div {
float: left;
font-size: 13px;
}

.sevbox-bottom .sev-bo-son {
margin-left: 12px;
border-left: 1px solid rgb(151, 151, 151);
}

.seven-last {
position: absolute;
bottom: 0;
width: 384px;
height: 60px;
}

.seven-last div img {
position: absolute;
top: 10px;
left: 18px;
width: 40px;
height: 40px;
}

.hxwl {
position: absolute;
top: 20px;
left: 75px;
font-size: 15px;
}

.last-01 {
position: absolute;
top: 22px;
left: 145px;
font-size: 10px;
color: grey;
}

.last-02 {
position: absolute;
top: 22px;
left: 220px;
font-size: 10px;
border-left: 1px solid rgb(150, 148, 148);
color: grey;
}
</style>
<div class="seven-box5">
<div class="sev-box">
<div class="sevbox-left">前端开发工程师</div>
<div class="sevbox-right">8-10K 14薪</div>
<div class="sevbox-bottom">
<div>成都</div>
<div class="sev-bo-son">   在校/应届</div>
<div class="sev-bo-son">   本科</div>
</div>
<div class="seven-last">
<div><img src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20160625/0f7c0c88a26918c6bccbb87fe43b5a05a913d92db28697eac97819731866a743.jpg?x-oss-process=image/resize,w_60,limit_0" alt=""></div>
<div class="hxwl">华讯网络</div>
<div class="last-01">计算机软件</div>
<div class="last-02">   未融资</div>
</div>
</div>
</div>


<style>
.seven-box6 {
position: relative;
margin-top: 1640px;
margin-left: 1005px;
}

.sev-box {
position: absolute;
width: 384px;
height: 140px;
background-color: white;
}

.sevbox-left {
position: absolute;
top: 20px;
left: 20px;
}

.sevbox-right {
position: absolute;
top: 20px;
left: 280px;
color: orangered;
}

.sevbox-bottom {
position: absolute;
top: 50px;
left: 20px;
}

.sevbox-bottom div {
float: left;
font-size: 13px;
}

.sevbox-bottom .sev-bo-son {
margin-left: 12px;
border-left: 1px solid rgb(151, 151, 151);
}

.seven-last {
position: absolute;
bottom: 0;
width: 384px;
height: 60px;
}

.seven-last div img {
position: absolute;
top: 10px;
left: 18px;
width: 40px;
height: 40px;
}

.hxwl {
position: absolute;
top: 20px;
left: 75px;
font-size: 15px;
}

.last-01 {
position: absolute;
top: 22px;
left: 145px;
font-size: 10px;
color: grey;
}

.last-02 {
position: absolute;
top: 22px;
left: 220px;
font-size: 10px;
border-left: 1px solid rgb(150, 148, 148);
color: grey;
}
</style>
<div class="seven-box6">
<div class="sev-box">
<div class="sevbox-left">前端开发工程师</div>
<div class="sevbox-right">8-10K 14薪</div>
<div class="sevbox-bottom">
<div>成都</div>
<div class="sev-bo-son">   在校/应届</div>
<div class="sev-bo-son">   本科</div>
</div>
<div class="seven-last">
<div><img src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20160625/0f7c0c88a26918c6bccbb87fe43b5a05a913d92db28697eac97819731866a743.jpg?x-oss-process=image/resize,w_60,limit_0" alt=""></div>
<div class="hxwl">华讯网络</div>
<div class="last-01">计算机软件</div>
<div class="last-02">   未融资</div>
</div>
</div>
</div>


<style>
.ckgd {
position: relative;
top: 180px;
left: 600px;
width: 384px;
height: 44px;
line-height: 44px;
background: #fff;
color: #00c2b3;
border: none;
text-align: center;
}

.ckgd:hover {
color: white;
background-color: #00c2b3;
}
</style>
<div class="ckgd">查看更多</div>


<style>
.font-04 {
position: relative;
}

.h3-04 {
position: absolute;
font-size: 16px;
line-height: 22px;
top: 250px;
}
</style>
<div class="font-04">
<h3 class="h3-04">求职攻略 </h3>
</div>


<style>
.five-box4 {
position: relative;
margin-top: 260px;
}

.feb-box-son {
margin-top: 45px;
position: relative;
width: 284px;
height: 267px;
background-color: white;
margin-left: 195px;
}

.fbs-01-fk {
background-image: url(https://img.bosszhipin.com/beijin/cms/a35d875c246e13a30baea64e1a7600c026b1843edb5867970fca7c28c0d4ecaec6eeee71f3274248861ad84e54330017.png);
background-size: 284px 159px;
background-repeat: no-repeat;
float: left;
}

.fbs-01-fk:hover {
background-size: 300px 168px;
background-repeat: no-repeat;
}

.five-box4 .fbs-02-fk:hover {
background-size: 300px 168px;
background-repeat: no-repeat;
}

.five-box4 .fbs-03-fk:hover {
background-size: 300px 168px;
background-repeat: no-repeat;
}

.five-box4 .fbs-04-fk:hover {
background-size: 300px 168px;
background-repeat: no-repeat;
}

.five-box4 .fbs-02-fk {
background-image: url(https://img.bosszhipin.com/beijin/cms/027569a9ddcbc345545e1b163869a92f26b1843edb5867970fca7c28c0d4ecae5eed1c76c878402da89f08f15ecee4b2.png);
background-size: 284px 159px;
background-repeat: no-repeat;
float: left;
margin-left: 20px;
}

.five-box4 .fbs-03-fk {
background-image: url(https://img.bosszhipin.com/beijin/cms/d8cf93d01d5c431322811b9f463b274926b1843edb5867970fca7c28c0d4ecae87d207d7a1364f9c84cdaa89e656d70e.png);
background-size: 284px 159px;
background-repeat: no-repeat;
float: left;
margin-left: 20px;
}

.five-box4 .fbs-04-fk {
background-image: url(https://img.bosszhipin.com/beijin/cms/9cca24d58d79a0b3942f54e02847cb96.jpeg);
background-size: 284px 159px;
background-repeat: no-repeat;
float: left;
margin-left: 20px;
}

.fbs-01-word {
width: 284px;
height: 108px;
position: absolute;
top: 180px;
left: 22px;
}

.f01-wd-01 {
font-weight: bold;
color: rgb(22, 22, 22);
}

.f01-wd-02 {
font-size: 15px;
color: rgb(97, 96, 96);
margin-top: 17px;
}

.img-box-feb-01 {
position: absolute;
width: 284px;
height: 159px;
}
</style>
<div class="five-box4">
<div class="feb-box-son fbs-01-fk">
<div class="img-box-feb-01"></div>
<div class="fbs-01-word">
<p class="f01-wd-01">睿魔智能OBSBOT线上校招</p>
<p class="f01-wd-02">硬件工程师-2022校招等12个岗位</p>
</div>

</div>
<div class="feb-box-son fbs-02-fk">
<div class="fbs-01-word">
<p class="f01-wd-01">睿魔智能OBSBOT线上校招</p>
<p class="f01-wd-02">硬件工程师-2022校招等12个岗位</p>
</div>

</div>
<div class="feb-box-son fbs-03-fk">
<div class="fbs-01-word">
<p class="f01-wd-01">睿魔智能OBSBOT线上校招</p>
<p class="f01-wd-02">硬件工程师-2022校招等12个岗位</p>
</div>

</div>
<div class="feb-box-son fbs-04-fk">
<div class="fbs-01-word">
<p class="f01-wd-01">睿魔智能OBSBOT线上校招</p>
<p class="f01-wd-02">硬件工程师-2022校招等12个岗位</p>
</div>

</div>
</div>


<style>
.bigs {
position: relative;
top: 350px;
}

.school {
position: relative;
height: 245px;
background: url(https://static.zhipin.com/zhipin-geek/v489/web/geek/images/school-mask_v2.jpg) center no-repeat;
box-sizing: border-box;
padding: 52px 0 0 120px;
color: #414a60;
}

.school div {
position: absolute;
font-size: 26px;
margin-bottom: 21px;
left: 350px;
}

.school ul {
list-style-type: none;
position: absolute;
top: 100px;
left: 360px;
}

.school ul li {
margin-top: 7px;
}

.school ul li::before {
content: '·';
margin-right: 8px;
}
</style>
<div class="bigs">
<div class="school">
<div>上线视频面试，避免疫情感染</div>
<ul>
<li>
随时随地在线沟通，语音视频面试更安全
</li>
<li>随时随地可面试，在哪都能工作</li>
<li>远程面试防止疫情感染</li>
</ul>
</div>
</div>


<style>
.bottom {
width: 100%;
height: 320px;
background-color: white;
position: relative;
top: 420px;
}

.bt-tb {
float: left;
margin-left: 200px;
font-size: smaller;
background-color: white;
}

.bt-tb td {
padding: 5px;
color: grey;
}

.last {
float: left;
margin-left: 240px;
font-size: xx-small;
margin-top: 45px;
color: rgba(24, 24, 24, 0.95);
}

.last .grey {
color: grey;
}

.last:hover :not(.grey) {
color: rgb(35, 167, 167);
}

.bt-tb .bt-tb-blod {
font-size: medium;
color: rgba(24, 24, 24, 0.85);
}
</style>
<div class="bottom">
<table class="bt-tb">
<tr>
<td class="bt-tb-blod">企业服务

</td>

<td class="bt-tb-blod">使用与帮助                              </td>
<td class="bt-tb-blod">联系BOSS直聘</td>
<td class="bt-tb-blod">                                                          BOSS直聘</td>
</tr>
<tr>
<td>职位搜索</td>
<td>协议与规则</td>
<td>北京华品博睿网络技术有限公司</td>
<td>企业服务热线和举报投诉/未成年人举报渠道 400 065 5799</td>
</tr>
<tr>
<td>新闻资讯</td>
<td>个人信息保护政策</td>
<td>公司地址北京市朝阳区太阳宫中路16号院1号楼18层1801内09</td>
<td>                                           老年人直连热线400
661 6030
</td>
</tr>
<tr>
<td>BOSS直聘APP</td>
<td>防骗指南</td>
<td>违法和不良信息举报邮箱/未成年人举报渠道 jubao@kanzhun.com            </td>
<td>                                                            工作日8:00
- 22:00</td>
</tr>
<tr>
<td>投资者关系</td>
<td>使用帮助</td>
<td></td>
<td>                                                           休息日
9:30 - 18:30</td>
</tr>
</table>

<div class="last">
<span class="grey">Copyright © 2022 BOSS直聘</span>    京ICP备14013441号-5    <span class="grey">京ICP证150923号</span>    <span class="grey">京网文[2020]0399-066 号</span>
<span><img src="https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png" alt="" style="width: 25px;height: 25px;">电子营业执照</span>
<span><img src="https://static.zhipin.com/v2/web/geek/images/icon-beian.png" alt="">京公网安备11010502032801</span>
<br> 朝阳网警    人力资源服务许可证    网上有害信息举报专区     <span class="grey">朝阳区人社局监督电话</span>

</div>

<style>
.bto-icon {
position: absolute;
top: 268px;
left: 1150px;
}

.bto-icon-01 {
width: 34px;
height: 34px;
line-height: 34px;
border: 1px #bbc7ee solid;
border-radius: 100%;
margin-left: 23px;
vertical-align: top;
float: left;
position: relative;
display: block;
}

.bto-icon-01:hover {
border-color: grey;
}

.first-imgg {
width: 28px;
height: 28px;
margin-top: 3px;
margin-left: 3px;
}

.third-imgg {
margin-left: 2.4px;
margin-top: 9px;
}

.fourth-imgg {
width: 25px;
height: 25px;
margin-left: 5px;
margin-top: 6px;
}

.wx .hov {
width: 100px;
height: 100px;
}

.bto-icon .wx {
position: relative;
display: block;
}

.wx .div-hov {
position: absolute;
top: -101px;
left: -30px;
display: none;
}

.bto-icon .wx:hover .div-hov {
display: block;
}
</style>
<div class="bto-icon">
<div class="bto-icon-01"><img class="first-imgg" src="6.png " alt=""></div>
<div class="bto-icon-01 wx"><img class="first-imgg" src="wx.png" alt="">
<div class="div-hov"><img src="https://static.zhipin.com/v2/web/geek/images/we_chat_qr.jpg" class="hov" alt=""></div>
</div>
<div class="bto-icon-01"><img class="third-imgg" src="7.PNG" alt=""></div>
<div class="bto-icon-01"><img class="fourth-imgg" src="https://img.bosszhipin.com/static/file/2021/dppx09luaq1637052502211.png" alt=""></div>
</div>

</div>
</body>

</html>