仿写赶集网主页

前言编写过程效果展示贴一下代码css（共1296行）html（共1565行）JavaScript（共222行） 本博客其他文章推荐

前言

  本人以贫薄的前端知识，使用原生js、css、html历时两天半，无框架的仿写了赶集网主页，总共写了1296行css，1565行html和222行原生js，自认为相似度可达八成，不过因知识薄弱，所以代码的复用性不是很好，css样式重复也很高，不再多言了，围观一下这个过程吧！

编写过程

  由于是仿写“赶集网”的主页，所以不需要设计，但是我从主页上找到的图片全是合成的（数张图片放在一起的），所以用ps稍微的裁剪，扣一下背景，这个过程是在编写的途中进行的，即用到哪些图片，就去处理哪些。   然后就是疯狂的撸代码！！！

效果展示

先看一下原版 再看一下本人写的 这里由于要求上传的文件大小不大于5m，所以动图展示尽显仓促，抱歉！

贴一下代码

往下很长，有兴趣的朋友可以看一下，无兴趣的童鞋请点击此浏览本博客其他文章

css（共1296行）

*{padding: 0;margin: 0;} body{ width: 100vw; height: 100vh; background: #F5F5F5; min-width: 1198px; display: flex; justify-content: center; } a{ text-decoration: none; } ul{ list-style: none; } span.hr{ color: #f5f5f5; margin: 0px 0px 5px 5px; } span.small-title{ color: #999999; font-size: 12px; } /** * 头部导航 */ div.header{ width: 100vw; height: 33px; min-width: 1198px; background: #FFFFFF; display: flex; justify-content: center; border: solid 1px #dfe6e9; border-top: 0px; } div.header-body{ position: absolute; width: 78vw; min-width: 1198px; height: 33px; font-size: 12px; display: flex; align-items: center; z-index: 10; border: solid 1px #dfe6e9; border-left: 0px; border-right: 0px; } div.city,div.weather{ float: left; } div.city span:nth-child(1) a{ color: #FF7234; font-weight: bold; } div.city span:nth-child(2) a{ padding-left: 0; color: #636e72; } div.city span:hover a{ color: #FF7234; text-decoration: underline; } div.weather{ margin-left: 10px; padding-left: 10px; padding-right: 10px; height: 33px; display: flex; justify-content: center; align-items:center; cursor: pointer; } div.weather span{ margin-left: 10px; color: #636e72; font-size: 13px; } div.weather-hover-box{ position: absolute; top: 33px; left: 93.5px; width: 510px; height: 240px; background: #FFFFFF; border: solid 1px #dfe6e9; z-index: 1; display: none; } div.weather-hover-box-header{ height: 25px; } div.weather-hover-box-header span:nth-child(1){ position: absolute; font-size: 12px; color: #999999; top: 17px; } div.weather-hover-box-header span:nth-child(2){ position: absolute; font-size: 14px; color: #39bc30; top: 15px; left: 109px; } div.weather-hover-box-header a{ position: absolute; font-size: 12px; color: #ff7200; top: 17px; right: 10px; } div.weather-hover-box-header a:hover{ text-decoration: underline; } div.weather-hover-box-body{ height: calc(100% - 25px); } div.weather-hover-box-body ul.t{ margin-top: 30px; display: grid; grid-template: 1fr/repeat(3,1fr); justify-items: center; text-align: center; color: #666666; } div.weather-hover-box-body ul.t li{ width: 100%; border-right: solid 1px #dfe6e9; } div.weather-hover-box-body ul.t li:nth-child(3){ border-right: 0px; } div.weather:hover{ border: solid 1px #dfe6e9; border-top: 0px; } div.weather:hover div.weather-hover-box{ display: block; } div.info { position: absolute; display: flex; align-items: center; right: 0px; } div.info div.info-el{ float: left; width: 80px; text-align: center; line-height: 33px; cursor: pointer; } div.info div.info-el a{ color: #636e72; } div.info div.info-el a:hover{ color: #FF7234; text-decoration: underline; } div.info div.info-el ul.t:hover{ border-style: solid; border-width: 1px; border-color: #dfe6e9; border-top: 0px; } div.info div.info-el ul.t:hover li{ display: block; } div.info-user{ height: 33px; } div.info-user ul.t li{ height: 25px; background: #FFFFFF; line-height: 25px; display: none; } div.info-user ul.t li:hover{ background: #F5F5F5; } div.info-nav:hover ul.t{ border-style: solid; border-width: 1px; border-color: #dfe6e9; border-top: 0px; } div.info-nav:hover div.info-nav-down{ display: block; } a.lpx{ margin-left: 8px; } div.info-nav-down{ position: absolute; display: none; top: 33px; right: 0px; width: 78vw; height: 160px; min-width: 1198px; background-color: #FFFFFF; border-style: solid; border-width: 1px; border-color: #dfe6e9; border-top: 0px; padding: 20px 15px; } span.hot{ position: absolute; top: 10px; left: 50px; background: url(../images/hot_back.png) no-repeat; width: 16px; height: 18px; color: #FFFFFF; font-size: 10px; line-height: 16px; padding-left: 3px; padding-right: 3px; } div.info-nav-down-left{ float: left; width: calc(100% - 273px); height: 100%; } div.info-nav-down-left ul.lb{ width: 100%; height: 100%; text-align: left; } div.info-nav-down-left ul.lb li{ width: 90px; height: 100%; } div.info-nav-down-left ul.lb li a{ display: inline-block; } div.info-nav-down-left ul.lb li a.lh{ color: #39BC30; font-size: 14px; font-weight: bold; margin-bottom: 10px; margin-left: 8px; margin-right: 8px; } div.info-nav-down-left ul.lb li a.lh:hover{ text-decoration: underline; } div.info-nav-down-left ul.lb li a.lp{ color: #666; font-size: 12px; margin-bottom: 0px; margin-left: 8px; margin-right: 8px; } div.info-nav-down-left ul.lb li a.lp:hover{ text-decoration: underline; color: #FF7234; } div.info-nav-down-left ul.lb li:nth-child(9){ width: 145px; height: 100%; } div.info-nav-down-left ul.lb li{ float: left; } div.info-nav-down-right{ float: right; width: 273px; height: 100%; text-align: center; } div.info-nav-down-right p.h{ font-size: 14px; color: #666; font-weight: bold; } div.info-nav-down-right ul.b{ display: grid; grid-template:1fr/repeat(3,1fr); margin-top: 15px; } div.info-nav-down-right ul:hover{ border: none; } div.info-nav-down-right ul.b p{ font-size: 12px; color: #666; line-height: 5px; } /** * body部分 */ div.body{ position: absolute; width: 78vw; min-width: 1198px; } div.search-box{ position: absolute; background: #FFFFFF; top: 33px; width: 100%; height: 100px; } div.search-box img.logo{ position: absolute; top: 15px; left: 20px; width: 280px; height: 70px; } form.search{ position: absolute; top: 0px; left: 300px; width: calc(100% - 530px); height: 100%; display: flex; justify-content: center; align-items: center; } form.search div.input{ position: absolute; left: 0; width: calc(100% - 10px); height: 40px; border-style: solid; border-color: #4DC245; border-width: 3px; float: left; display: flex; align-items: center; } form.search img.search-ico{ width: 30px; display: flex; align-self: center; float: left; } input.search-input{ width: calc(100% - 150px); height: 40px; border: none; float: right; font-size: 14px; } input.search-button{ position: absolute; right: 0; width: 120px; height: 46px; background: #4DC245; color: #FFFFFF; font-size: 15px; border-width: 0; cursor: pointer; } ul.search-links{ position: absolute; width: 480px; bottom: 5px; left: 0; } ul.search-links a{ color: #636e72; font-size: 12px; } ul.search-links a:hover{ color: #FF7234; text-decoration: underline; } ul.search-links a:nth-child(3){ color: #FF8726; } div.search-fixed{ position: fixed; top: 0px; left: 0px; width: 100vw; height: 50px; background: #45C03C; opacity: 0.94; z-index: 11; display: none; justify-content: center; } div.search-fixed div.search-fixed-body{ width: 78vw; height: 50px; min-width: 1198px; display: flex; align-items: center; } div.search-fixed-form{ position: relative; float: left; width: 700px; height: 33px; margin-left: 26px; background: #FFFFFF; display: flex; align-items: center; } div.search-fixed-form input:nth-child(2){ width: 600px; height: 33px; border: none; font-size: 14px; } div.search-fixed-form input:nth-child(3){ width: 100px; height: 33px; border: none; background: #14910a; color: #FFFFFF; font-size: 16px; } div.search-fixed-bdiv{ width: calc(100% - 813px); height: 33px; } div.search-fixed-bdiv button.search-fixed-button{ float: right; width: 130px; height: 32px; color: #45C03C; background: #FFFFFF; font-size: 16px; border: none; } div.free-input{ width: 230px; height: 100%; float: right; display: flex; justify-content: center; align-items: center; } div.free-input-button button{ width: 140px; height: 46px; border: none; background: #FF8726; font-size: 15px; color: #FFFFFF; cursor: pointer; } div.free-input a{ position: absolute; bottom: 5px; color: #636e72; font-size: 12px; } div.free-input a:hover{ color: #FF7234; text-decoration: underline; } div.body-right{ width: 330px; height: auto !important; min-height: 900px; float: right; margin-bottom: 10px; } div.body-left{ width: calc(100% - 330px); height: auto !important; min-height: 900px; float: left; } div.body-left-el1{ position: absolute; top: 142px; width: calc(100% - 335px); height: 130px; background: #FFFFFF; display: grid; grid-template:1fr/repeat(7,1fr); justify-items:center; align-items: center; } div.body-left-el1 div{ text-align: center; } div.body-left-el1 div div{ cursor: pointer; } div.body-left-el1 div div h4{ text-align: center; color: #2f3640; margin-bottom: 10px; } div.el1-box{ width: 100px; height: 48px; background: #F5F5F5; border-radius: 5px; margin-bottom: 10px; } div.el1-box img{ margin-top: 8px; height: 40px; width: 50px; } div.body-left-el1 div div:hover h4{ color: #FF8726; } div.body-left-el1 div div:hover div.el1-box.c1{ background: #FFF5E8; } div.body-left-el1 div div:hover div.el1-box.c2{ background: #E8FFEC; } div.body-left-el1 div div:hover div.el1-box.c3{ background: #EAF8FF; } div.body-left-el1 div div:hover div.el1-box img{ margin-top: 4px; height: 44px; } div.body-left-el1 div span{ background: #EAF4F9; padding: 0px 6px; margin: 0px 3px; border-radius: 15px; } div.body-left-el1 div span:hover{ background: #39BC30; } div.body-left-el1 div span a{ color: #666666; font-size: 12px; } div.body-left-el1 div span:hover a{ color: #FFFFFF; } div.body-left-el2{ position: absolute; top: 280px; width: 235px; height: 310px; background: #FFFFFF; } div.el-body{ margin: 0px 0px 13px 13px; } div.el-body p.float-left{ float: left; } div.el-body p{ margin-top: 10px; } div.el-body p.single-pic{ width: 62px; text-align: center; } div.el-body p a{ font-size: 14px; color: #0481E4; } div.el-body p a:hover{ color: #FF7200; text-decoration: underline; } div.el-body.long-pic{ margin-left: 5px; margin-top: 8px; width: 620px; transition-duration: 0.5s; } div.download-app{ height: 60px; font-size: 14px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #39BC30; } div.download-app div{ display: flex; justify-content: center; align-items: center; } div.download-app:hover{ color: #FFFFFF; background: #39BC30; } div.body-left-el3{ position: absolute; top: 280px; left: 245px; width: calc(100% - 245px - 335px); height: 900px; background: #FFFFFF; } div.el-top a:hover{ color: #FF7200; text-decoration: underline; } div.body-left-el4{ position: absolute; top: 600px; width: 235px; height: 410px; background: #FFFFFF; } div.body-left-el5{ position: absolute; top: 1020px; width: 235px; height: 220px; background: #FFFFFF; } div.body-left-el6{ position: absolute; top: 1190px; left: 245px; width: calc(100% - 245px - 335px); height: 530px; background: #FFFFFF; } div.body-left-el7{ position: absolute; top: 1250px; width: 235px; height: 220px; background: #FFFFFF; } div.body-left-el8{ position: absolute; top: 1480px; width: 235px; height: 470px; background: #FFFFFF; } div.body-left-el9{ position: absolute; top: 1730px; left: 245px; width: 330px; height: 220px; background: #FFFFFF; } div.body-left-el10{ position: absolute; top: 1730px; left: 585px; width: calc(100% - 920px); height: 220px; background: #FFFFFF; } div.body-right-el1{ position: absolute; top: 142px; right: 0; width: 325px; height: 130px; background: #FFFFFF; overflow: hidden; cursor: pointer; } div.el-top{ height: 50px; line-height: 50px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ecf0f1; } div.el-top a:nth-child(1){ margin-left: 13px; float: left; font-size: 16px; color: #333333; font-weight: bold; } div.el-top a:nth-child(2){ margin-right: 13px; float: right; font-size: 12px; color: #FF7200; font-weight: bold; } div.el-top a:hover{ color: #FF7200; text-decoration: underline; } div.r-el1-top{ display: flex; justify-content: center; align-items: center; color: #39BC30; background: #F8FCF4; height: 40px; } p.el3-h.float-left{ float: left; } p.el3-h.float-right{ float: right; } p.el3-h a:nth-child(1){ font-size: 16px; color: #333333; font-weight: bold; } p.el3-h a:nth-child(2){ font-size: 12px; color: #FF7200; font-weight: bold; } p.el3-h a:hover{ color: #FF7200; text-decoration: underline; } div.body-right-el1:hover div.r-el1-top{ background: #39BC30; color: #F8FCF4; } div.body-right-el1:hover span{ display: flex; } div.r-el1-scroll{ width: 1240px; height: calc(100% - 40px); display: flex; justify-content: center; align-items: center; animation: r-el-scroll 4s infinite; animation-timing-function: cubic-bezier(0,1.22,.1,.97); } div.body-right-el1:hover div.r-el1-scroll{ animation-play-state: paused; } @keyframes r-el-scroll{ 50%{ transform: translateX(-300px); } 100%{ transform: translateX(-600px); } } span.pre,span.next{ position: absolute; display: flex; justify-content: center; align-items: center; bottom: 30px; height: 30px; width: 15px; background: #636e72; opacity: .5; cursor: pointer; display: none; } span.pre{ left: 0; } span.next{ right: 0; } span.pre:hover,span.next:hover{ background: #39BC30; opacity: 1; } div.r-el1-scroll div{ width: 300px; } div.r-el1-scroll div div:nth-child(1){ height: 100%; float: left; width: 50px; } div.r-el1-scroll div div:nth-child(2){ height: 100%; float: right; width: calc(100% - 90px); } div.r-el1-scroll div div:nth-child(1) img{ height: 44px; border-right-style: solid; border-right-color: #ecf0f1; border-right-width: 1px; margin: 2px 16px 0px 0px; padding: 0px 14px 0px 16px; } div.r-el1-scroll div div:nth-child(2) p{ height: 29px; display: flex; align-items: center; } div.r-el1-scroll div div:nth-child(2) img{ height: 29px; margin-right: 5px; } div.r-el1-scroll div div:nth-child(2) span{ font-size: 12px; color: #FF7200; } div.r-el1-scroll div div:nth-child(2) p:nth-child(2){ font-size: 14px; color: #161616; margin-top: 2px; margin-bottom: 2px; } div.r-el-top{ height: 50px; line-height: 50px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ecf0f1; } div.r-el-top a{ margin-left: 13px; float: left; font-size: 16px; color: #333333; font-weight: bold; } div.r-el-top a:hover{ color: #FF7200; text-decoration: underline; } div.r-el-top a.no-change:hover{ color: #333333; text-decoration: none; } div.body-right-el2{ position: absolute; top: 280px; right: 0; width: 325px; height: 160px; background: #FFFFFF; overflow: hidden; cursor: pointer; } div.body-right-el2 span.nohover:hover{ background: #636e72; opacity: .5; } ul.page{ float: right; margin-right: 15px; } ul.page li.page-item{ float: left; margin-left: 5px; width: 8px; } div.body-right-el2:hover span{ display: flex; } div.body-right-el3{ position: absolute; top: 450px; right: 0; width: 325px; height: 870px; background: #FFFFFF; } div.body-right-el4{ position: absolute; top: 1330px; right: 0; width: 325px; height: 280px; background: #FFFFFF; } div.body-right-el5{ position: absolute; top: 1620px; right: 0; width: 325px; height: 330px; background: #FFFFFF; } div.footer{ position: absolute; top: 1960px; width: 100vw; min-width: 1198px; display: flex; justify-content: center; height: 530px; } div.footer-el1{ position: absolute; width: 78vw; min-width: 1198px; height: 230px; background: #FFFFFF; } div.footer-el1 div.r-el-top a, div.footer-el1-body ul{ margin-left: 13px; margin-right: 13px; } div.footer-el1 div.r-el-top a:nth-child(1), div.footer-el1-body ul:nth-child(1){ width: 420px; } div.footer-el1 div.r-el-top a:nth-child(2), div.footer-el1-body ul:nth-child(2){ width: 350px; } div.footer-el1 div.r-el-top a:nth-child(3), div.footer-el1-body ul:nth-child(3){ width: calc(100% - 848px); } div.footer-el1-body ul{ margin-top: 15px; } div.footer-el1-body ul li{ height: 70px; width: 70px; text-align: center; cursor: pointer; } div.footer-el1-body ul li:hover{ background: #F6F6F6; } div.footer-el1-body ul li img{ margin-top: 22px; } div.footer-el1-body ul li a{ font-size: 12px; color: #666; } div.footer-el1-body ul li:hover a{ text-decoration: underline; } div.footer-el1-body ul:nth-child(1){ float: left; display: grid; grid-template: repeat(2,1fr)/repeat(6,1fr); } div.footer-el1-body ul:nth-child(2){ float: left; display: grid; grid-template: repeat(2,1fr)/repeat(5,1fr); } div.footer-el1-body ul:nth-child(3){ float: left; display: grid; grid-template: repeat(2,1fr)/repeat(4,1fr); } div.footer-el2{ position: absolute; top: 240px; width: 78vw; min-width: 1198px; height: 300px; background: #FFFFFF; } div.footer-el2-line1{ height: 200px; } div.footer-el2-line2{ height: 100px; display: flex; justify-content: center; } img.footer-logo{ position: absolute; top: 30px; left: 30px; width: 160px; height: 60px; } div.footer-grid{ position: absolute; display: grid; width: calc(100% - 190px); height: 200px; right: 0; grid-template: 1fr/repeat(5,1fr); justify-content: center; align-items: center; } div.footer-grid ul{ text-align: center; } div.footer-grid ul li{ height: 30px; line-height: 30px; font-size: 12px; } div.footer-grid ul a{ color: #636e72; } div.footer-grid ul a:hover{ text-decoration: underline; } div.footer-grid ul a.no-underline:hover{ text-decoration: none; } div.footer-grid ul li:nth-child(1){ font-size: 16px; font-weight: bold; height: 50px; line-height: 50px; color:#636e72; } div.footer-grid ul:nth-child(4) li:nth-child(4) a{ color: #FF7234; } div.footer-el2-line2 img{ height: 20px; } div.footer-el2-line2 a{ color: #636e72; font-size: 12px; } div.footer-el2-line2 a:hover{ color: #FF7234; } div.right-side-bar{ position: fixed; right: 0; top: 33px; background: #FFFFFF; height: calc(100% - 33px); width: 40px; z-index: 10; box-shadow: 0 1px 10px rgba(0,0,0,0.2); display: flex; align-items: center; } div.right-side-bar ul{ cursor: pointer; } div.right-side-bar ul.return-top{ position: absolute; bottom: 0; display: none; } div.app_qr_code{ position: absolute; right: 40px; transform: translateY(-44px); width: 140px; height: 167px; background: #555; color: #FFFFFF; text-align: center; font-size: 12px; display: none; } div.app_qr_code img{ margin-top: 20px; margin-bottom: 12px; } div.right-side-bar ul li.app:hover div.app_qr_code{ display: block; } div.rt-div{ position: absolute; right: 40px; transform: translateY(-44px); font-size: 12px; line-height: 40px; text-align: center; color: #FFFFFF; width: 90px; height: 40px; background: #555; display: none; } ul.return-top:hover div.rt-div{ display: block; } div.left-fixed-footer{ position: fixed; left: 0; bottom: 0; width: 100px; height: 100px; background: url(../images/footer-l.png) no-repeat; cursor: pointer; transform: translateX(-100px); } div.bottom-fixed-footer{ position: fixed; left: 0; bottom: 0; text-align: center; width: 100vw; height: 160px; background-color: rgba(0,0,0,.7); cursor: pointer; } div.bottom-fixed-footer::before{ content: url(../images/footer-b.png); position: fixed; left: 50%; transform: translateX(-50%); bottom: 0px; height: 192px; }

html（共1565行）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿制赶集网主页</title> <link rel="stylesheet" href="./resources/css/index.css"> <script type="text/javascript" src="./resources/js/index.js"></script> </head> <body> <div class="header"> <div class="header-body"> <div class="city"> <span><a href="#">北京</a></span> <span><a href="#">[切换城市]</a></span> </div> <div class="weather"> <img src="./resources/images/晴.png" alt=""> <span>晴</span> <span>18 ~ 29℃</span> <span>良</span> <div class="weather-hover-box"> <div class="weather-hover-box-header"> <span>今天北京空气指数：</span> <span>62</span> <a href="#">查看一周天气情况 ></a> </div> <div class="weather-hover-box-body"> <ul class="t"> <li> <p>今天(周二)</p> <p> <img src="./resources/images/晴_big.png" alt=""> <br>18 ~ 30℃<br> <br>晴 <br>南风3级 <br>不限行 </p> </li> <li> <p>明天(周三)</p> <p> <img src="./resources/images/多云.png" alt=""> <br>17 ~ 29℃<br> <br>多云 <br>微风3级 <br>不限行 </p> </li> <li> <p>后天(周四)</p> <p> <img src="./resources/images/小雨.png" alt=""> <br>13 ~ 29℃<br> <br>小雨 <br>东风3-4级 <br>不限行 </p> </li> </ul> </div> </div> </div> <div class="info"> <div class="info-el info-login"><a href="#">登录</a>/<a href="#">注册</a></div> <div class="info-el info-user"> <ul class="t"> <a href="#">个人中心</a>  <img src="./resources/images/arrow-down.png" alt=""> <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="info-el info-mobile"><a href="#">手机上赶集</a></div> <div class="info-el info-help"><a href="#">帮助中心</a></div> <div class="info-el info-nav"> <ul class="t"> <a href="#">网站导航</a>  <img src="./resources/images/arrow-down.png" alt=""> </ul> <div class="info-nav-down"> <div class="info-nav-down-left"> <ul class="lb"> <span class="hot">热</span> <li> <a class="lh" href="#">房产</a><br> <a class="lp" href="#">租房</a> <a class="lp" href="#">二手房</a> <a class="lp" href="#">商铺</a> <a class="lp" href="#">写字楼</a> </li> <li> <a href="#" class="lh">招聘</a><br> <a class="lp" href="#">全职</a><br> <a class="lp" href="#">兼职</a><br> <a class="lp" href="#">高薪</a><br> <a class="lp" href="#">简历库</a><br> </li> <li> <a href="#" class="lh">二手物品</a> <a class="lp" href="#">手机</a><br> <a class="lp" href="#">笔记本</a><br> <a class="lp" href="#">家具</a><br> <a class="lp" href="#">家电</a><br> </li> <li> <a href="#" class="lh">车辆买卖</a> <a class="lp" href="#">二手车</a><br> <a class="lp" href="#">新车</a><br> <a class="lp" href="#">工程车</a><br> <a class="lp" href="#">摩托车</a><br> </li> <li> <a href="#" class="lh">宠物</a> <a class="lp" href="#">宠物狗</a><br> <a class="lp" href="#">宠物猫</a><br> <a class="lp" href="#">花鸟鱼虫</a><br> <a class="lp" href="#">宠物服务</a><br> </li> <li> <a href="#" class="lh">票务</a><br> <a class="lp" href="#">门票</a><br> <a class="lp" href="#">电影票</a><br> <a class="lp" href="#">演出票</a><br> </li> <li> <a href="#" class="lh">生活服务</a><br> <a class="lpx" href="#">保姆</a><span class="hr">|</span> <a class="lpx" href="#">快递</a><br> <a class="lpx" href="#">月嫂</a><span class="hr">|</span> <a class="lpx" href="#">维修</a><br> <a class="lpx" href="#">保洁</a><span class="hr">|</span> <a class="lpx" href="#">开锁</a><br> <a class="lpx" href="#">搬家</a><span class="hr">|</span> <a class="lpx" href="#">装修</a><br> </li> <li> <a href="#" class="lh">商务服务</a><br> <a class="lpx" href="#">公司注册</a><span class="hr">|</span> <a class="lpx" href="#">投资理财</a><br> <a class="lpx" href="#">网站建设</a><span class="hr">|</span> <a class="lpx" href="#">网络维护</a><br> <a class="lpx" href="#">设备租赁</a><span class="hr">|</span> <a class="lpx" href="#">设计策划</a><br> <a class="lpx" href="#">印刷包装</a><span class="hr">|</span> <a class="lpx" href="#">数码快印</a><br> </li> <li> <a href="#" class="lh">教育培训</a> <a class="lp" href="#">职业培训</a><br> <a class="lp" href="#">外语培训</a><br> <a class="lp" href="#">学历培训</a><br> </li> </ul> </div> <div class="info-nav-down-right"> <p class="h">精彩推荐</p> <ul class="b"> <li> <img src="./resources/images/qr_1.png" alt=""> <p>赶集网App</p> </li> <li> <img src="./resources/images/qr_2.png" alt=""> <p>赶集小程序</p> </li> <li> <img src="./resources/images/qr_3.png" alt=""> <p>赶集公众号</p> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="right-side-bar"> <ul> <li><a href="#"><img src="./resources/images/sideBar_ico_1_normal.png" alt=""></a></li> <li class="app"> <img src="./resources/images/sideBar_ico_2_normal.png" alt=""> <div class="app_qr_code"> <img src="./resources/images/qrcode_100.png" alt=""> <p>下载赶集APP</p> </div> </li> </ul> <ul class="return-top"> <a href="#"> <li><img src="./resources/images/sideBar_ico_3_normal.png" alt=""></li> <div class="rt-div">返回顶部</div> </a> </ul> </div> <div class="body"> <div class="search-box"> <a href="#"> <img class="logo" src="./resources/images/logo.png" alt=""> </a> <form class="search" action="#" method="post"> <div class="input"> <img class="search-ico" src="./resources/images/search-ico.png" alt=""> <input class="search-input" placeholder="搜索房子 / 工作 / 二手物品" type="text" name="param"> </div> <input class="search-button" type="submit" value="搜 索"> <ul class="search-links"> <a href="#">高新工作</a>  <a href="#">二手好车</a>  <a href="#">赶集APP</a>  <a href="#">特价房源</a>  <a href="#">小本创业</a>  </ul> </form> <div class="free-input"> <div class="free-input-button"> <button onclick="location.href='#'">免费发布信息</button> </div> <a href="#">修改/删除信息</a> </div> </div> <div class="search-fixed"> <div class="search-fixed-body"> <img class="ganji_white" src="./resources/images/ganji_white_ico.png" alt=""> <div class="search-fixed-form"> <img src="./resources/images/search-ico.png" alt=""> <input type="text" placeholder="搜索房子 / 工作 / 二手物品"> <input type="submit" value="搜 索"> </div> <div class="search-fixed-bdiv"> <button class="search-fixed-button">免费发布信息</button> </div> </div> </div> <div class="body-left"> <div class="body-left-el1"> <div> <div> <a href="#"> <h4>工作</h4> <div class="el1-box c1"> <img class="el1-img" src="./resources/images/work-normal.png" alt=""> </div> </a> </div> <span><a href="#">全职</a></span> <span><a href="#">兼职</a></span> </div> <div> <div> <a href="#"> <h4>房产</h4> <div class="el1-box c2"> <img class="el1-img" src="./resources/images/house-normal.png" alt=""> </div> </a> </div> <span><a href="#">租房</a></span> <span><a href="#">二手房</a></span> </div> <div> <div> <a href="#"> <h4>二手物品</h4> <div class="el1-box c3"> <img class="el1-img" src="./resources/images/phone-normal.png" alt=""> </div> </a> </div> <span><a href="#">手机</a></span> <span><a href="#">电脑</a></span> </div> <div> <div> <a href="#"> <h4>二手车</h4> <div class="el1-box c1"> <img class="el1-img" src="./resources/images/car-normal.png" alt=""> </div> </a> </div> <span><a href="#">准新车</a></span> <span><a href="#">万元车</a></span> </div> <div> <div> <a href="#"> <h4>宠物</h4> <div class="el1-box c1"> <img class="el1-img" src="./resources/images/pat-normal.png" alt=""> </div> </a> </div> <span><a href="#">猫</a></span> <span><a href="#">狗</a></span> <span><a href="#">用品</a></span> </div> <div> <div> <a href="#"> <h4>商务服务</h4> <div class="el1-box c3"> <img class="el1-img" src="./resources/images/money-normal.png" alt=""> </div> </a> </div> <span><a href="#">工商</a></span> <span><a href="#">贷款</a></span> </div> <div> <div> <a href="#"> <h4>生活服务</h4> <div class="el1-box c2"> <img class="el1-img" src="./resources/images/life-normal.png" alt=""> </div> </a> </div> <span><a href="#">搬家</a></span> <span><a href="#">家政</a></span> </div> </div> <div class="body-left-el2"> <div class="el-top"> <a href="#">北京房产</a> <a href="#">个人房源</a> </div> <div class="el-body"> <p> <a href="#">租房</a> <a href="#">整租</a><span class="hr">|</span> <a href="#">合租</a><span class="hr">|</span> <a href="#">房东直租</a> </p> <p> <a href="#">二手房出售</a><span class="hr">|</span> <a href="#">小户型</a> </p> <p> <a href="#">商铺出租</a><span class="hr">|</span> <a href="#">商铺出售</a> </p> <p> <a href="#">写字楼出租</a><span class="hr">|</span> <a href="#">写字楼出售</a> </p> <p> <a href="#">厂房</a> <a href="#">仓库</a><span class="hr">|</span> <a href="#">土地</a><span class="hr">|</span> <a href="#">车位</a> </p> <p> <a href="#">品牌公寓</a> </p> </div> <div class="download-app"> <div> <img src="./resources/images/app_ico.png" alt="">  下载赶集App，找房更便捷 </div> </div> </div> <div class="body-left-el3"> <div class="el-top"> <a href="#">北京招聘</a> <a href="#">非你莫属</a> </div> <div class="el-body"> <p> <a href="#">包吃包住</a>    <a href="#">周末双休</a>   <a href="#">五险一金</a>   <a href="#">放心企业</a>     <a href="#">毕业专区</a>    <a href="#">福利诱惑</a> </p> <p> <span class="small-title">热门职位</span>                       <span class="small-title">手艺巧 工资高</span> </p> <p> <a href="#">销售</a>     <a href="#">技工</a>     <a href="#">快递员</a>     <a href="#">行政后勤</a>     <a href="#">电工</a>     <a href="#">组装工</a>     <a href="#">汽车服务</a> </p> <p> <a href="#">司机</a>     <a href="#">普工</a>     <a href="#">营业员</a>     <a href="#">人力资源</a>     <a href="#">焊工</a>     <a href="#">搬运工</a>     <a href="#">生产制造</a> </p> <p> <a href="#">导购</a>     <a href="#">客服</a>     <a href="#">收银员</a>     <a href="#">财务审计</a>     <a href="#">木工</a>     <a href="#">建筑工</a>     <a href="#">按摩保健</a> </p> <p> <a href="#">保安</a>     <a href="#">保洁</a>     <a href="#">服务员</a>     <a href="#">货运司机</a>     <a href="#">汽修</a>     <a href="#">施工员</a>     <a href="#">美容美发</a> </p> <p> <a href="#">餐饮</a>     <a href="#">教师</a>     <a href="#">送餐员</a>     <a href="#">电话销售</a>     <a href="#">叉车工</a>    <a href="#">造价员</a>     <a href="#">美术设计</a> </p> <p> <a href="#">财务</a>     <a href="#">库管</a>     <a href="#">跟单员</a>     <a href="#">房产中介</a>     <a href="#">操作工</a>    <a href="#">材料员</a>     <a href="#">装潢设计</a> </p> <p> <span class="small-title">入门快 挣钱快</span>                    <span class="small-title">电商IT 技术宅</span> </p> <p> <a href="#">销售代表</a>   <a href="#">渠道销售</a>   <a href="#">销售主管</a>   <a href="#">房产经理</a>    <a href="#">淘宝客服</a>  <a href="#">店铺运营</a>   <a href="#">网络管理</a> </p> <p> <a href="#">网络销售</a>   <a href="#">医药代表</a>   <a href="#">电话销售</a>   <a href="#">房产开发</a>    <a href="#">淘宝美工</a>  <a href="#">店铺管理</a>   <a href="#">技术支持</a> </p> <p> <a href="#">销售助理</a>   <a href="#">汽车销售</a>   <a href="#">房产销售</a>   <a href="#">房产经纪</a>    <a href="#">平面设计</a>  <a href="#">网络推广</a>   <a href="#">软件工程</a> </p> <p> <span class="small-title">轻白领 办公族</span>                    <span class="small-title">美食多 服务好</span> </p> <p> <a href="#">后勤</a>    <a href="#">人事专员</a>   <a href="#">招聘主管</a>   <a href="#">客服专员</a>    <a href="#">洗碗工</a>   <a href="#">配菜/打荷</a>   <a href="#">保姆</a> </p> <p> <a href="#">前台</a>    <a href="#">招聘专员</a>   <a href="#">人事主管</a>   <a href="#">客服主管</a>    <a href="#">面点师</a>   <a href="#">食堂厨师</a>   <a href="#">小时工</a> </p> <p> <a href="#">行政</a>    <a href="#">行政助理</a>   <a href="#">客户关系</a>   <a href="#">呼叫中心</a>    <a href="#">后厨杂工</a>   <a href="#">川菜厨师</a>   <a href="#">采购员</a> </p> <p> <span class="small-title">财会 教师 司机</span>                    <span class="small-title">金融 媒体 物流</span> </p> <p> <a href="#">会计</a>    <a href="#">助教</a>    <a href="#">出租司机</a>   <a href="#">驾校教练</a>    <a href="#">金融/证券</a>  <a href="#">物流专员</a>   <a href="#">课堂顾问</a> </p> <p> <a href="#">出纳</a>    <a href="#">幼师</a>    <a href="#">班车司机</a>   <a href="#">客运司机</a>    <a href="#">媒体/影视</a>  <a href="#">物业管理</a>   <a href="#">家居设计</a> </p> <p> <a href="#">统计</a>    <a href="#">代驾</a>    <a href="#">商务司机</a>   <a href="#">特种车司机</a>   <a href="#">医院/医疗</a>  <a href="#">市场/公关</a>    <a href="#">CAD设计</a> </p> <br> <p class="el3-h float-left"> <a href="#">兼职工作</a>               <a href="#">放心兼职</a> </p> <p class="el3-h float-right"> <a href="#">求职简历</a>           <a href="#">简历搜索</a>   </p> <br><br> <p> <a href="#">家教</a>    <a href="#">小时工</a>   <a href="#">学生兼职</a>   <a href="#">手工制作</a>    <a href="#">销售</a>     <a href="#">餐饮酒店</a>   <a href="#">人力资源</a> </p> <p> <a href="#">翻译</a>    <a href="#">促销员</a>   <a href="#">调查问卷</a>   <a href="#">设计制作</a>    <a href="#">技工</a>     <a href="#">超市百货</a>   <a href="#">通信网络</a> </p> <p> <a href="#">模特</a>    <a href="#">服务员</a>   <a href="#">传单派发</a>   <a href="#">网站建设</a>    <a href="#">客服</a>     <a href="#">贸易运输</a>   <a href="#">生产制作</a> </p> <p> <a href="#">销售</a>    <a href="#">摄影师</a>   <a href="#">礼仪小姐</a>   <a href="#">其他兼职</a>    <a href="#">行政</a>     <a href="#">家政安保</a>   <a href="#">金融投资</a> </p> <p> <a href="#">会计</a>    <a href="#">实习生</a>   <a href="#">酒吧KTV</a>   <a href="#">更多兼职</a>     <a href="#">财务</a>     <a href="#">市场公关</a>   <a href="#">更多简历</a> </p> </div> </div> <div class="body-left-el4"> <div class="el-top"> <a href="#">二手车</a> <a href="#">免费估价</a> </div> <div class="el-body"> <p> <a href="#">我要买车</a>  <a href="#">车检延保</a>  <a href="#">靠谱放心车</a> </p> <p> <a href="#">个人车</a><span class="hr">|</span> <a href="#">货车</a><span class="hr">|</span> <a href="#">工程车</a><span class="hr">|</span> <a href="#">SUV</a> </p> <p> <a href="#">练手车</a><span class="hr">|</span> <a href="#">准新车</a><span class="hr">|</span> <a href="#">面包车</a><span class="hr">|</span> <a href="#">MPV</a> </p> <p> <a href="#">跑车</a><span class="hr">|</span> <a href="#">小轿车</a><span class="hr">|</span> <a href="#">拖拉机</a><span class="hr">|</span> <a href="#">摩托车</a> </p> <p> <a href="#">3万以下</a><span class="hr">|</span> <a href="#">3-5万</a><span class="hr">|</span> <a href="#">5-10万</a><span class="hr">|</span> <a href="#">10万</a> </p> <p> <a href="#">大众</a><span class="hr">|</span> <a href="#">奥迪</a><span class="hr">|</span> <a href="#">本田</a><span class="hr">|</span> <a href="#">丰田</a><span class="hr">|</span> <a href="#">宝马</a> </p> <p> <a href="#">奔驰</a><span class="hr">|</span> <a href="#">宾利</a><span class="hr">|</span> <a href="#">别克</a><span class="hr">|</span> <a href="#">标致</a><span class="hr">|</span> <a href="#">福特</a> </p> <p> <a href="#">比亚迪</a><span class="hr">|</span> <a href="#">讴歌</a><span class="hr">|</span> <a href="#">日产</a><span class="hr">|</span> <a href="#">现代</a><span class="hr">|</span> <a href="#">起亚</a> </p> <p> <a href="#">布加迪</a><span class="hr">|</span> <a href="#">捷豹</a><span class="hr">|</span> <a href="#">三菱</a><span class="hr">|</span> <a href="#">铃木</a><span class="hr">|</span> <a href="#">宝骏</a> </p> <p> <a href="#">迈巴赫</a><span class="hr">|</span> <a href="#">红旗</a><span class="hr">|</span> <a href="#">长安</a><span class="hr">|</span> <a href="#">长城</a><span class="hr">|</span> <a href="#">五菱</a> </p> <p> <a href="#">斯巴鲁</a><span class="hr">|</span> <a href="#">众泰</a><span class="hr">|</span> <a href="#">奇瑞</a><span class="hr">|</span> <a href="#">荣威</a><span class="hr">|</span> <a href="#">金杯</a> </p> </div> </div> <div class="body-left-el5"> <div class="el-top"> <a href="#">新车</a> <a href="#">品牌选车</a> </div> <div class="el-body"> <p> <a href="#">CX-5/大众</a>   <a href="#">阿特兹/CR-V</a> </p> <p> <a href="#">天籁/TIDA</a>   <a href="#">斯柯达/Q5</a> </p> <p> <a href="#">本田/哈弗H6</a>   <a href="#">途观/丰田</a> </p> <p> <a href="#">奔驰/福克斯</a>   <a href="#">宝马/速腾</a> </p> <p> <a href="#">奥迪/朗逸</a>   <a href="#">别克/宝来</a> </p> </div> </div> <div class="body-left-el6"> <div class="el-top"> <a href="#">二手市场</a> <a href="#">摩托车卖场</a> </div> <div class="el-body"> <p> <a href="#">家用电器</a>   <a href="#">闲置换钱</a>  <a href="#">质保iPhone</a>   <a href="#">健康出行</a>    <a href="#">换季淘衣</a>   <a href="#">宜家家居</a> </p> <p> <a href="#">小家电</a> </p> <p> <span class="small-title">数码通讯</span>                      <span class="small-title">车辆</span> </p> <p> <a href="#">二手手机</a>   <a href="#">苹果</a>     <a href="#">三星</a>     <a href="#">小米</a>      <a href="#">自行车</a>    <a href="#">捷安特</a>    <a href="#">美利达</a> </p> <p> <a href="#">笔记本</a>    <a href="#">联想</a>     <a href="#">苹果</a>     <a href="#">平板电脑</a>     <a href="#">电动车</a>    <a href="#">爱玛</a>     <a href="#">雅迪</a> </p> <p> <a href="#">台式电脑</a>   <a href="#">外设</a>     <a href="#">一体机</a>     <a href="#">网络设备</a>     <a href="#">摩托车</a>    <a href="#">本田</a>     <a href="#">踏板</a> </p> <p> <a href="#">电子数码</a>   <a href="#">相机</a>     <a href="#">摄像机</a>     <a href="#">游戏机</a>     <span class="small-title">办公/设备</span> </p> <p> <a href="#">影音娱乐</a>   <a href="#">音响</a>     <a href="#">MP3</a>     <a href="#">电子书</a>     <a href="#">商用办公</a>    <a href="#">打印机</a>      <a href="#">投影仪</a> </p> <p> <span class="small-title">家具/家电/百货/礼品</span>                    <a href="#">设备办公</a>    <a href="#">展柜货架</a>      <a href="#">五金机械</a> </p> <p> <a href="#">二手家具</a>   <a href="#">床</a>      <a href="#">沙发</a>     <a href="#">桌子</a>        <a href="#">农业产品</a>    <a href="#">苗木/水产</a>    <a href="#">农用机械</a> </p> <p> <a href="#">二手家电</a>   <a href="#">电视</a>      <a href="#">空调</a>       <a href="#">洗衣机</a>      <a href="#">老年用品</a>    <a href="#">按摩保健</a>   <a href="#">美容化妆</a> </p> <p style="float: left;"> <a href="#">服饰箱包</a>   <a href="#">包包</a>      <a href="#">手表</a>       <a href="#">首饰</a>          </p> <p class="el3-h"> <a href="#">物品回收</a> </p> <p> <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> <p> <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> <p> <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> </div> </div> <div class="body-left-el7"> <div class="el-top"> <a href="#">汽车服务</a> <a href="#">免费办进京证</a> </div> <div class="el-body"> <p> <a href="#">租车轿车</a><span class="hr">|</span> <a href="#">商务车</a><span class="hr">|</span> <a href="#">大巴</a><span class="hr">|</span> <a href="#">中巴</a> </p> <p> <a href="#">代驾酒后</a><span class="hr">|</span> <a href="#">旅游</a><span class="hr">|</span> <a href="#">商务</a><span class="hr">|</span> <a href="#">长途</a> </p> <p> <a href="#">驾校海淀</a><span class="hr">|</span> <a href="#">朝阳</a><span class="hr">|</span> <a href="#">昌平</a><span class="hr">|</span> <a href="#">大兴</a> </p> <p> <a href="#">保养汽修</a><span class="hr">|</span> <a href="#">保养</a><span class="hr">|</span> <a href="#">装饰</a><span class="hr">|</span> <a href="#">年检</a> </p> <p> <a href="#">改装外观</a><span class="hr">|</span> <a href="#">内饰</a><span class="hr">|</span> <a href="#">性能</a><span class="hr">|</span> <a href="#">隔音</a> </p> </div> </div> <div class="body-left-el8"> <div class="el-top"> <a href="#">招商加盟</a> <a href="#">开小店赚大钱</a> </div> <div class="el-body"> <p> <a href="#">餐饮加盟</a>  <a href="#">小吃</a><span class="hr">|</span> <a href="#">冷饮</a><span class="hr">|</span> <a href="#">甜品</a> </p> <p>       <a href="#">快餐</a><span class="hr">|</span> <a href="#">熟食</a><span class="hr">|</span> <a href="#">面包店</a> </p> <p> <a href="#">服装加盟</a>  <a href="#">女装</a><span class="hr">|</span> <a href="#">男装</a><span class="hr">|</span> <a href="#">母婴</a> </p> <p> <a href="#">家居建材</a>  <a href="#">建材</a><span class="hr">|</span> <a href="#">家纺</a><span class="hr">|</span> <a href="#">涂料</a> </p> <p> <a href="#">美容保健</a>  <a href="#">美容院</a><span class="hr">|</span> <a href="#">化妆品</a><span class="hr">|</span> <a href="#">保健</a> </p> <p> <a href="#">生活服务</a>  <a href="#">快递</a><span class="hr">|</span> <a href="#">干洗</a><span class="hr">|</span> <a href="#">礼品</a> </p> <p> <a href="#">特色加盟</a>  <a href="#">网店</a><span class="hr">|</span> <a href="#">教育</a><span class="hr">|</span> <a href="#">车服务</a> </p> <p> <a href="#">小本创业</a>  <a href="#">零售</a><span class="hr">|</span> <a href="#">养殖</a><span class="hr">|</span> <a href="#">代理</a> </p> </div> </div> <div class="body-left-el9"> <div class="el-top"> <a href="#">宠物</a> <a href="#">买狗防骗指南</a> </div> <div class="el-body"> <p> <a href="#">宠物狗</a>   <a href="#">泰迪</a><span class="hr">|</span> <a href="#">柯基</a><span class="hr">|</span> <a href="#">金毛</a><span class="hr">|</span> <a href="#">拉布拉多</a> </p> <p> <a href="#">宠物猫</a>   <a href="#">波斯</a><span class="hr">|</span> <a href="#">折耳</a><span class="hr">|</span> <a href="#">加菲</a><span class="hr">|</span> <a href="#">短毛猫</a> </p> <p> <a href="#">小宠</a>    <a href="#">鸟</a><span class="hr">|</span> <a href="#">鱼</a><span class="hr">|</span> <a href="#">龟</a><span class="hr">|</span> <a href="#">猪</a><span class="hr">|</span> <a href="#">仓鼠</a> </p> <p> <a href="#">服务</a>    <a href="#">用品</a><span class="hr">|</span> <a href="#">寄养</a><span class="hr">|</span> <a href="#">美容</a> </p> <p> <a href="#">救助</a>    <a href="#">医院</a><span class="hr">|</span> <a href="#">赠送</a><span class="hr">|</span> <a href="#">领养</a> </p> </div> </div> <div class="body-left-el10"> <div class="el-top"> <a href="#">票务卡券</a> <a href="#">火车票查询</a> </div> <div class="el-body"> <p> <a href="#">门票</a>     <a href="#">电影</a><span class="hr">|</span> <a href="#">演唱会</a><span class="hr">|</span> <a href="#">展览</a> </p> <p>       <a href="#">体育赛事</a><span class="hr">|</span> <a href="#">景区景点</a> </p> <p> <a href="#">卡券</a>     <a href="#">购物卡</a><span class="hr">|</span> <a href="#">健身卡</a><span class="hr">|</span> <a href="#">美发卡</a> </p> <p>       <a href="#">加油卡</a><span class="hr">|</span> <a href="#">电话卡</a><span class="hr">|</span> <a href="#">代金券</a> </p> <p>       <a href="#">游泳卡</a><span class="hr">|</span> <a href="#">折扣卡</a> </p> </div> </div> </div> <div class="body-right"> <div class="body-right-el1"> <div class="r-el1-top"> 更多精彩尽在赶集App <img src="resources/images/mobile_ico.gif" alt=""> </div> <div class="r-el1-scroll"> <div> <div><img src="./resources/images/quan_ico.png" alt=""></div> <div> <p><img src="./resources/images/g_img1.png" alt=""><span>6749人热议中</span></p> <p>不吹不黑3天找到工作，经验...</p> </div> </div> <div> <div><img src="./resources/images/zixun_ico.png" alt=""></div> <div> <p><img src="./resources/images/g_img2.png" alt=""><span>5745人热议中</span></p> <p>大家都在看，羞羞哒小漫画</p> </div> </div> <div> <div><img src="./resources/images/quan_ico.png" alt=""></div> <div> <p><img src="./resources/images/g_img1.png" alt=""><span>6749人热议中</span></p> <p>不吹不黑3天找到工作，经验...</p> </div> </div> <div> <div><img src="./resources/images/zixun_ico.png" alt=""></div> <div> <p><img src="./resources/images/g_img2.png" alt=""><span>5745人热议中</span></p> <p>大家都在看，羞羞哒小漫画</p> </div> </div> </div> <span class="pre"><img src="./resources/images/arrow-left.png" alt=""></span> <span class="next"><img src="./resources/images/arrow-right.png" alt=""></span> </div> <div class="body-right-el2"> <div class="r-el-top"> <a href="#">家庭上门服务</a> <ul class="page"> <li class="page-item"> <img src="./resources/images/index_green_ico.png" alt=""> </li> <li class="page-item"> <img src="./resources/images/index_white_ico.png" alt=""> </li> </ul> </div> <div class="el-body long-pic"> <p class="float-left single-pic"> <img src="./resources/images/banjia.png" alt=""><br> <a href="#">搬家</a> </p> <p class="float-left single-pic"> <img src="./resources/images/lahuoyundongxi_che_1554901812758.png" alt=""><br> <a href="#">拉货快运</a> </p> <p class="float-left single-pic"> <img src="./resources/images/shouji.png" alt=""><br> <a href="#">手机维修</a> </p> <p class="float-left single-pic"> <img src="./resources/images/guandao.png" alt=""><br> <a href="#">管道疏通</a> </p> <p class="float-left single-pic"> <img src="./resources/images/shuiguan.png" alt=""><br> <a href="#">水管龙头</a> </p> <p class="float-left single-pic"> <img src="./resources/images/baojie.png" alt=""><br> <a href="#">保洁</a> </p> <p class="float-left single-pic"> <img src="./resources/images/yuesao.png" alt=""><br> <a href="#">保姆月嫂</a> </p> <p class="float-left single-pic"> <img src="./resources/images/yuersao.png" alt=""><br> <a href="#">育儿嫂</a> </p> <p class="float-left single-pic"> <img src="./resources/images/lahuoyundongxi_che_1554901812758.png" alt=""><br> <a href="#">企业货运</a> </p> <p class="float-left single-pic"> <img src="./resources/images/quanbu.png" alt=""><br> <a href="#">全部</a> </p> </div> <span class="pre nohover" data-role="0"><img src="./resources/images/arrow-left.png" alt=""></span> <span class="next" data-role="1"><img src="./resources/images/arrow-right.png" alt=""></span> </div> <div class="body-right-el3"> <div class="r-el-top"> <a href="#">本地生活服务</a> </div> <div class="el-body"> <p> <a href="#">搬家估价</a>  <a href="#">无忧装修</a><span class="hr">|</span> <a href="#">金牌商家</a> </p> <p> <a href="#">搬家</a>    <a href="#">住宅</a><span class="hr">|</span> <a href="#">金杯</a><span class="hr">|</span> <a href="#">长途</a><span class="hr">|</span> <a href="#">办公室</a> </p> <p> <a href="#">家政</a>    <a href="#">保洁</a><span class="hr">|</span> <a href="#">保姆</a><span class="hr">|</span> <a href="#">月嫂</a><span class="hr">|</span> <a href="#">小时工</a> </p> <p> <a href="#">物流</a>    <a href="#">快递</a><span class="hr">|</span> <a href="#">国际</a><span class="hr">|</span> <a href="#">国内</a><span class="hr">|</span> <a href="#">货运</a> </p> <p> <a href="#">家电维修</a>  <a href="#">空调</a><span class="hr">|</span> <a href="#">移机</a><span class="hr">|</span> <a href="#">冰箱</a><span class="hr">|</span> <a href="#">电视</a> </p> <p> <a href="#">房屋维修</a>  <a href="#">门窗</a><span class="hr">|</span> <a href="#">卫浴</a><span class="hr">|</span> <a href="#">防水补漏</a> </p> <p> <a href="#">便民</a>    <a href="#">开锁</a><span class="hr">|</span> <a href="#">干洗</a><span class="hr">|</span> <a href="#">修鞋</a><span class="hr">|</span> <a href="#">改衣</a> </p> <p> <a href="#">风水</a>    <a href="#">起名</a><span class="hr">|</span> <a href="#">测字</a><span class="hr">|</span> <a href="#">转运</a><span class="hr">|</span> <a href="#">算命</a><span class="hr">|</span> <a href="#">殉葬</a> </p> </div> <div class="r-el-top"> <a href="#">装修建材</a> </div> <div class="el-body"> <p> <a href="#">装修</a>    <a href="#">家装</a><span class="hr">|</span> <a href="#">工装</a><span class="hr">|</span> <a href="#">设计</a><span class="hr">|</span> <a href="#">翻新</a> </p> <p> <a href="#">建材</a>    <a href="#">门窗</a><span class="hr">|</span> <a href="#">家具</a><span class="hr">|</span> <a href="#">窗帘</a><span class="hr">|</span> <a href="#">地板</a> </p> <p> <a href="#">服务</a>    <a href="#">装修公司</a><span class="hr">|</span> <a href="#">监工</a><span class="hr">|</span> <a href="#">效果图</a> </p> </div> <div class="r-el-top"> <a href="#">婚庆摄影</a> </div> <div class="el-body"> <p> <a href="#">婚庆</a>    <a href="#">策划</a><span class="hr">|</span> <a href="#">婚车</a><span class="hr">|</span> <a href="#">主持</a><span class="hr">|</span> <a href="#">鲜花</a> </p> <p> <a href="#">摄影</a>    <a href="#">婚纱</a><span class="hr">|</span> <a href="#">儿童</a><span class="hr">|</span> <a href="#">商业</a><span class="hr">|</span> <a href="#">摄像</a> </p> </div> <div class="r-el-top"> <a href="#">旅游休闲</a> </div> <div class="el-body"> <p> <a href="#">旅游</a>    <a href="#">旅行社</a><span class="hr">|</span> <a href="#">自助游</a><span class="hr">|</span> <a href="#">郊区游</a><span class="hr">|</span> <a href="#">农家乐</a> </p> <p> <a href="#">国内旅游</a>  <a href="#">出国旅游</a><span class="hr">|</span> <a href="#">港澳游</a><span class="hr">|</span> <a href="#">台湾游</a><span class="hr">|</span> <a href="#">度假村</a> </p> <p> <a href="#">餐饮美食</a>  <a href="#">中餐</a><span class="hr">|</span> <a href="#">西餐</a><span class="hr">|</span> <a href="#">自助餐</a><span class="hr">|</span> <a href="#">烧烤</a> </p> <p> <a href="#">运动休闲</a>  <a href="#">瑜伽</a><span class="hr">|</span> <a href="#">健身</a><span class="hr">|</span> <a href="#">游泳</a><span class="hr">|</span> <a href="#">滑雪</a> </p> <p> <a href="#">美容美发</a>  <a href="#">美发</a><span class="hr">|</span> <a href="#">瘦脸</a><span class="hr">|</span> <a href="#">祛痘</a><span class="hr">|</span> <a href="#">隆鼻</a> </p> </div> <div class="download-app"> <div style="position: absolute;left: 15px;"> <img src="./resources/images/app_ico.png" alt="">  下载赶集App，服务一键到家 </div> </div> </div> <div class="body-right-el4"> <div class="r-el-top"> <a href="#">本地商务服务</a> </div> <div class="el-body"> <p> <a href="#">担保贷款</a>  <a href="#">投资理财</a><span class="hr">|</span> <a href="#">保险</a><span class="hr">|</span> <a href="#">典当融资</a> </p> <p> <a href="#">公司注册</a>  <a href="#">专项审批</a><span class="hr">|</span> <a href="#">专利注册</a><span class="hr">|</span> <a href="#">企业变更</a> </p> <p> <a href="#">网络建站</a>  <a href="#">网络维护</a><span class="hr">|</span> <a href="#">网站优化</a><span class="hr">|</span> <a href="#">服务器</a> </p> <p> <a href="#">设计策划</a>  <a href="#">礼仪庆典</a><span class="hr">|</span> <a href="#">展览会展</a><span class="hr">|</span> <a href="#">喷绘招牌</a> </p> <p> <a href="#">律师</a>    <a href="#">翻译</a><span class="hr">|</span> <a href="#">会计</a><span class="hr">|</span> <a href="#">app开发</a> </p> <p> <a href="#">设备维修</a>  <a href="#">设备租赁</a><span class="hr">|</span> <a href="#">食品批发</a><span class="hr">|</span> <a href="#">节日礼品</a> </p> <p> <a href="#">印刷</a>    <a href="#">礼品定制</a><span class="hr">|</span> <a href="#">资质认证</a><span class="hr">|</span> <a href="#">网站推广</a> </p> </div> </div> <div class="body-right-el5"> <div class="r-el-top"> <a href="#">教育培训</a> </div> <div class="el-body"> <p> <a href="#">特长爱好</a>  <a href="#">舞蹈</a><span class="hr">|</span> <a href="#">乐器</a><span class="hr">|</span> <a href="#">书画</a><span class="hr">|</span> <a href="#">声乐</a> </p> <p> <a href="#">职业培训</a>  <a href="#">会计</a><span class="hr">|</span> <a href="#">设计</a><span class="hr">|</span> <a href="#">技工</a><span class="hr">|</span> <a href="#">厨师</a> </p> <p> <a href="#">家教</a>    <a href="#">小学</a><span class="hr">|</span> <a href="#">初中</a><span class="hr">|</span> <a href="#">高中</a><span class="hr">|</span> <a href="#">奥数</a> </p> <p> <a href="#">育儿</a>    <a href="#">托管</a><span class="hr">|</span> <a href="#">亲子</a><span class="hr">|</span> <a href="#">智力开发</a><span class="hr">|</span> <a href="#">学前教育</a> </p> <p> <a href="#">留学</a>    <a href="#">日本</a><span class="hr">|</span> <a href="#">美国</a><span class="hr">|</span> <a href="#">加拿大</a><span class="hr">|</span> <a href="#">新加坡</a> </p> <p> <a href="#">IT培训</a>  <a href="#">网站设计</a><span class="hr">|</span> <a href="#">软件开发</a><span class="hr">|</span> <a href="#">思科认证</a> </p> <p> <a href="#">高等教育</a>  <a href="#">考研培训</a><span class="hr">|</span> <a href="#">在职研究生</a><span class="hr">|</span> <a href="#">MBA</a> </p> <p> <a href="#">其他课程</a>  <a href="#">股票期货</a><span class="hr">|</span> <a href="#">拓展培训</a> </p> </div> </div> </div> </div> <div class="footer"> <div class="footer-el1"> <div class="r-el-top"> <a class="no-change">赶集招标</a> <a class="no-change">生活助手</a> <a class="no-change">应用中心</a> </div> <div class="footer-el1-body"> <ul> <li> <img src="./resources/images/gjbbs_ico_1.png" alt=""><br/> <a href="#">家庭保洁</a> </li> <li> <img src="./resources/images/gjbbs_ico_2.png" alt=""><br/> <a href="#">企业保洁</a> </li> <li> <img src="./resources/images/gjbbs_ico_3.png" alt=""><br/> <a href="#">育儿嫂</a> </li> <li> <img src="./resources/images/gjbbs_ico_4.png" alt=""><br/> <a href="#">月嫂</a> </li> <li> <img src="./resources/images/gjbbs_ico_5.png" alt=""><br/> <a href="#">保姆</a> </li> <li> <img src="./resources/images/gjbbs_ico_6.png" alt=""><br/> <a href="#">搬家</a> </li> <li> <img src="./resources/images/gjbbs_ico_16.png" alt=""><br/> <a href="#">装修装饰</a> </li> <li> <img src="./resources/images/gjbbs_ico_17.png" alt=""><br/> <a href="#">租车服务</a> </li> <li> <img src="./resources/images/gjbbs_ico_18.png" alt=""><br/> <a href="#">担保贷款</a> </li> <li> <img src="./resources/images/gjbbs_ico_19.png" alt=""><br/> <a href="#">物流货运</a> </li> <li> <img src="./resources/images/gjbbs_ico_20.png" alt=""><br/> <a href="#">网站建设</a> </li> <li> <img src="./resources/images/gjbbs_ico_21.png" alt=""><br/> <a href="#">工商注册</a> </li> </ul> <ul> <li> <img src="./resources/images/gjbbs_ico_7.png" alt=""><br/> <a href="#">天气预报</a> </li> <li> <img src="./resources/images/gjbbs_ico_8.png" alt=""><br/> <a href="#">快递查询</a> </li> <li> <img src="./resources/images/gjbbs_ico_9.png" alt=""><br/> <a href="#">手机充值</a> </li> <li> <img src="./resources/images/gjbbs_ico_10.png" alt=""><br/> <a href="#">商务租车</a> </li> <li> <img src="./resources/images/gjbbs_ico_11.png" alt=""><br/> <a href="#">火车票</a> </li> <li> <img src="./resources/images/gjbbs_ico_22.png" alt=""><br/> <a href="#">日历</a> </li> <li> <img src="./resources/images/gjbbs_ico_23.png" alt=""><br/> <a href="#">水电煤</a> </li> <li> <img src="./resources/images/gjbbs_ico_24.png" alt=""><br/> <a href="#">在线地图</a> </li> <li> <img src="./resources/images/gjbbs_ico_25.png" alt=""><br/> <a href="#">查违章</a> </li> <li> <img src="./resources/images/gjbbs_ico_26.png" alt=""><br/> <a href="#">外卖订餐</a> </li> </ul> <ul> <li> <img src="./resources/images/gjbbs_ico_12.png" alt=""><br/> <a href="#">赶集网</a> </li> <li> <img src="./resources/images/gjbbs_ico_13.png" alt=""><br/> <a href="#">招财猫直聘</a> </li> <li> <img src="./resources/images/gjbbs_ico_14.png" alt=""><br/> <a href="#">58到家</a> </li> <li> <img src="./resources/images/gjbbs_ico_15.png" alt=""><br/> <a href="#">转转</a> </li> <li> <img src="./resources/images/gjbbs_ico_27.png" alt=""><br/> <a href="#">中华英才</a> </li> <li> <img src="./resources/images/gjbbs_ico_28.png" alt=""><br/> <a href="#">瓜子二手车</a> </li> <li> <img src="./resources/images/gjbbs_ico_29.png" alt=""><br/> <a href="#">斗米兼职</a> </li> <li> <img src="./resources/images/gjbbs_ico_30.png" alt=""><br/> <a href="#">驾校一点通</a> </li> </ul> </div> </div> <div class="footer-el2"> <div class="footer-el2-line1"> <img src="./resources/images/footer-logo.png" alt="" class="footer-logo"> <div class="footer-grid"> <ul> <li><a href="#">关于赶集</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">企业文化</a></li> <li><a href="#">隐私政策</a></li> </ul> <ul> <li><a href="#">网站合作</a></li> <li><a href="#">赶集推广</a></li> <li><a href="#">渠道招商</a></li> <li><a href="#"></a></li> </ul> <ul> <li><a href="#">帮助中心</a></li> <li><a href="#">常见问题</a></li> <li><a href="#">求职指南</a></li> <li><a href="#">防骗指南</a></li> </ul> <ul> <li><a class="no-underline">安全中心</a></li> <li><a href="#">账号登录</a></li> <li><a href="#">安全设置</a></li> <li><a href="#">手机号冒用</a></li> </ul> <ul> <li><a class="no-underline">关注我们</a></li> <li><a href="#">新浪微博</a></li> <li><a href="#">官网微信</a></li> <li><a href="#"></a></li> </ul> </div> </div> <div class="left-fixed-footer"></div> <div class="bottom-fixed-footer"></div> <div class="footer-el2-line2"> <img src="./resources/images/footer-jgw-beian.png" alt=""> <a href="#">京公网备案信息：xxxxxxxxxxxxxx</a>  <a href="#">京ICP证xxxxxx号</a>  <a href="#">京ICP备xxxxxxxx</a>  <a href="#">乙测资字xxxxxxx</a>  <a href="#">人力资源服务许可证及备案凭证</a>  <a href="#">违法信息举报xxxxxxxxxx</a>  <a href="#">xxxx@xxxxxxx.com</a> </div> </div> </div> </body> </html>

JavaScript（共222行）

window.onload = function() { window.onscroll = function () { if(document.documentElement.scrollTop >= 204){ document.querySelector('div.search-fixed').style.display = 'flex' }else{ document.querySelector('div.search-fixed').style.display = 'none' } if (document.documentElement.scrollTop >= 450) { document.querySelector('ul.return-top').style.display = 'block' }else{ document.querySelector('ul.return-top').style.display = 'none' } } /** * 改变r-el1-top动图 */ var body_right_el1_obj = document.querySelector('div.body-right-el1') body_right_el1_obj.onmouseover = function(){ var r_el1_top_img_obj = document.querySelector('div.r-el1-top>img') r_el1_top_img_obj.src = r_el1_top_img_obj.src.replace('mobile_ico.gif','mobile_ico_hover.gif') } body_right_el1_obj.onmouseleave = function(){ var r_el1_top_img_obj = document.querySelector('div.r-el1-top>img') r_el1_top_img_obj.src = r_el1_top_img_obj.src.replace('mobile_ico_hover.gif','mobile_ico.gif') } /** * 改变app_ico */ var download_app_obj = document.querySelectorAll('div.download-app') download_app_obj.forEach( function(element, index) { element.onmouseover = function () { var img = element.querySelector('div>img') img.src = img.src.replace('app_ico.png', 'app_hover_ico.png') } element.onmouseleave = function () { var img = element.querySelector('div>img') img.src = img.src.replace('app_hover_ico.png', 'app_ico.png') } }); /** * 处理点按切换轮播 */ var body_right_el1_obj = document.querySelector('div.body-right-el1') var r_el1_scroll_pre = body_right_el1_obj.querySelector('span.pre') var r_el1_scroll_next = body_right_el1_obj.querySelector('span.next') r_el1_scroll_pre.onclick = function () { var r_el1_scroll_obj = document.querySelector('div.r-el1-scroll') //把r_el_scroll_obj的最后一个元素拿到最前面 element4 = r_el1_scroll_obj.querySelector('div:nth-child(4)') r_el1_scroll_obj.removeChild(element4) r_el1_scroll_obj.prepend(element4) } r_el1_scroll_next.onclick = function () { var r_el1_scroll_obj = document.querySelector('div.r-el1-scroll') var r_el1_scroll_pre = body_right_el1_obj.querySelector('span.pre') var r_el1_scroll_next = body_right_el1_obj.querySelector('span.next') //把r_el_scroll_obj的第一个元素拿到最后面 element1 = r_el1_scroll_obj.querySelector('div:nth-child(1)') r_el1_scroll_obj.removeChild(element1) r_el1_scroll_obj.append(element1) } /** * 处理点按向左向右切换图片 */ //获取整体元素对象 var body_right_el2_obj = document.querySelector('div.body-right-el2') //获得按钮对象 var r_el2_scroll_pre = body_right_el2_obj.querySelector('span.pre') var r_el2_scroll_next = body_right_el2_obj.querySelector('span.next') //获取page对象的页码图片 var page_obj_img_arr = body_right_el2_obj.querySelectorAll('ul.page>li.page-item>img') //定义全局变量 var data_role_pre,data_role_next //上一个 绑定点击事件 r_el2_scroll_pre.onclick = function () { //获取数据 data_role_pre = r_el2_scroll_pre.getAttribute('data-role') data_role_next = r_el2_scroll_next.getAttribute('data-role') //翻到上一个 if (data_role_pre > 0) { var el2_body = document.querySelector('div.el-body.long-pic') el2_body.style.transform = 'translateX(' + -62*(data_role_pre-1) + 'px)' //更新按钮属性数据 r_el2_scroll_pre.setAttribute('data-role', parseInt(data_role_pre, 10) - 1) r_el2_scroll_next.setAttribute('data-role', parseInt(data_role_next, 10) - 1) } //第一页全部展示 要切到第一页的样式 if(data_role_pre <= 1) { page_obj_img_arr[0].src = './resources/images/index_green_ico.png' page_obj_img_arr[1].src = './resources/images/index_white_ico.png' } if (data_role_pre < 1) { //禁用pre if(!r_el2_scroll_pre.classList.contains('nohover')){ r_el2_scroll_pre.classList += ' nohover' } } //启用next if (r_el2_scroll_next.classList.contains('nohover')) { r_el2_scroll_next.classList = 'next' } } //下一个 绑定点击事件 r_el2_scroll_next.onclick = function () { //获取数据 data_role_pre = r_el2_scroll_pre.getAttribute('data-role') data_role_next = r_el2_scroll_next.getAttribute('data-role') //翻到下一个 if(data_role_next < 6){ var el2_body = document.querySelector('div.el-body.long-pic') el2_body.style.transform = 'translateX('+ -62*data_role_next +'px)' //更新按钮属性数据 r_el2_scroll_next.setAttribute('data-role', parseInt(data_role_next, 10) + 1) r_el2_scroll_pre.setAttribute('data-role', parseInt(data_role_pre, 10) + 1) } //第一页展示不全或未 要切到第二页的样式 if(data_role_next >= 1) { page_obj_img_arr[0].src = './resources/images/index_white_ico.png' page_obj_img_arr[1].src = './resources/images/index_green_ico.png' } if (data_role_next > 5) { //禁用next if(!r_el2_scroll_next.classList.contains('nohover')){ r_el2_scroll_next.classList += ' nohover' } } //启用pre if (r_el2_scroll_pre.classList.contains('nohover')) { r_el2_scroll_pre.classList = 'pre' } } /** * 改变sidebar上的样式 */ var right_side_bar_obj = document.querySelector('div.right-side-bar') var sideBar_ico_1_obj = right_side_bar_obj.querySelector('ul>li:nth-child(1)') sideBar_ico_1_obj.onmouseover = function () { images = sideBar_ico_1_obj.querySelector('img') images.src = images.src.replace('normal', 'active') } sideBar_ico_1_obj.onmouseleave = function () { images = sideBar_ico_1_obj.querySelector('img') images.src = images.src.replace('active', 'normal') } var sideBar_ico_2_obj = right_side_bar_obj.querySelector('ul>li.app') sideBar_ico_2_obj.onmouseover = function () { images = sideBar_ico_2_obj.querySelector('img') images.src = images.src.replace('normal', 'active') } sideBar_ico_2_obj.onmouseleave = function () { images = sideBar_ico_2_obj.querySelector('img') images.src = images.src.replace('active', 'normal') } var sideBar_ico_3_obj = right_side_bar_obj.querySelector('ul.return-top') sideBar_ico_3_obj.onmouseover = function () { images = sideBar_ico_3_obj.querySelector('img') images.src = images.src.replace('normal', 'active') } sideBar_ico_3_obj.onmouseleave = function () { images = sideBar_ico_3_obj.querySelector('img') images.src = images.src.replace('active', 'normal') } /** * 底部点击弹出和收回 */ var bottom_fixed_footer_obj = document.querySelector('div.bottom-fixed-footer') var left_fixed_footer_obj = document.querySelector('div.left-fixed-footer') bottom_fixed_footer_obj.onclick = function () { bottom_fixed_footer_obj.style.transform = 'translateX(-100vw)' bottom_fixed_footer_obj.style.transitionDuration = '.5s' left_fixed_footer_obj.style.transitionDelay = '.5s' left_fixed_footer_obj.style.transform = 'translateX(0)' left_fixed_footer_obj.style.transitionDuration = '.5s' } left_fixed_footer_obj.onclick = function () { left_fixed_footer_obj.style.transform = 'translateX(-100px)' left_fixed_footer_obj.style.transitionDuration = '.5s' bottom_fixed_footer_obj.style.transitionDelay = '.5s' bottom_fixed_footer_obj.style.transform = 'translateX(0)' bottom_fixed_footer_obj.style.transitionDuration = '.5s' } } 图片资源就不放在这里了，毕竟贵网站版权所有。

本博客其他文章推荐

css实现下拉菜单

只用CSS的轮播图？快来看一看！

原生js获取css伪类元素并设置属性

模仿一个球落地效果，最终停在地面上（仿真效果，CSS实现）

让一个小球无限的弹弹弹~(CSS实现球无限弹动)

如果有一屏幕的爱心，你愿意送给谁？（简单实现原生js、css随机生成521个心）