菜鸟后端程序员花了两天半模仿写出了赶集网主页，速来围观！
仿写赶集网主页
- 前言
- 编写过程
- 效果展示
- 贴一下代码
-
- 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行）
<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>62span>
<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>赶集网Appp>
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>下载赶集APPp>
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="#">赶集APPa>
<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>