仿写赶集网主页

  • 前言
  • 编写过程
  • 效果展示
  • 贴一下代码
    • 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>&nbsp;<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>&nbsp;<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>&ensp;<a href="#">二手好车</a>&ensp;<a href="#">赶集APP</a>&ensp;<a href="#">特价房源</a>&ensp;<a href="#">小本创业</a>&ensp;</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>&emsp;<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>&emsp;<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="">&ensp;下载赶集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>&ensp;&nbsp;&nbsp;<a href="#">周末双休</a>&ensp;&nbsp;<a href="#">五险一金</a>&emsp;&emsp;<a href="#">放心企业</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">毕业专区</a>&ensp;&nbsp;&nbsp;<a href="#">福利诱惑</a></p><p><span class="small-title">热门职位</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;&nbsp;<span class="small-title">手艺巧 工资高</span></p><p><a href="#">销售</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">技工</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">快递员</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">行政后勤</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">电工</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">组装工</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">汽车服务</a></p><p><a href="#">司机</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">普工</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">营业员</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">人力资源</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">焊工</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">搬运工</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">生产制造</a></p><p><a href="#">导购</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">客服</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">收银员</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">财务审计</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">木工</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">建筑工</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">按摩保健</a></p><p><a href="#">保安</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">保洁</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">服务员</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">货运司机</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">汽修</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">施工员</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">美容美发</a></p><p><a href="#">餐饮</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">教师</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">送餐员</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">电话销售</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">叉车工</a>&emsp;&ensp;&ensp;<a href="#">造价员</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">美术设计</a></p><p><a href="#">财务</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">库管</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">跟单员</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">房产中介</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">操作工</a>&emsp;&ensp;&ensp;<a href="#">材料员</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">装潢设计</a></p><p><span class="small-title">入门快 挣钱快</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span class="small-title">电商IT 技术宅</span></p><p><a href="#">销售代表</a>&ensp;&nbsp;<a href="#">渠道销售</a>&emsp;&nbsp;<a href="#">销售主管</a>&emsp;&emsp;<a href="#">房产经理</a>&emsp;&emsp;&ensp;<a href="#">淘宝客服</a>&emsp;<a href="#">店铺运营</a>&emsp;&emsp;<a href="#">网络管理</a></p><p><a href="#">网络销售</a>&ensp;&nbsp;<a href="#">医药代表</a>&emsp;&nbsp;<a href="#">电话销售</a>&emsp;&emsp;<a href="#">房产开发</a>&emsp;&emsp;&ensp;<a href="#">淘宝美工</a>&emsp;<a href="#">店铺管理</a>&emsp;&emsp;<a href="#">技术支持</a></p><p><a href="#">销售助理</a>&ensp;&nbsp;<a href="#">汽车销售</a>&emsp;&nbsp;<a href="#">房产销售</a>&emsp;&emsp;<a href="#">房产经纪</a>&emsp;&emsp;&ensp;<a href="#">平面设计</a>&emsp;<a href="#">网络推广</a>&emsp;&emsp;<a href="#">软件工程</a></p><p><span class="small-title">轻白领 办公族</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span class="small-title">美食多 服务好</span></p><p><a href="#">后勤</a>&emsp;&emsp;&ensp;<a href="#">人事专员</a>&emsp;&nbsp;<a href="#">招聘主管</a>&emsp;&emsp;<a href="#">客服专员</a>&emsp;&emsp;&ensp;<a href="#">洗碗工</a>&emsp;&emsp;<a href="#">配菜/打荷</a>&emsp;&ensp;<a href="#">保姆</a></p><p><a href="#">前台</a>&emsp;&emsp;&ensp;<a href="#">招聘专员</a>&emsp;&nbsp;<a href="#">人事主管</a>&emsp;&emsp;<a href="#">客服主管</a>&emsp;&emsp;&ensp;<a href="#">面点师</a>&emsp;&emsp;<a href="#">食堂厨师</a>&emsp;&emsp;<a href="#">小时工</a></p><p><a href="#">行政</a>&emsp;&emsp;&ensp;<a href="#">行政助理</a>&emsp;&nbsp;<a href="#">客户关系</a>&emsp;&emsp;<a href="#">呼叫中心</a>&emsp;&emsp;&ensp;<a href="#">后厨杂工</a>&emsp;&nbsp;<a href="#">川菜厨师</a>&emsp;&emsp;<a href="#">采购员</a></p><p><span class="small-title">财会 教师 司机</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;<span class="small-title">金融 媒体 物流</span></p><p><a href="#">会计</a>&emsp;&emsp;&ensp;<a href="#">助教</a>&emsp;&emsp;&emsp;<a href="#">出租司机</a>&emsp;&emsp;<a href="#">驾校教练</a>&emsp;&emsp;&ensp;<a href="#">金融/证券</a>&emsp;<a href="#">物流专员</a>&emsp;&emsp;<a href="#">课堂顾问</a></p><p><a href="#">出纳</a>&emsp;&emsp;&ensp;<a href="#">幼师</a>&emsp;&emsp;&emsp;<a href="#">班车司机</a>&emsp;&emsp;<a href="#">客运司机</a>&emsp;&emsp;&ensp;<a href="#">媒体/影视</a>&emsp;<a href="#">物业管理</a>&emsp;&emsp;<a href="#">家居设计</a></p><p><a href="#">统计</a>&emsp;&emsp;&ensp;<a href="#">代驾</a>&emsp;&emsp;&emsp;<a href="#">商务司机</a>&emsp;&emsp;<a href="#">特种车司机</a>&emsp;&ensp;<a href="#">医院/医疗</a>&emsp;<a href="#">市场/公关</a>&emsp;&ensp;&nbsp;<a href="#">CAD设计</a></p><br><p class="el3-h float-left"><a href="#">兼职工作</a>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<a href="#">放心兼职</a></p><p class="el3-h float-right"><a href="#">求职简历</a>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;<a href="#">简历搜索</a>&ensp;</p><br><br><p><a href="#">家教</a>&emsp;&emsp;&ensp;<a href="#">小时工</a>&emsp;&emsp;<a href="#">学生兼职</a>&emsp;&emsp;<a href="#">手工制作</a>&emsp;&emsp;&ensp;<a href="#">销售</a>&emsp;&emsp;&emsp;&nbsp;<a href="#">餐饮酒店</a>&emsp;&emsp;<a href="#">人力资源</a></p><p><a href="#">翻译</a>&emsp;&emsp;&ensp;<a href="#">促销员</a>&emsp;&emsp;<a href="#">调查问卷</a>&emsp;&emsp;<a href="#">设计制作</a>&emsp;&emsp;&ensp;<a href="#">技工</a>&emsp;&emsp;&emsp;&nbsp;<a href="#">超市百货</a>&emsp;&emsp;<a href="#">通信网络</a></p><p><a href="#">模特</a>&emsp;&emsp;&ensp;<a href="#">服务员</a>&emsp;&emsp;<a href="#">传单派发</a>&emsp;&emsp;<a href="#">网站建设</a>&emsp;&emsp;&ensp;<a href="#">客服</a>&emsp;&emsp;&emsp;&nbsp;<a href="#">贸易运输</a>&emsp;&emsp;<a href="#">生产制作</a></p><p><a href="#">销售</a>&emsp;&emsp;&ensp;<a href="#">摄影师</a>&emsp;&emsp;<a href="#">礼仪小姐</a>&emsp;&emsp;<a href="#">其他兼职</a>&emsp;&emsp;&ensp;<a href="#">行政</a>&emsp;&emsp;&emsp;&nbsp;<a href="#">家政安保</a>&emsp;&emsp;<a href="#">金融投资</a></p><p><a href="#">会计</a>&emsp;&emsp;&ensp;<a href="#">实习生</a>&emsp;&emsp;<a href="#">酒吧KTV</a>&emsp;&emsp;<a href="#">更多兼职</a>&emsp;&emsp;&nbsp;&nbsp;<a href="#">财务</a>&emsp;&emsp;&emsp;&nbsp;<a href="#">市场公关</a>&emsp;&emsp;<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>&ensp;<a href="#">车检延保</a>&ensp;<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>&emsp;&emsp;<a href="#">阿特兹/CR-V</a></p><p><a href="#">天籁/TIDA</a>&emsp;&emsp;<a href="#">斯柯达/Q5</a></p><p><a href="#">本田/哈弗H6</a>&emsp;&emsp;<a href="#">途观/丰田</a></p><p><a href="#">奔驰/福克斯</a>&emsp;&emsp;<a href="#">宝马/速腾</a></p><p><a href="#">奥迪/朗逸</a>&emsp;&emsp;<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>&ensp;&nbsp;<a href="#">闲置换钱</a>&emsp;<a href="#">质保iPhone</a>&ensp;&nbsp;<a href="#">健康出行</a>&emsp;&emsp;&ensp;<a href="#">换季淘衣</a>&emsp;&ensp;<a href="#">宜家家居</a></p><p><a href="#">小家电</a></p><p><span class="small-title">数码通讯</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;<span class="small-title">车辆</span></p><p><a href="#">二手手机</a>&ensp;&nbsp;<a href="#">苹果</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">三星</a>&emsp;&emsp;&emsp;&ensp;<a href="#">小米</a>&emsp;&emsp;&emsp;&emsp;&nbsp;<a href="#">自行车</a>&emsp;&emsp;&ensp;<a href="#">捷安特</a>&emsp;&emsp;&emsp;<a href="#">美利达</a></p><p><a href="#">笔记本</a>&emsp;&nbsp;&nbsp;<a href="#">联想</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">苹果</a>&emsp;&emsp;&emsp;&ensp;<a href="#">平板电脑</a>&emsp;&emsp;&nbsp;&nbsp;<a href="#">电动车</a>&emsp;&emsp;&ensp;<a href="#">爱玛</a>&emsp;&emsp;&emsp;&emsp;<a href="#">雅迪</a></p><p><a href="#">台式电脑</a>&nbsp;&nbsp;<a href="#">外设</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">一体机</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">网络设备</a>&emsp;&emsp;&nbsp;&nbsp;<a href="#">摩托车</a>&emsp;&emsp;&ensp;<a href="#">本田</a>&emsp;&emsp;&emsp;&emsp;<a href="#">踏板</a></p><p><a href="#">电子数码</a>&nbsp;&nbsp;<a href="#">相机</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">摄像机</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">游戏机</a>&emsp;&emsp;&emsp;&ensp;<span class="small-title">办公/设备</span></p><p><a href="#">影音娱乐</a>&nbsp;&nbsp;<a href="#">音响</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">MP3</a>&emsp;&emsp;&emsp;&ensp;<a href="#">电子书</a>&emsp;&emsp;&emsp;&ensp;<a href="#">商用办公</a>&emsp;&nbsp;&nbsp;<a href="#">打印机</a>&emsp;&emsp;&ensp;&nbsp;&nbsp;<a href="#">投影仪</a></p><p><span class="small-title">家具/家电/百货/礼品</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">设备办公</a>&emsp;&nbsp;&nbsp;<a href="#">展柜货架</a>&emsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">五金机械</a></p><p><a href="#">二手家具</a>&nbsp;&nbsp;<a href="#">床</a>&emsp;&emsp;&emsp;&ensp;&nbsp;<a href="#">沙发</a>&emsp;&emsp;&emsp;&ensp;<a href="#">桌子</a>&emsp;&emsp;&emsp;&ensp;&nbsp;&nbsp;&nbsp;<a href="#">农业产品</a>&emsp;&nbsp;&nbsp;<a href="#">苗木/水产</a>&emsp;&ensp;&nbsp;<a href="#">农用机械</a></p><p><a href="#">二手家电</a>&nbsp;&nbsp;<a href="#">电视</a>&emsp;&emsp;&nbsp;&nbsp;&nbsp;<a href="#">空调</a>&emsp;&emsp;&ensp;&nbsp;&nbsp;&nbsp;<a href="#">洗衣机</a>&emsp;&emsp;&emsp;&nbsp;&nbsp;<a href="#">老年用品</a>&emsp;&nbsp;&nbsp;<a href="#">按摩保健</a>&emsp;&emsp;<a href="#">美容化妆</a></p><p style="float: left;"><a href="#">服饰箱包</a>&nbsp;&nbsp;<a href="#">包包</a>&emsp;&emsp;&nbsp;&nbsp;&nbsp;<a href="#">手表</a>&emsp;&emsp;&ensp;&nbsp;&nbsp;&nbsp;<a href="#">首饰</a>&emsp;&emsp;&emsp;&ensp;&nbsp;&nbsp;&nbsp;</p><p class="el3-h"><a href="#">物品回收</a></p><p><a href="#">家具百货</a>&nbsp;&nbsp;<a href="#">床上用品</a>&emsp;<a href="#">个人用品</a>&emsp;&ensp;&nbsp;<a href="#">洗衣熨烫</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">热门推荐</a>&emsp;&ensp;<a href="#">手机</a>&emsp;&ensp;<a href="#">电脑</a>&emsp;&ensp;<a href="#">金银</a></p><p><a href="#">母婴儿童</a>&nbsp;&nbsp;<a href="#">婴儿车</a>&emsp;&nbsp;&nbsp;&nbsp;<a href="#">学步车</a>&emsp;&emsp;&nbsp;&nbsp;<a href="#">玩具</a>&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;<a href="#">家用回收</a>&emsp;&ensp;<a href="#">家具</a>&emsp;&ensp;<a href="#">电器</a>&emsp;&ensp;<a href="#">礼品</a></p><p><a href="#">闲置礼品</a>&nbsp;&nbsp;<a href="#">工艺品</a>&emsp;&nbsp;&nbsp;&nbsp;<a href="#">艺术收藏</a>&ensp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">把玩物件</a>&emsp;&emsp;&ensp;&nbsp;<a href="#">商用回收</a>&emsp;&nbsp;&nbsp;<a href="#">办公</a>&emsp;&ensp;<a href="#">数码</a>&emsp;&ensp;<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>&nbsp;                  <a href="#">小吃</a><span class="hr">|</span><a href="#">冷饮</a><span class="hr">|</span><a href="#">甜品</a></p><p>&emsp;&emsp;&emsp;&ensp;&nbsp;    <a href="#">快餐</a><span class="hr">|</span><a href="#">熟食</a><span class="hr">|</span><a href="#">面包店</a></p><p><a href="#">服装加盟</a>&nbsp;                    <a href="#">女装</a><span class="hr">|</span><a href="#">男装</a><span class="hr">|</span><a href="#">母婴</a></p><p><a href="#">家居建材</a>&nbsp;                 <a href="#">建材</a><span class="hr">|</span><a href="#">家纺</a><span class="hr">|</span><a href="#">涂料</a></p><p><a href="#">美容保健</a>&nbsp;                 <a href="#">美容院</a><span class="hr">|</span><a href="#">化妆品</a><span class="hr">|</span><a href="#">保健</a></p><p><a href="#">生活服务</a>&nbsp;                   <a href="#">快递</a><span class="hr">|</span><a href="#">干洗</a><span class="hr">|</span><a href="#">礼品</a></p><p><a href="#">特色加盟</a>&nbsp;                 <a href="#">网店</a><span class="hr">|</span><a href="#">教育</a><span class="hr">|</span><a href="#">车服务</a></p><p><a href="#">小本创业</a>&nbsp;                    <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>&emsp;&ensp;<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>&emsp;&ensp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<a href="#">用品</a><span class="hr">|</span><a href="#">寄养</a><span class="hr">|</span><a href="#">美容</a></p><p><a href="#">救助</a>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&emsp;&nbsp;<a href="#">电影</a><span class="hr">|</span><a href="#">演唱会</a><span class="hr">|</span><a href="#">展览</a></p><p>&emsp;&emsp;&emsp;&emsp;&emsp;<a href="#">体育赛事</a><span class="hr">|</span><a href="#">景区景点</a></p><p><a href="#">卡券</a>&emsp;&emsp;&emsp;&nbsp;<a href="#">购物卡</a><span class="hr">|</span><a href="#">健身卡</a><span class="hr">|</span><a href="#">美发卡</a></p><p>&emsp;&emsp;&emsp;&emsp;&emsp;<a href="#">加油卡</a><span class="hr">|</span><a href="#">电话卡</a><span class="hr">|</span><a href="#">代金券</a></p><p>&emsp;&emsp;&emsp;&emsp;&emsp;<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>&ensp;<a href="#">无忧装修</a><span class="hr">|</span><a href="#">金牌商家</a></p><p><a href="#">搬家</a>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&ensp;<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>&ensp;<a href="#">门窗</a><span class="hr">|</span><a href="#">卫浴</a><span class="hr">|</span><a href="#">防水补漏</a></p><p><a href="#">便民</a>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&ensp;<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>&ensp;<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>&ensp;<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>&ensp;<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="">&ensp;下载赶集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>&ensp;<a href="#">投资理财</a><span class="hr">|</span><a href="#">保险</a><span class="hr">|</span><a href="#">典当融资</a></p><p><a href="#">公司注册</a>&ensp;<a href="#">专项审批</a><span class="hr">|</span><a href="#">专利注册</a><span class="hr">|</span><a href="#">企业变更</a></p><p><a href="#">网络建站</a>&ensp;<a href="#">网络维护</a><span class="hr">|</span><a href="#">网站优化</a><span class="hr">|</span><a href="#">服务器</a></p><p><a href="#">设计策划</a>&ensp;<a href="#">礼仪庆典</a><span class="hr">|</span><a href="#">展览会展</a><span class="hr">|</span><a href="#">喷绘招牌</a></p><p><a href="#">律师</a>&emsp;&emsp;&nbsp;<a href="#">翻译</a><span class="hr">|</span><a href="#">会计</a><span class="hr">|</span><a href="#">app开发</a></p><p><a href="#">设备维修</a>&ensp;<a href="#">设备租赁</a><span class="hr">|</span><a href="#">食品批发</a><span class="hr">|</span><a href="#">节日礼品</a></p><p><a href="#">印刷</a>&emsp;&emsp;&nbsp;<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>&ensp;<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>&ensp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&emsp;&emsp;&nbsp;<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>&ensp;<a href="#">网站设计</a><span class="hr">|</span><a href="#">软件开发</a><span class="hr">|</span><a href="#">思科认证</a></p><p><a href="#">高等教育</a>&ensp;<a href="#">考研培训</a><span class="hr">|</span><a href="#">在职研究生</a><span class="hr">|</span><a href="#">MBA</a></p><p><a href="#">其他课程</a>&ensp;<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>&ensp;<a href="#">京ICP证xxxxxx号</a>&ensp;<a href="#">京ICP备xxxxxxxx</a>&ensp;<a href="#">乙测资字xxxxxxx</a>&ensp;<a href="#">人力资源服务许可证及备案凭证</a>&ensp;<a href="#">违法信息举报xxxxxxxxxx</a>&ensp;<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) {//禁用preif(!r_el2_scroll_pre.classList.contains('nohover')){r_el2_scroll_pre.classList += ' nohover'}}//启用nextif (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) {//禁用nextif(!r_el2_scroll_next.classList.contains('nohover')){r_el2_scroll_next.classList += ' nohover'}}//启用preif (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个心)

菜鸟后端程序员花了两天半模仿写出了赶集网主页,速来围观!相关推荐

  1. 一个后端程序员如何被公司逼的开始写前端代码!奉劝各位最好选择前后端分离的公司...

    hello~各位读者好,我是鸭血粉丝(大家可以称呼我为「阿粉」),在特殊的日子里,大家要注意安全,尽量不要出门,无聊的话,就像阿粉一样,把时间愉快的花在学习上吧. 事情起因 阿粉自从学会Java以来, ...

  2. 聊聊后端程序员的知识体系-第一篇

    聊聊后端程序员的知识体系-第一篇 原文链接:https://www.fpthinker.com/backend_knowledge_architecture/knowledge.htmll 亲爱的读者 ...

  3. [转]后端程序员必备:书写高质量SQL的30条建议

    以下文章来源于捡田螺的小男孩 ,作者捡田螺的小男孩 转载:<后端程序员必备:书写高质量SQL的30条建议> 前言 本文将结合实例demo,阐述30条有关于优化SQL的建议,多数是实际开发中 ...

  4. vue传值到后端_Vue.js快速入门就从这儿开始特别是后端程序员

    自从前后端分离开始变成主流后,曾经的Jsp.FreeMarker.Velocity.Thymeleaf貌似慢慢被遗忘了,取而代之的是兴起的前端主流语言,比如Vue.React和AngularJS 介绍 ...

  5. 后端程序员必备的 Linux 基础知识

    后端程序员必备的 Linux 基础知识 原文来自github stars>63k的项目JavaGuide,欢迎小伙伴去支持原作者 一 从认识操作系统开始 1.1 操作系统简介 1.2 操作系统简 ...

  6. Java后端程序员1年工作经验总结

    java后端1年经验和技术总结(1) 1.引言 毕业已经一年有余,这一年里特别感谢技术管理人员的器重,以及同事的帮忙,学到了不少东西.这一年里走过一些弯路,也碰到一些难题,也受到过做为一名开发却经常为 ...

  7. 2018,程序员生活的两个兴趣爱好

    2018,程序员生活的两个兴趣爱好 程序员除了在公司码代码,还是要有点自己的兴趣爱好嘛!今年计划两个爱好,一个是练习毛笔字,一个是继续做个人网站. (1)兴趣一:练习毛笔字 因为之前没有基础,所以选择 ...

  8. 后端程序员必须要懂的MySQL数据库

    整体结构图 和其它数据库相比,MySQL 有点与众不同,它的架构可以在多种不同场景中应用并发挥良好作用.主要体现在存储引擎的架构上,插件式的存储引擎架构将查询处理和其它的系统任务以及数据的存储提取相分 ...

  9. 入职后端程序员的一些心得

    入职后端程序员的一些心得 本来打算上床睡觉,但是想到这段时间的所作所为,有许多值得反省的地方.曾子有言:吾日三省吾身,我虽然做不到曾子的程度,不过也尽量在工作之余好好反思,争取少犯错误,提高工作效率. ...

最新文章

  1. 不是微型计算机主板上的部件,微型计算机主板上安装的主要部件
  2. 信息检索顶会SIGIR 2021大奖出炉!山东大学荣获最佳学生论文
  3. N^N最左边和最右边的数(数学)
  4. ios基础之归档和解档
  5. 摆脱冷气_摆脱匿名类
  6. 波士顿动力有对手了:不怕摔倒的机器狗,怎么踹都能站起来
  7. java模拟浏览器htmlunit,Java版本的浏览器HtmlUnit入门示例
  8. idea关于连接mysql数据库异常解决的方法
  9. Silverlight 1.0 beta 和1.1 Alpha体验
  10. 各品牌路由器默认账号密码
  11. 城市信息学其五-空间经济学、城市信息学、和交通便利
  12. matlab仿真step模块讲解,Simulink仿真教程(最好)
  13. 八位共阴数码管的工作方式
  14. 戏人看戏--什么是Web3.0?区块链又是什么?如何写一个web3.0的界面?
  15. scratch少儿编程实例教程(模拟动画片项目式教学)——幻影龙动画编程
  16. 虚幻4渲染编程(材质编辑器篇)【第三卷:正式准备开始材质开发】
  17. 【Spark NLP】第 8 章:使用 Keras 进行序列建模
  18. Python——函数(2)之常见函数
  19. 陶哲轩career advice 翻译
  20. 【HDU4676】Sum Of Gcd(莫队+欧拉函数)

热门文章

  1. 一个球从100m高度自由落下,每次落地后反弹回原高度的一半,再落下,再反弹。求它在第10次落地时共经过多少米,第十次反弹多高
  2. 2018,我们就是星辰大海
  3. 传智播客 微金所项目实战
  4. 马少平、周枫、王小川、楼天城、唐文斌……清华计算机系与AI的40年
  5. 谈谈以前端角度出发做好SEO需要考虑什么?
  6. 移动硬盘文件乱码是怎么回事?数据还能恢复吗
  7. 高级映射(一):一对一、一对多,多对多查询总结
  8. spm12安装与使用
  9. js对象新增方法object.assign()
  10. linux常用端口查询