拉勾网主页面HTML+CSS布局代码，附精灵图
作者：互联网
commen.css+reset.css代码链接：链接: link.
style.css代码链接：链接: link.
精灵图：
HTML内容，文件名：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/commen.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- s=顶部 -->
<div class="header">
<div class="h_top">
<div class="ctr">
<div class="h_top_l clearfix fl">
<span class="logou greenColor fl">拉钩</span>
<span class="nation greenColor fl">全国站</span>
<span class="city fl">[切换城市]</span>
<ul class="ulLis fl">
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">公司</a></li>
<li><a href="javascript:;">校园</a></li>
<li><a href="javascript:;">言职</a></li>
<li><a href="javascript:;">课程</a></li>
</ul>
</div>
<div class="h_top_r fr">
<a href="javascript:;"> <span class="login_logo"></span> 登录</a>
<a href="javascript:;"> <span class="line"></span> 注册</a>
<a href="javascript:;" class="greenColor"> <span class="app"></span> 拉钩APP</a>
<a href="login.html">进入企业版</a>
</div>
</div>
</div>
<div class="h_bottom">
<div class="ctr clearfix">
<div class="bottom_l fl">
<span></span>
<div>
<span></span>
<p>755585家公司 | 6247033个职位，在拉钩等你</p>
</div>
</div>
<div class="bottom_r fr">
<div class="btn">
<input type="tel" placeholder="输入手机号" class="tel">
<p class="get">
<input type="text" placeholder="验证码" class="yanzheng">
<button class="greenColor">获取</button>
</p>
<input type="submit" value="登录/注册">
</div>
</div>
</div>
</div>
</div>
<!-- e=顶部 -->
<!-- s=搜索 -->
<div class="search">
<div class="search_main ctr">
<div class="search_main_input ctr">
<input type="text" placeholder="搜索职位、公司或地点">
<button>搜索</button>
<ul>
<li><a href="javascript:;">热门搜索：</a></li>
<li><a href="javascript:;">24小时极速入职</a></li>
<li><a href="javascript:;">名企校招早班车</a></li>
<li><a href="javascript:;">java面试</a></li>
<li><a href="javascript:;">架构设计</a></li>
<li><a href="javascript:;">数据分析</a></li>
<li><a href="javascript:;">PHP</a></li>
<li><a href="javascript:;">C++</a></li>
</ul>
</div>
</div>
</div>
<!-- e=搜索 -->
<!-- s=轮播 -->
<div class="lunbo">
<div class="lunbo_main ctr clearfix">
<div class="lunbo_main_l fl">
<ul>
<li>
<b>技术</b>
<a href="javascript:;">Java</a>
<a href="javascript:;">PHP</a>
<a href="javascript:;">C++</a>
<a href="javascript:;">区块链</a>
<span>></span>
</li>
<li>
<b>技术</b>
<a href="javascript:;">Java</a>
<a href="javascript:;">PHP</a>
<a href="javascript:;">C++</a>
<a href="javascript:;">区块链</a>
<span>></span>
</li>
<li>
<b>技术</b>
<a href="javascript:;">Java</a>
<a href="javascript:;">PHP</a>
<a href="javascript:;">C++</a>
<a href="javascript:;">区块链</a>
<span>></span>
</li>
<li>
<b>技术</b>
<a href="javascript:;">Java</a>
<a href="javascript:;">PHP</a>
<a href="javascript:;">C++</a>
<a href="javascript:;">区块链</a>
<span>></span>
</li>
<li>
<b>技术</b>
<a href="javascript:;">Java</a>
<a href="javascript:;">PHP</a>
<a href="javascript:;">C++</a>
<a href="javascript:;">区块链</a>
<span>></span>
</li>
<li>
<b>技术</b>
<a href="javascript:;">Java</a>
<a href="javascript:;">PHP</a>
<a href="javascript:;">C++</a>
<a href="javascript:;">区块链</a>
<span>></span>
</li>
<li>
<b>技术</b>
<a href="javascript:;">Java</a>
<a href="javascript:;">PHP</a>
<a href="javascript:;">C++</a>
<a href="javascript:;">区块链</a>
<span>></span>
</li>
<li>
<b>技术</b>
<a href="javascript:;">Java</a>
<a href="javascript:;">PHP</a>
<a href="javascript:;">C++</a>
<a href="javascript:;">区块链</a>
<span>></span>
</li>
</ul>
</div>
<div class="lunbo_main_r fr">
<div class="lunbo_main_r_cont">
<img src="mainimg/banner.JPG" alt="">
</div>
<span><</span>
<span>></span>
</div>
</div>
</div>
<!-- e=轮播 -->
<!-- s=信息发布内容 -->
<div class="cont ctr">
<section class="one">
<div class="banner">
<span>24Hour热门</span>
<span>最新职位</span>
</div>
<div class="tixing clearfix">
<span class="fl"></span>
<p class="fl">过去24小时，最多人看过的岗位在这里</p>
<p class="fl greenColor">我知道了</p>
</div>
<ul class="ulLis clearfix">
<li>
<div class="infor">
<div class="infor_top">
<div class="infor_top_info">
<div class="someinfo">
<p>java开发工程师</p>
<p>[10:35发布]</p>
<img src="mainimg/icon_chat.png" alt="">
<p>10k-15k</p>
</div>
<p>经验5-10年/大专</p>
</div>
<div class="infor_top_btn">
<button>电商</button>
<button>移动互联网</button>
</div>
</div>
<div class="infor_botton">
<span></span>
<div>
<p>苏州艾尼斯教育科技有限公司</p>
<p>教育/未融资/苏州</p>
</div>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<div class="infor_top_info">
<div class="someinfo">
<p>java开发工程师</p>
<p>[10:35发布]</p>
<img src="mainimg/icon_chat.png" alt="">
<p>10k-15k</p>
</div>
<p>经验5-10年/大专</p>
</div>
<div class="infor_top_btn">
<button>电商</button>
<button>移动互联网</button>
</div>
</div>
<div class="infor_botton">
<span></span>
<div>
<p>苏州艾尼斯教育科技有限公司</p>
<p>教育/未融资/苏州</p>
</div>
</div>
</div>
</li>
<li class="nomarginr">
<div class="infor">
<div class="infor_top">
<div class="infor_top_info">
<div class="someinfo">
<p>java开发工程师</p>
<p>[10:35发布]</p>
<img src="mainimg/icon_chat.png" alt="">
<p>10k-15k</p>
</div>
<p>经验5-10年/大专</p>
</div>
<div class="infor_top_btn">
<button>电商</button>
<button>移动互联网</button>
</div>
</div>
<div class="infor_botton">
<span></span>
<div>
<p>苏州艾尼斯教育科技有限公司</p>
<p>教育/未融资/苏州</p>
</div>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<div class="infor_top_info">
<div class="someinfo">
<p>java开发工程师</p>
<p>[10:35发布]</p>
<img src="mainimg/icon_chat.png" alt="">
<p>10k-15k</p>
</div>
<p>经验5-10年/大专</p>
</div>
<div class="infor_top_btn">
<button>电商</button>
<button>移动互联网</button>
</div>
</div>
<div class="infor_botton">
<span></span>
<div>
<p>苏州艾尼斯教育科技有限公司</p>
<p>教育/未融资/苏州</p>
</div>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<div class="infor_top_info">
<div class="someinfo">
<p>java开发工程师</p>
<p>[10:35发布]</p>
<img src="mainimg/icon_chat.png" alt="">
<p>10k-15k</p>
</div>
<p>经验5-10年/大专</p>
</div>
<div class="infor_top_btn">
<button>电商</button>
<button>移动互联网</button>
</div>
</div>
<div class="infor_botton">
<span></span>
<div>
<p>苏州艾尼斯教育科技有限公司</p>
<p>教育/未融资/苏州</p>
</div>
</div>
</div>
</li>
<li class="nomarginr">
<div class="infor">
<div class="infor_top">
<div class="infor_top_info">
<div class="someinfo">
<p>java开发工程师</p>
<p>[10:35发布]</p>
<img src="mainimg/icon_chat.png" alt="">
<p>10k-15k</p>
</div>
<p>经验5-10年/大专</p>
</div>
<div class="infor_top_btn">
<button>电商</button>
<button>移动互联网</button>
</div>
</div>
<div class="infor_botton">
<span></span>
<div>
<p>苏州艾尼斯教育科技有限公司</p>
<p>教育/未融资/苏州</p>
</div>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<div class="infor_top_info">
<div class="someinfo">
<p>java开发工程师</p>
<p>[10:35发布]</p>
<img src="mainimg/icon_chat.png" alt="">
<p>10k-15k</p>
</div>
<p>经验5-10年/大专</p>
</div>
<div class="infor_top_btn">
<button>电商</button>
<button>移动互联网</button>
</div>
</div>
<div class="infor_botton">
<span></span>
<div>
<p>苏州艾尼斯教育科技有限公司</p>
<p>教育/未融资/苏州</p>
</div>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<div class="infor_top_info">
<div class="someinfo">
<p>java开发工程师</p>
<p>[10:35发布]</p>
<img src="mainimg/icon_chat.png" alt="">
<p>10k-15k</p>
</div>
<p>经验5-10年/大专</p>
</div>
<div class="infor_top_btn">
<button>电商</button>
<button>移动互联网</button>
</div>
</div>
<div class="infor_botton">
<span></span>
<div>
<p>苏州艾尼斯教育科技有限公司</p>
<p>教育/未融资/苏州</p>
</div>
</div>
</div>
</li>
<li class="nomarginr">
<div class="infor">
<div class="infor_top">
<div class="infor_top_info">
<div class="someinfo">
<p>java开发工程师</p>
<p>[10:35发布]</p>
<img src="mainimg/icon_chat.png" alt="">
<p>10k-15k</p>
</div>
<p>经验5-10年/大专</p>
</div>
<div class="infor_top_btn">
<button>电商</button>
<button>移动互联网</button>
</div>
</div>
<div class="infor_botton">
<span></span>
<div>
<p>苏州艾尼斯教育科技有限公司</p>
<p>教育/未融资/苏州</p>
</div>
</div>
</div>
</li>
</ul>
<button class="greenColor">查看更多</button>
</section>
<section class="one">
<div class="banner">
<span>互联网热门公司榜</span>
</div>
<div class="tixing clearfix">
<span class="fl"></span>
<p class="fl">互联网行业实力热门企业</p>
<p class="fl greenColor">我知道了</p>
</div>
<ul class="clearfix ulLiss">
<li>
<div class="infor">
<div class="infor_top">
<img src="mainimg/maotouy.png" alt="">
<div>
<p>数据堂</p>
<p>数据服务，消费生活/B轮</p>
<p>发掘数据的价值，便利人们的生活，从...</p>
</div>
</div>
<div class="infor_botton">
<span>
<p class="greenColor">20</p>
<p>面试评价</p>
</span>
<span>
<p class="greenColor">5</p>
<p>在招职位</p>
</span>
<span>
<p class="greenColor">100%</p>
<p>简历处理率</p>
</span>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<img src="mainimg/maotouy.png" alt="">
<div>
<p>数据堂</p>
<p>数据服务，消费生活/B轮</p>
<p>发掘数据的价值，便利人们的生活，从...</p>
</div>
</div>
<div class="infor_botton">
<span>
<p class="greenColor">20</p>
<p>面试评价</p>
</span>
<span>
<p class="greenColor">5</p>
<p>在招职位</p>
</span>
<span>
<p class="greenColor">100%</p>
<p>简历处理率</p>
</span>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<img src="mainimg/maotouy.png" alt="">
<div>
<p>数据堂</p>
<p>数据服务，消费生活/B轮</p>
<p>发掘数据的价值，便利人们的生活，从...</p>
</div>
</div>
<div class="infor_botton">
<span>
<p class="greenColor">20</p>
<p>面试评价</p>
</span>
<span>
<p class="greenColor">5</p>
<p>在招职位</p>
</span>
<span>
<p class="greenColor">100%</p>
<p>简历处理率</p>
</span>
</div>
</div>
</li>
<li class="nomarginr">
<div class="infor">
<div class="infor_top">
<img src="mainimg/maotouy.png" alt="">
<div>
<p>数据堂</p>
<p>数据服务，消费生活/B轮</p>
<p>发掘数据的价值，便利人们的生活，从...</p>
</div>
</div>
<div class="infor_botton">
<span>
<p class="greenColor">20</p>
<p>面试评价</p>
</span>
<span>
<p class="greenColor">5</p>
<p>在招职位</p>
</span>
<span>
<p class="greenColor">100%</p>
<p>简历处理率</p>
</span>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<img src="mainimg/maotouy.png" alt="">
<div>
<p>数据堂</p>
<p>数据服务，消费生活/B轮</p>
<p>发掘数据的价值，便利人们的生活，从...</p>
</div>
</div>
<div class="infor_botton">
<span>
<p class="greenColor">20</p>
<p>面试评价</p>
</span>
<span>
<p class="greenColor">5</p>
<p>在招职位</p>
</span>
<span>
<p class="greenColor">100%</p>
<p>简历处理率</p>
</span>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<img src="mainimg/maotouy.png" alt="">
<div>
<p>数据堂</p>
<p>数据服务，消费生活/B轮</p>
<p>发掘数据的价值，便利人们的生活，从...</p>
</div>
</div>
<div class="infor_botton">
<span>
<p class="greenColor">20</p>
<p>面试评价</p>
</span>
<span>
<p class="greenColor">5</p>
<p>在招职位</p>
</span>
<span>
<p class="greenColor">100%</p>
<p>简历处理率</p>
</span>
</div>
</div>
</li>
<li>
<div class="infor">
<div class="infor_top">
<img src="mainimg/maotouy.png" alt="">
<div>
<p>数据堂</p>
<p>数据服务，消费生活/B轮</p>
<p>发掘数据的价值，便利人们的生活，从...</p>
</div>
</div>
<div class="infor_botton">
<span>
<p class="greenColor">20</p>
<p>面试评价</p>
</span>
<span>
<p class="greenColor">5</p>
<p>在招职位</p>
</span>
<span>
<p class="greenColor">100%</p>
<p>简历处理率</p>
</span>
</div>
</div>
</li>
<li class="nomarginr">
<div class="infor">
<div class="infor_top">
<img src="mainimg/maotouy.png" alt="">
<div>
<p>数据堂</p>
<p>数据服务，消费生活/B轮</p>
<p>发掘数据的价值，便利人们的生活，从...</p>
</div>
</div>
<div class="infor_botton">
<span>
<p class="greenColor">20</p>
<p>面试评价</p>
</span>
<span>
<p class="greenColor">5</p>
<p>在招职位</p>
</span>
<span>
<p class="greenColor">100%</p>
<p>简历处理率</p>
</span>
</div>
</div>
</li>
</ul>
<button class="greenColor">查看更多</button>
</section>
</div>
<!-- e=信息发布内容 -->
<!-- s=友情链接 -->
<div class="friendly ctr">
<div class="banner">
<span>友情链接</span>
</div>
<ul class="clearfix">
<li><a href="javascript:;">拉勾网</a></li>
<li><a href="javascript:;">教师网</a></li>
<li><a href="javascript:;">招聘</a></li>
<li><a href="javascript:;">app下载</a></li>
<li><a href="javascript:;">求职网站</a></li>
<li><a href="javascript:;">java课</a></li>
<li><a href="javascript:;">架构课</a></li>
<li><a href="javascript:;">招聘系统</a></li>
<li><a href="javascript:;">中大网校</a></li>
<li><a href="javascript:;">教师招聘</a></li>
<li><a href="javascript:;">人人都是产品经理</a></li>
<li><a href="javascript:;">新疆人才网</a></li>
<li><a href="javascript:;">研究报告</a></li>
<li><a href="javascript:;">互联网的一些事</a></li>
<li>
<section>展开</section>
</li>
</ul>
</div>
<!-- e=友情链接 -->
<!-- s=底部信息 -->
<div class="footer_top">
<div class="footer ctr clearfix">
<div class="footer_l fl">
<button class="greenColor"><span></span>下载拉勾APP</button>
<button class="greenColor"><span></span>微信小程序</button>
<div>
<p><span></span>拉勾微信</p>
<p><span></span>拉勾微博</p>
</div>
</div>
<div class="footer_r fr">
<dl>
<dt>企业服务</dt>
<dd>招聘抢人宝典</dd>
<dd>公司搜索</dd>
<dd>拉勾APP</dd>
</dl>
<dl>
<dt>用户帮助</dt>
<dd>帮助中心</dd>
<dd>用户服务协议</dd>
<dd>隐私政策</dd>
<dd>在线提问</dd>
</dl>
<dl>
<dt>联系方式</dt>
<dd>服务热线：4006 2828 35(9:00-18:00)</dd>
<dd>企业服务邮箱：cc@lagou.com</dd>
<dd>联系我们</dd>
</dl>
</div>
</div>
</div>
<!-- e=底部信息 -->
<!-- s=版权信息 -->
<div class="footer_info">
<div class="ctr">
<p>©2018 拉勾网 京ICP备14023790号-2</p>
<p><span></span>京公网安备 11010802024043号</p>
<div>
<span class="fl"></span>
<div class="jubao">
<p>违法和不良信息举报</p>
<p>电话：4006 2828 35</p>
<p>邮箱：cc@lagou.com</p>
</div>
</div>
<img src="mainimg/footer_lagou.png" alt="" class="fr">
</div>
</div>
<!-- e=版权信息 -->
</body>
</html>
```
标签：10,gt,java,拉勾,网主,35,苏州,HTML,电商 来源： https://blog.csdn.net/qq_45488467/article/details/111395753