欢迎来到我的前端实战代码
此篇随笔是在我(鸡哥)完成了html与css的学习后进行的前端实战代码
摘选于拉勾网app的登录页面(如有雷同，纯属意外)
<!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">
<link rel="stylesheet" href="./我的第一次前端实战.css" />
<title>第一次前端实战</title>
<style>
.html,
body {
height: 100%;
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
h1,
h2 {
margin: 0;
}
p {
margin: 0;
padding: 0;
}
.all {
width: 1200px;
margin: 0 auto;
}
.clearFixed:after {
content: "";
display: block;
clear: both;
}
.header {
height: 160px;
}
.header .h_top {
height: 40px;
background-color: #32373e;
}
.header .h_top .h_top_con {
height: 40px;
background-color: #32373e;
}
.header .h_top .h_top_con .conleft {
height: 40px;
float: left;
background-color: chartreuse;
}
.header .h_top .h_top_con .conleft .leftTxt {
background: #32373e;
float: left;
height: 40px;
}
.header .h_top .h_top_con .conleft .leftTxt a {
line-height: 40px;
}
.header .h_top .h_top_con .conleft .leftTxt .logo {
font-size: 22px;
color: #00b38a;
margin-right: 32px;
}
.header .h_top .h_top_con .conleft .leftTxt .city {
font-size: 12px;
color: #00b38a;
margin-right: 14px;
}
.header .h_top .h_top_con .conleft .leftTxt .switch {
font-size: 12px;
color: #afb5c0;
margin-right: 36px;
}
.header .h_top .h_top_con .conleft .ulList {
background: #32373e;
float: left;
height: 40px;
font-size: 14px;
line-height: 40px;
}
.header .h_top .h_top_con .conleft .ulList li {
float: left;
width: 70px;
text-align: center;
}
.header .h_top .h_top_con .conleft .ulList li:first-child {
background-color: #24282c;
}
.header .h_top .h_top_con .conleft .ulList a {
color: #afb5a7;
}
.header .h_top .h_top_con .conleft .ulList li:first-child a {
color: #fff;
}
.header .h_top .h_top_con .conright {
height: 40px;
float: right;
}
.header .h_top .h_top_con .conright .ulList2 {
height: 40px;
font-size: 12px;
}
.header .h_top .h_top_con .conright .ulList2 li {
float: left;
line-height: 40px;
}
.header .h_top .h_top_con .conright .ulList2 li a {
display: block;
}
.header .h_top .h_top_con .conright .ulList2 li .login {
padding-left: 28px;
color: #afb5c0;
}
.header .h_top .h_top_con .conright .ulList2 li .btn span{
background-image: url(./img/sprite.png);
background-repeat: no-repeat;
width: 18px;
height: 18px;
float: left;
background-position: -9px -32px;
background-size: 60px 106px;
margin-top: 10px;
margin-right: 10px;
}
.header .h_top .h_top_con .conright .ulList2 li .register {
margin-right: 40px;
color: #afb5c0;
}
.header .h_top .h_top_con .conright .ulList2 li .register span {
padding: 0 12px;
}
.header .h_top .h_top_con .conright .ulList2 li .app {
margin-right: 22px;
color: #08b96c;
}
.header .h_top .h_top_con .conright .ulList2 li .app span {
background-position: -33px -32px;
margin-right: 1px;
}
.header .h_top .h_top_con .conright .ulList2 li .firm {
color: #afb5c0;
}
.header .h_bottom {
height: 120px;
background-color: #00b38a;
}
.header .h_bottom .h_bottom_con {
height: 120px;
background-color: #00b38a;
}
.header .h_bottom .h_bottom_con .conLeft {
position: relative;
float: left;
width: 566px;
height: 120px;
background: url("./img/logo.png") no-repeat;
background-size: 226px 100%;
}
.header .h_bottom .h_bottom_con .conLeft .conLeft_f {
position: absolute;
top: 32px;
left: 232px;
}
.header .h_bottom .h_bottom_con .conLeft .conLeft_s {
position: absolute;
top: 75px;
left: 232px;
font-size: 12px;
color: #fff;
}
.header .h_bottom .h_bottom_con .conRight {
position: relative;
width: 634px;
height: 120px;
background-color: #00b38a;
float: right;
}
.header .h_bottom .h_bottom_con .conRight .conRight_box {
position: absolute;
top: 50%;
margin-top: -18px;
height: 35px;
background-color: #00b38a;
margin-left: 194px;
color: #757575
font-size； 12px;
width: 440px;
}
.header .h_bottom .h_bottom_con .conRight .conRight_box .number {
float: left;
border: none;
height: 33px;
margin-right: 25px;
width: 163px;
text-indent: 10px;
outline: none;
}
.header .h_bottom .h_bottom_con .conRight .conRight_box .true {
float: left;
width: 148px;
background-color: #fff;
margin-right: 9px;
color: #757575;
}
.header .h_bottom .h_bottom_con .conRight .conRight_box .true .number2 {
border: none;
height: 33px;
width: 94px;
text-indent: 10px;
outline: none;
}
.header .h_bottom .h_bottom_con .conRight .conRight_box .true .get {
width: 54px;
padding: 6px 4px 9px;
font-size: 12px;
color: #00b38a;
margin-right: 2px;
}
.header .h_bottom .h_bottom_con .conRight .conRight_box .login {
float: left;
width: 91px;
height: 35px;
border: 1px solid #ccefe7;
background: transparent;
color: #ccefe7;
}
.search {
height: 132px;
font-size: 14px;
background-color: #f2f5f4;
position: relative;
}
.search .search_box {
position: absolute;
top: 30px;
left: 312px;
width: 935px;
height: 46px;
font-size: 14px;
background-color: #00b38a;
}
.search .search_box .search_f {
width: 794px;
height: 42px;
border: 1px solid #e8e8e8;
text-indent: 15px;
outline: none;
color: #757575;
}
.search .search_box .search_s {
margin-left: 52px;
color: #fff;
}
.search .searchList {
height: 38px;
line-height: 38px;
position: absolute;
top: 75px;
left: 312px;
font-size: 12px;
}
.search .searchList ul li {
float: left;
padding: 0 11px;
}
.search .searchList ul li a {
color: #00b38a;
}
.search .searchList ul li:first-child {
padding: 0;
}
.search .searchList ul li:first-child a{
color: #777777;
}
.banner {
height: 430px;
}
.banner .banner_left {
width: 300px;
height: 347px;
float: left;
}
.banner .banner_right {
width: 840px;
height: 347px;
background-color: brown;
float: right;
margin-top: 46px;
}
.banner .banner_left .banner_List {
margin-top: 46px;
}
.banner .banner_left .banner_List li {
margin-bottom: 24px
}
.banner .banner_left .banner_List li a {
font-size: 12px;
color: #333333;
padding: 0 13px;
}
.banner .banner_left .banner_List li a:first-child {
font-size: 17px;
padding: 0;
color:#555555;
}
.banner .banner_left .banner_List li span {
font-family: "宋体";
float: right;
margin-top: 5px;
}
.banner .banner_right .banner_right_box {
position: relative;
width: 840px;
height: 347px;
background: url("./img/banner.JPG") no-repeat;
background-size: 840px 347px;
}
.banner .banner_right .banner_right_box .span1 {
position: absolute;
top: 155px;
left: 20px;
width: 22px;
height: 34px;
font-size: 34px;
color: #757478;
font-family: "宋体";
font-weight: bold;
}
.banner .banner_right .banner_right_box .span2 {
position: absolute;
top: 155px;
right: 20px;
width: 22px;
height: 34px;
font-size: 34px;
color: #757478;
font-family: "宋体";
font-weight: bold;
}
.content .line1 {
margin-top: 20px;
}
.content .line1 .line1_top {
height: 118px;
}
.content .line1 .line1_top .top1 {
height: 53px;
line-height: 53px;
border-bottom: 1px solid #e8e8e8;
}
.content .line1 .line1_top .top1 .hot {
border-bottom: 2px solid #000;
padding-bottom: 15px;
margin-right: 60px;
color: #333;
}
.content .line1 .line1_top .top1 .new {
color: #999;
}
.content .line1 .line1_top .top2 {
height: 66px;
}
.content .line1 .line1_top .top2 span {
background-color: #e6e6e6;
color: #fff;
width: 18px;
height: 18px;
float: left;
margin-top: 24px;
text-align: center;
border-radius: 50%;
}
.content .line1 .line1_top .top2 a {
line-height: 66px;
font-size: 12px;
}
.content .line1 .line1_top .top2 .past {
margin-left: 13px;
color: #999999;
}
.content .line1 .line1_top .top2 .know {
margin-left: 56px;
color: #00b38a;
}
.content .line1 .line1_content {
width: 100%;
}
.content .line1 .line1_content li {
float: left;
margin-bottom: 15px;
margin-right: 13px;
}
.content .line1 .line1_content .special {
margin-right: 0;
}
.content .line1 .line1_content .special1 {
margin-bottom: 0;
}
.content .line1 .line1_content .f_box {
width: 355px;
padding: 24px 17px 16px;
border: 1px solid #eaeeed;
}
.content .line1 .line1_content .f_box .java {
font-size: 18px;
float: left;
margin-right: 8px;
}
.content .line1 .line1_content .f_box .time {
font-size: 18px;
float: left;
margin-right: 7px;
color: #999999;
}
.content .line1 .line1_content .f_box .picture {
float: left;
margin-top: 5px;
}
.content .line1 .line1_content .f_box .money {
float: right;
font-size: 12px;
margin-top: 5px;
color: #fa6041;
}
.content .line1 .line1_content .f_box .require span {
float: left;
margin-top: 12px;
font-size: 18px;
color: #9999b2
}
.content .line1 .line1_content .f_box .job .btn {
float: left;
font-size: 12px;
margin-top: 13px;
width: 71px;
height: 26px;
line-height: 26px;
text-align: center;
margin-right: 12px;
border-radius: 5px;
border: 1px solid #f0f0f0;
}
.content .line1 .line1_content .f_box .job {
border-bottom: 1px dashed #f0f0f0;
padding-bottom: 20px;
}
.content .line1 .line1_content .f_box .company {
margin-top: 20px;
font-size: 15px;
}
.content .line1 .line1_content .f_box .company img {
float: left;
display: block;
width: 40px;
height: 40px;
margin-right: 14px;
}
.content .line1 .line1_content .f_box .company .suzhou {
color: #555555
}
.content .line1 .line1_content .f_box .company .introduce {
color: #999999;
}
.content .line1 .line1_bottom {
width: 390px;
height: 43px;
margin: 0 auto;
margin-top: 15px;
text-align: center;
border: 1px solid #00b38a;
}
.content .line1 .line1_bottom .more {
line-height: 43px;
color: #00b38a;
}
.content .line2 {
margin-top: 70px;
}
.content .line1 .line1_top {
height: 118px;
}
.content .line2 .line2_top .top1 {
height: 53px;
line-height: 53px;
border-bottom: 1px solid #e8e8e8;
}
.content .line2 .line2_top .top1 .hot {
border-bottom: 2px solid #000;
padding-bottom: 15px;
margin-right: 60px;
color: #333;
}
.content .line2 .line2_top .top2 {
height: 66px;
}
.content .line2 .line2_top .top2 span {
background-color: #e6e6e6;
color: #fff;
width: 18px;
height: 18px;
float: left;
margin-top: 24px;
margin-right: 15px;
text-align: center;
border-radius: 50%;
}
.content .line2 .line2_top .top2 a {
line-height: 66px;
font-size: 12px;
color: #999;
}
.content .line2 .line2_top .top2 .know {
margin-left: 56px;
color: #00b38a;
}
.content .line2 .line2_content .s_box {
width: 259px;
padding: 20px 13px;
border: 1px solid #eeeeee;
}
.content .line2 .line2_content .s_box .btncon .picture {
display: block;
width: 80px;
height: 80px;
margin: 0 auto;
}
.content .line2 .line2_content .s_box .name {
margin-top: 17px;
height: 15px;
line-height: 15px;
text-align: center;
color: #333333;
font-size: 15px;
}
.content .line2 .line2_content .s_box .for {
margin-top: 12px;
height: 13px;
line-height: 13px;
text-align: center;
color: #999999;
font-size: 12px;
}
.content .line2 .line2_content .s_box .value {
margin-top: 15px;
height: 12px;
line-height: 12px;
text-align: center;
color: #555555;
font-size: 12px;
border-bottom: 1px dashed #f0f0f0;
padding-bottom: 18px;
}
.content .line2 .line2_content .s_box .pingjia {
margin-top: 17px;
float: left;
width: 76px;
text-align: center;
border-right: 1px solid #ededed;
}
.content .line2 .line2_content .s_box .pingjia .num {
color: #00b38a;
font-size: 11px;
}
.content .line2 .line2_content .s_box .pingjia .word {
font-size: 11px;
color: #999999;
}
.content .line2 .line2_content .s_box .online {
margin-top: 17px;
width: 89px;
border-right: 1px solid #ededed;
float: left;
text-align: center;
}
.content .line2 .line2_content .s_box .online .num {
color: #00b38a;
font-size: 11px;
}
.content .line2 .line2_content .s_box .online .word {
font-size: 11px;
color: #999999;
}
.content .line2 .line2_content .s_box .pass {
margin-top: 17px;
float: left;
width: 92px;
text-align: center;
}
.content .line2 .line2_content .s_box .pass .num {
color: #00b38a;
font-size: 11px;
}
.content .line2 .line2_content .s_box .pass .word {
font-size: 11px;
color: #999999;
}
.content .line2 .line2_content li {
float: left;
margin-right: 17px;
margin-bottom: 16px;
}
.content .line2 .line2_content .special {
margin-right: 0;
}
.content .line2 .line2_content .special1 {
margin-bottom: 0;
}
.content .line2 .line2_bottom {
width: 390px;
height: 43px;
margin: 0 auto;
margin-top: 15px;
text-align: center;
border: 1px solid #00b38a;
}
.content .line2 .line2_bottom .more {
line-height: 43px;
color: #00b38a;
}
.content .line3 {
margin-top: 70px;
}
.content .line3 .line3_top .top1 {
height: 53px;
line-height: 53px;
border-bottom: 1px solid #e8e8e8;
}
.content .line3 .line3_top .top1 .hot {
border-bottom: 2px solid #000;
padding-bottom: 15px;
margin-right: 60px;
color: #333;
}
.content .line3 .line3_top .top2 {
height: 66px;
}
.content .line3 .line3_top .top2 a {
line-height: 66px;
float: left;
margin-right: 18px;
font-size: 12px;
color: #555
}
.content .line3 .line3_top .top2 .right {
float: right;
line-height: 66px;
font-size: 12px;
color: #555;
}
.content .line3 .line3_top .top2 .jiantou {
float: right;
margin-top: 31px;
margin-left: 5px;
}
.footer {
margin-top: 64px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
}
.footer .footop {
height: 236px;
padding-top: 50px;
}
.footer .footop .appbox {
margin-right: 130px;
width: 314px;
height: 170px;
border-right: 1px solid #e8e8e8;
float: left;
}
.footer .footop .appbox .btnApp {
width: 180px;
height: 44px;
border: 1px solid #00b38a;
line-height: 44px;
margin-bottom: 17px;
}
.footer .footop .appbox .btnApp span {
float: left;
width: 15px;
height: 15px;
margin-left: 38px;
margin-top: 14px;
margin-right: 8px;
background: url("./img/sprite2.png") no-repeat;
}
.footer .footop .appbox .btnApp:nth-child(1) span{
background-position: -148px -220px;
}
.footer .footop .appbox .btnApp:nth-child(2) span {
background-position: -215px -54px;
}
.footer .footop .appbox .btntxt {
margin-top: 4px;
font-size: 12px;
color: #555;
}
.footer .footop .appbox .btntxt img {
display: inline-block;
margin-right: 5px;
}
.footer .footop .appbox .btntxt img:nth-child(2) {
margin-left: 28px;
}
.footer .footop dl {
margin-top: 0px;
float: left;
}
.footer .footop dl dd {
margin-bottom: 19px;
color: #555;
}
.footer .footop dl .first {
font-size: 17px;
margin-bottom: 37px;
color: #000;
}
.footer .footop .head {
font-size: 13px;
margin-right: 140px;
}
.footer .footop .center {
font-size: 13px;
}
.footer .footop .last {
float: right;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<div class="h_top">
<div class="h_top_con all">
<div class="conleft">
<div class="leftTxt">
<a class="logo" href="">拉钩</a>
<a class="city" href="">全国站</a>
<a class="switch" href="">[切换城市]</a>
</div>
<ul class="ulList clearFixed">
<li><a href="">首页</a></li>
<li><a href="">公司</a></li>
<li><a href="">校园</a></li>
<li><a href="">言职</a></li>
<li><a href="">课程</a></li>
</ul>
</div>
<div class="conright">
<ul class="ulList2">
<li><a href="" class="login btn"><span></span>登录</a></li>
<li><a href="" class="register"><span>|</span>注册</a></li>
<li><a href="" class="app btn"><span></span>拉钩APP</a></li>
<li><a href="" class="firm">进入企业版</a></li>
</ul>
</div>
</div>
</div>
<div class="h_bottom">
<div class="h_bottom_con all">
<div class="conLeft">
<div class="conLeft_f">
<img src="./img/footer_lagou.png" alt="">
</div>
<div class="conLeft_s">755585家公司|6247033个职位，在拉钩等你</div>
</div>
<div class="conRight">
<div class="conRight_box">
<input type="text" placeholder="输入手机号" class="number"/>
<p class="true">
<input type="text" placeholder="验证码" class="number2"/>
|
<a href="" class="get">获取</a>
</p>
<input type="submit" value="登录/注册" class="login"/>
</div>
</div>
</div>
</div>
</div>
<div class="search">
<div class="search_box">
<input type="text" placeholder="搜索职位、公司或地点" class="search_f"/>
<a href="" class="search_s">搜索</a>
</div>
<div class="searchList">
<ul>
<li><a href="">热门搜索 :</a></li>
<li><a href="">24小时急速入职</a></li>
<li><a href="">名企校招早班车</a></li>
<li><a href="">Java面试</a></li>
<li><a href="">架构设计</a></li>
<li><a href="">数据分析</a></li>
<li><a href="">PHP</a></li>
<li><a href="">C++</a></li>
</ul>
</div>
</div>
<div class="banner all">
<div class="banner_left">
<ul class="banner_List">
<li>
<a href="">技术</a>
<a href="">Java</a>
<a href="">PHP</a>
<a href="">C++</a>
<a href="">区块链</a>
<span>></span>
</li>
<li>
<a href="">产品</a>
<a href="">产品总监</a>
<a href="">产品经理</a>
<span>></span>
</li>
<li>
<a href="">设计</a>
<a href="">UI设计师</a>
<a href="">交互设计</a>
<a href="">网页设计师</a>
<span>></span>
</li>
<li>
<a href="">运营</a>
<a href="">新媒体运营</a>
<a href="">编辑</a>
<a href="">数据运营</a>
<span>></span>
</li>
<li>
<a href="">市场</a>
<a href="">市场营销</a>
<a href="">市场推广</a>
<a href="">市场策划</a>
<span>></span>
</li>
<li>
<a href="">销售</a>
<a href="">销售专员</a>
<a href="">销售经理</a>
<a href="">销售总监</a>
<span>></span>
</li>
<li>
<a href="">职能</a>
<a href="">HR</a>
<a href="">行政</a>
<a href="">财务</a>
<a href="">审计</a>
<span>></span>
</li>
<li>
<a href="">游戏</a>
<a href="">小游戏开发</a>
<a href="">U3D</a>
<a href="">游戏策划</a>
<span>></span>
</li>
</ul>
</div>
<div class="banner_right">
<div class="banner_right_box">
<span class="span1"><</span>
<span class="span2">></span>
</div>
</div>
</div>
<div class="content all">
<div class="line1">
<div class="line1_top">
<div class="top1">
<a href="" class="hot">24Hour热门</a>
<a href="" class="new">最新职位</a>
</div>
<div class="top2">
<span>?</span>
<a href="" class="past">过去24小时，最多人看过的岗位在这里</a>
<a href="" class="know">我知道了</a>
</div>
</div>
<ul class="line1_content clearFixed">
<li>
<div class="f_box">
<p class="work clearFixed">
<span class="java">java开发工程师</span>
<span class="time">[10:35发布]</span>
<img src="./img/icon_chat.png" alt="" class="picture">
<span class="money">10k-15k</span>
</p>
<p class="require clearFixed">
<span>经验5-10年/大专</span>
</p>
<p class="job clearFixed">
<span class="btn">电商</span>
<span class="btn">移动互联网</span>
</p>
<div class="company clearFixed">
<img src="./img/con2.png" alt=""/>
<p class="suzhou">苏州艾尼斯教育科技有限公司</p>
<p class="introduce">教育/未融资/苏州</p>
</div>
</div>
</li>
<li>
<div class="f_box">
<p class="work clearFixed">
<span class="java">php开发工程师</span>
<span class="time">[10:35发布]</span>
<img src="./img/icon_chat.png" alt="" class="picture">
<span class="money">10k-20k</span>
</p>
<p class="require clearFixed">
<span>经验3-5年/本科</span>
</p>
<p class="job clearFixed">
<span class="btn">PHP</span>
<span class="btn">MySQL</span>
</p>
<div class="company clearFixed">
<img src="./img/con2.png" alt=""/>
<p class="suzhou">超盟金服</p>
<p class="introduce">移动互联网/A轮/深圳</p>
</div>
</div>
</li>
<li class="special">
<div class="f_box">
<p class="work clearFixed">
<span class="java">java高级开发工程师</span>
<span class="time">[10:35发布]</span>
<img src="./img/icon_chat.png" alt="" class="picture">
<span class="money">20k-25k</span>
</p>
<p class="require clearFixed">
<span>经验5-10年/本科</span>
</p>
<p class="job clearFixed">
<span class="btn">社交</span>
<span class="btn">金融</span>
<span class="btn">分布式</span>
</p>
<div class="company clearFixed">
<img src="./img/con2.png" alt=""/>
<p class="suzhou">灵犀信息</p>
<p class="introduce">移动互联网，金融/不需要融资/广州</p>
</div>
</div>
</li>
<li>
<div class="f_box">
<p class="work clearFixed">
<span class="java">招聘专员</span>
<span class="time">[10:35发布]</span>
<img src="./img/icon_chat.png" alt="" class="picture">
<span class="money">12k-18k</span>
</p>
<p class="require clearFixed">
<span>经验3-5年/本科</span>
</p>
<p class="job clearFixed">
<span class="btn">招聘</span>
</p>
<div class="company clearFixed">
<img src="./img/con2.png" alt=""/>
<p class="suzhou">竹间智能科技(上海)有限公司</p>
<p class="introduce">移动互联网/B轮/上海</p>
</div>
</div>
</li>
<li>
<div class="f_box">
<p class="work clearFixed">
<span class="java">产品经理</span>
<span class="time">[10:35发布]</span>
<img src="./img/icon_chat.png" alt="" class="picture">
<span class="money">13k-21k</span>
</p>
<p class="require clearFixed">
<span>经验5-10年/大专</span>
</p>
<p class="job clearFixed">
<span class="btn">证券/期贷</span>
<span class="btn">互联网金融</span>
<span class="btn">产品设计</span>
</p>
<div class="company clearFixed">
<img src="./img/con2.png" alt=""/>
<p class="suzhou">点证</p>
<p class="introduce">移动互联网,金融/未融资/深圳</p>
</div>
</div>
</li>
<li class="special">
<div class="f_box">
<p class="work clearFixed">
<span class="java">设计师</span>
<span class="time">[10:34发布]</span>
<img src="./img/icon_chat.png" alt="" class="picture">
<span class="money">6k-8k</span>
</p>
<p class="require clearFixed">
<span>经验3-5年/大专</span>
</p>
<p class="job clearFixed">
<span class="btn">平面</span>
<span class="btn">视觉</span>
</p>
<div class="company clearFixed">
<img src="./img/con2.png" alt=""/>
<p class="suzhou">青木科技</p>
<p class="introduce">电商/未融资/广州</p>
</div>
</div>
</li>
<li class="special1">
<div class="f_box">
<p class="work clearFixed">
<span class="java">音频算法工程师</span>
<span class="time">[10:34发布]</span>
<img src="./img/icon_chat.png" alt="" class="picture">
<span class="money">20k-40k</span>
</p>
<p class="require clearFixed">
<span>经验3-5年/不限</span>
</p>
<p class="job clearFixed">
<span class="btn">社交</span>
<span class="btn">游戏</span>
</p>
<div class="company clearFixed">
<img src="./img/con2.png" alt=""/>
<p class="suzhou">假面设计</p>
<p class="introduce">社交/B轮/上海</p>
</div>
</div>
</li>
<li class="special1">
<div class="f_box">
<p class="work clearFixed">
<span class="java">前端工程师Team...</span>
<span class="time">[10:34发布]</span>
<img src="./img/icon_chat.png" alt="" class="picture">
<span class="money">35k-45k</span>
</p>
<p class="require clearFixed">
<span>经验3-5年/本科</span>
</p>
<p class="job clearFixed">
<span class="btn">新零售</span>
</p>
<div class="company clearFixed">
<img src="./img/con2.png" alt=""/>
<p class="suzhou">品览Pinlan</p>
<p class="introduce">数据服务,人工智能/A轮/上海</p>
</div>
</div>
</li>
<li class="special special1">
<div class="f_box">
<p class="work clearFixed">
<span class="java">管培生/储备干部</span>
<span class="time">[10:34发布]</span>
<img src="./img/icon_chat.png" alt="" class="picture">
<span class="money">8k-12k</span>
</p>
<p class="require clearFixed">
<span>经验不限/大专</span>
</p>
<p class="job clearFixed">
<span class="btn">理财顾问...</span>
<span class="btn">资产管理</span>
<span class="btn">商务渠道</span>
</p>
<div class="company clearFixed">
<img src="./img/con2.png" alt=""/>
<p class="suzhou">中国平安</p>
<p class="introduce">金融,医疗|健康/上市公司/广州</p>
</div>
</div>
</li>
</ul>
<div class="line1_bottom">
<a href="" class="more">查看更多</a>
</div>
</div>
<div class="line2">
<div class="line2_top">
<div class="top1">
<a href="" class="hot">互联网热门公司榜</a>
</div>
<div class="top2 clearFixed">
<span>?</span>
<a href="" class="past">互联网行业实力热门企业</a>
<a href="" class="know">我知道了</a>
</div>
</div>
<ul class="line2_content clearFixed">
<li>
<div class="s_box clearFixed">
<p class="btncon">
<img src="./img/con1.png" alt="" class="picture">
</p>
<p class="name">数据堂</p>
<p class="for">数据服务,消费生活</p>
<p class="value">发掘数据的价值，便利人们的生活，从...</p>
<p class="news ">
<div class="pingjia">
<p class="num">20</p>
<p class="word">面试评价</p>
</div>
<div class="online">
<p class="num">5</p>
<p class="word">在招职位</p>
</div>
<div class="pass">
<p class="num">100%</p>
<p class="word">简历处理率</p>
</div>
</p>
</div>
</li>
<li>
<div class="s_box clearFixed">
<p class="btncon">
<img src="./img/con1.png" alt="" class="picture">
</p>
<p class="name">兔展RABBITPRE</p>
<p class="for">移动互联网/B轮</p>
<p class="value">国内领先的大数据驱动的技术营销服务商</p>
<p class="news ">
<div class="pingjia">
<p class="num">200</p>
<p class="word">面试评价</p>
</div>
<div class="online">
<p class="num">30</p>
<p class="word">在招职位</p>
</div>
<div class="pass">
<p class="num">100%</p>
<p class="word">简历处理率</p>
</div>
</p>
</div>
</li>
<li>
<div class="s_box clearFixed">
<p class="btncon">
<img src="./img/con1.png" alt="" class="picture">
</p>
<p class="name">护家科技</p>
<p class="for">移动互联网,消费生活/B轮</p>
<p class="value">"护家科技" 是由 海归资深品牌策划、...</p>
<p class="news ">
<div class="pingjia">
<p class="num">4</p>
<p class="word">面试评价</p>
</div>
<div class="online">
<p class="num">10</p>
<p class="word">在招职位</p>
</div>
<div class="pass">
<p class="num">100%</p>
<p class="word">简历处理率</p>
</div>
</p>
</div>
</li>
<li class="special">
<div class="s_box clearFixed">
<p class="btncon">
<img src="./img/con1.png" alt="" class="picture">
</p>
<p class="name">健康有益</p>
<p class="for">移动互联网,医疗|健康/B轮</p>
<p class="value">中国领先的AI+健康医疗技术赋能平台</p>
<p class="news ">
<div class="pingjia">
<p class="num">129</p>
<p class="word">面试评价</p>
</div>
<div class="online">
<p class="num">15</p>
<p class="word">在招职位</p>
</div>
<div class="pass">
<p class="num">100%</p>
<p class="word">简历处理率</p>
</div>
</p>
</div>
</li>
<li class="special1">
<div class="s_box clearFixed">
<p class="btncon">
<img src="./img/con1.png" alt="" class="picture">
</p>
<p class="name">闪银奇异</p>
<p class="for">移动互联网,金融/D轮及以上</p>
<p class="value">国内首家是基于大数据和人工智能的个人...</p>
<p class="news ">
<div class="pingjia">
<p class="num">341</p>
<p class="word">面试评价</p>
</div>
<div class="online">
<p class="num">80</p>
<p class="word">在招职位</p>
</div>
<div class="pass">
<p class="num">100%</p>
<p class="word">简历处理率</p>
</div>
</p>
</div>
</li>
<li class="special1">
<div class="s_box clearFixed">
<p class="btncon">
<img src="./img/con1.png" alt="" class="picture">
</p>
<p class="name">Lespark</p>
<p class="for">移动互联网,社交/A轮</p>
<p class="value">团队靠谱执行力强、市场领先、潜力巨大</p>
<p class="news ">
<div class="pingjia">
<p class="num">66</p>
<p class="word">面试评价</p>
</div>
<div class="online">
<p class="num">7</p>
<p class="word">在招职位</p>
</div>
<div class="pass">
<p class="num">100%</p>
<p class="word">简历处理率</p>
</div>
</p>
</div>
</li>
<li class="special1">
<div class="s_box clearFixed">
<p class="btncon">
<img src="./img/con1.png" alt="" class="picture">
</p>
<p class="name">八斗科技</p>
<p class="for">移动互联网,数据服务/未融资</p>
<p class="value">团结，专业，责任，共生，我们一起动...</p>
<p class="news ">
<div class="pingjia">
<p class="num">131</p>
<p class="word">面试评价</p>
</div>
<div class="online">
<p class="num">7</p>
<p class="word">在招职位</p>
</div>
<div class="pass">
<p class="num">100%</p>
<p class="word">简历处理率</p>
</div>
</p>
</div>
</li>
<li class="special special1">
<div class="s_box clearFixed">
<p class="btncon">
<img src="./img/con1.png" alt="" class="picture">
</p>
<p class="name">车轮</p>
<p class="for">移动互联网/C轮</p>
<p class="value">车轮，让有车生活更美好！</p>
<p class="news ">
<div class="pingjia">
<p class="num">87</p>
<p class="word">面试评价</p>
</div>
<div class="online">
<p class="num">32</p>
<p class="word">在招职位</p>
</div>
<div class="pass">
<p class="num">100%</p>
<p class="word">简历处理率</p>
</div>
</p>
</div>
</li>
</ul>
<div class="line2_bottom">
<a href="" class="more">查看更多</a>
</div>
</div>
<div class="line3">
<div class="line3_top">
<div class="top1">
<a href="" class="hot">友情链接</a>
</div>
<div class="top2 clearFixed">
<a href="">拉勾网</a>
<a href="">教师网</a>
<a href="">招聘</a>
<a href="">app下载</a>
<a href="">求职网站</a>
<a href="">java课</a>
<a href="">架构课</a>
<a href="">招聘系统</a>
<a href="">中大网校</a>
<a href="">教师招聘</a>
<a href="">人人都是产品经理</a>
<a href="">新疆人才网</a>
<a href="">研究报告</a>
<a href="">互联网的一些事</a>
<p class="right">
展开
<img src="./img2/open.jpg" alt="" class="jiantou">
</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footop all">
<div class="appbox">
<p class="btnApp"><span></span>下载拉钩APP</p>
<p class="btnApp"><span></span>微信小程序</p>
<p class="btntxt">
<img src="./img2/icon-wechat.png" alt="">拉钩微信
<img src="./img2/icon-sina1.png" alt="">拉钩微博
</p>
</div>
<dl class="head">
<dd class="first">企业服务</dd>
<dd>招聘抢人宝典</dd>
<dd>公司搜索</dd>
<dd>拉钩APP</dd>
</dl>
<dl class="center">
<dd class="first">用户帮助</dd>
<dd>帮助中心</dd>
<dd>用户服务协议</dd>
<dd>隐私政策</dd>
<dd>在线提问</dd>
</dl>
<dl class="last">
<dd class="first">联系方式</dd>
<dd>服务热线：4006 2828 35 (9:00-18:00)</dd>
<dd>企业服务邮箱：cc@lagou.com</dd>
<dd>联系我们</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
效果图可自行复制到vscode进行查看
浙公网安备 33010602011771号