前言
本人以貧薄的前端知識，使用原生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="#">[email protected]</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'
}
}
圖片資源就不放在這裏了，畢竟貴網站版權所有。