这是我第一个关于前端的博客***也不知道做的好不好，自己感觉跟官方的差不多。***
</head>
<body>
<!-- 头部文件 -->
<div class="head">
<header class="top-hand">
<h1>
<a href="https://guazi.com/bj" title="瓜子二手车"></a>
</h1>
<div class="head-text">
<ul>
<li>
首页
</li>
</ul>
<ul>
<li>
我要买车
</li>
</ul>
<ul>
<li>
我要卖车
</li>
</ul>
<ul>
<li>
瓜子服务
</li>
</ul>
<ul>
<li>
瓜子金融
</li>
</ul>
<ul>
<li>
毛豆新车
</li>
</ul>
<ul>
<li>
热线电话 400-023-1529 |
</li>
</ul>
<ul>
<li>
<div class="a">
</div>
</li>
<li>登录</li>
</ul>
</div>
</header>
</div>
<!-- 外层/不动 -->
<div class="middle-outer" id="index">
<!-- 内层/会动 -->
<div class="middle-inner">
<div class="index-body">
<div class="index-hander">
<h1>
<a href="index.html"><img src="img/fff.dc56abdfd895a73f8c067012a06bd8b8.png"></a>
</h1>
<div class="header-city">
<a>北京</a>
</div>
<div class="header-dl">
<a>登陆</a>
<div class="zz">
</div>
</div>
<div class="header-phone">
热线电话 400-023-1529
</div>
<div class="header-daohan">
<a>毛豆新车</a><a>瓜子金融</a><a>瓜子服务</a><a>我要卖车</a><a>我要买车</a><a>首页</a>
</div>
</div>
<div class="body1">
<div class="body11">
<div class="seach">
<div class="searchbar ">
<div class="search-input">
<input type="search" id='search' placeholder=' 请输入关键词,例如:君越 2.4L ' />
<button type="submit">搜索</button>
</div>
</div>
</div>
</div>
<div class="body12">
</div>
</div>
<div class="body3">
<div class="body31">
<div class="body31-cc">
<a>我要买车</a>
<i class="icon-jiantou"></i>
</div>
<div class="body32-chexing">
<a>
<img src="img/audi.png">
奥迪
</a>
<a>
<img src="img/benz.png">
奔驰
</a>
<a>
<img src="img/bmw.png">
宝马
</a>
<a>
<img src="img/buick.png">
别克
</a>
<a>
<img src="img/chevrolet.png">
雪佛兰
</a>
<a>
<img src="img/dazhong.png">
大众
</a>
<a>
<img src="img/ford.png">
福特
</a>
</div>
<div class="body32-chexing2">
<a>
<img src="img/hafu.png">
哈弗
</a>
<a>
<img src="img/honda.png">
本田
</a>
<a>
<img src="img/hyundai.png">
现代
</a>
<a>
<img src="img/richan.png">
日产
</a>
<a>
<img src="img/toyota.png">
丰田
</a>
<a> <img src="img/landrover.png">
路虎
</a>
<a>全部品牌</a>
</div>
<div class="body32-price">
<a>3万以下</a>
<a>3-5万</a>
<a>5-7万</a>
<a>7-9万</a>
<a>9-12万</a>
<a>12-16万</a>
<a>16-20万</a>
</div>
<div class="body32-more">
<a>超值</a>
<a>急售</a>
<a>练手车</a>
<a>准新车</a>
<a>严选车</a>
<a>SUV</a>
<a>产看更多</a>
</div>
</div>
<div class="body32">
<a>我要卖车</a>
<i class="icon-jiantou"></i>
<div class="body32-show">
<p>瓜子保卖,当天拿钱,全程代办</p>
</div>
<div class="body32-right">
<input type="text" id="pdone" placeholder="请输入电话号码" />
<button type="button" class="mui-btn mui-btn-green">预约卖车</button>
</div>
<div class="body32-show2">
<div class="show21">
爱车估价
</div>
<div class="show22">
|
</div>
<div class="show21">
保卖服务
</div>
</div>
</div>
</div>
<div class="body4">
<div class="b41" id="B41">
<div class="body41" id="41">
</div>
<div class="body412" id="412">
</div>
</div>
<div class="b42">
<div class="body42">
</div>
<div class="body422" id="422">
</div>
</div>
<div class="b43">
<div class="body43"> </div>
<div class="body432" id="432">
</div>
</div>
<div class="b44">
<div class="body44"> </div>
<div class="body442" id="442">
</div>
</div>
</div>
<div class="body5">
<div class="body51">
<img src="https://image1.guazistatic.com/qn181115174544d28f1534f10bf4826b3072f21f243ebe.png?imageView2/2">
<div class="carname">
两厢轿车
</div>
<div class="carprice">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn1811151746295824e8bab7648f8b0d14d61394972fa0.png?imageView2/2">
<div class="carname">
三厢轿车
</div>
<div class="carprice">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn18111518174315fa9321f36c8d4ff56bcdb3e5d85281.png?imageView2/2">
<div class="carname">
跑车
</div>
<div class="carprice">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn18111518181754b768dafa98bd754201e0a7e774299b.png?imageView2/2">
<div class="carname">
suv
</div>
<div class="carprice">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn181115181910598eea3b5c66ade1022e5ba17cb07c9b.png?imageView2/2">
<div class="carname">
MPV
</div>
<div class="carprice">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn1903211203205c132654095589a10e2866b35ea76e89.png?imageView2/2">
<div class="carname">
面包车
</div>
<div class="carprice">
0.85万起
</div>
</div>
</div>
<div class="body6">
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn181115182708299d6f5f31f91331488cfaaea89a0007.png?imageView2/2">
<div class="carname1">
跑车
</div>
<div class="carprice1">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn18111518284074d9b6733ecd02121b5c73ff2855fb9b.png?imageView2/2">
<div class="carname1">
SUV
</div>
<div class="carprice1">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn181115183038a030b53c8749241ec9b99d0927b4d8bf.png?imageView2/2">
<div class="carname1">
MPV
</div>
<div class="carprice1">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn1811151825247ac56493aac3d8714bd381ed8385251f.png?imageView2/2">
<div class="carname1">
两厢轿车
</div>
<div class="carprice1">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn181115182640a9f97dda2c103e942773c4ff9588329c.png?imageView2/2">
<div class="carname1">
三厢轿车
</div>
<div class="carprice1">
0.85万起
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn19032112012283e9682e6d99f7071614a429f9632490.png?imageView2/2">
<div class="carname1">
面包车
</div>
<div class="carprice1">
0.85万起
</div>
</div>
</div>
<div class="body7">
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn18111518525148272f676b2f2e98eb13475b9901a76c.png?imageView2/2">
<div class="carname1">
宝马5系列
</div>
<div class="carprice1">
成交价21.3万
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn181115185503faaa25ac2c78a0c08da9938e4b34d645.png?imageView2/2">
<div class="carname1">
本田雅阁
</div>
<div class="carprice1">
成交价13.5万
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn18111518560687ecfe2622d5e06c6d01a2a6dd20ddeb.png?imageView2/2">
<div class="carname1">
大众高尔夫
</div>
<div class="carprice1">
成交价6.8万
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn1811151913451b02227aa924a6b8c8122fa4aca99b39.png?imageView2/2">
<div class="carname1">
奔驰GLK级
</div>
<div class="carprice1">
成交价22.9万
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn181115191425c6616455f8c9303288008a8e8da138b6.png?imageView2/2">
<div class="carname1">
雪佛兰迈锐宝
</div>
<div class="carprice1">
成交价7.3万
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn1811151915145e10f96d1b128a474a5267783a4eae12.png?imageView2/2">
<div class="carname1">
马自达昂克赛拉
</div>
<div class="carprice1">
成交价8.66万
</div>
</div>
</div>
<div class="body8">
<div class="body51">
<img src="https://image1.guazistatic.com/qn1811151916584ead660ab471cde379611c2c1af33f54.png?imageView2/2">
<div class="carname">
5万内练手车
</div>
<div class="carprice">
每天只需几十元
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn181115191718ad814f72b8061226554eb9653c161843.png?imageView2/2">
<div class="carname">
工薪族最爱
</div>
<div class="carprice">
月供只要1500
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn181115191842839fa4a4f94d77120cf4e602b0ecafbd.png?imageView2/2">
<div class="carname">
SUV家庭代步首选
</div>
<div class="carprice">
同首付，买辆宽敞的
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn18111519185812383e73e8109c6a49bd8816bee98938.png?imageView2/2">
<div class="carname">
准新车
</div>
<div class="carprice">
低首付高品质
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn181227200452df5d498ed1e9137ff44dc12e663db274.png?imageView2/2">
<div class="carname">
奔驰宝马开回家
</div>
<div class="carprice">
首付不到5万元
</div>
</div>
<div class="body51" href="">
<img src="https://image1.guazistatic.com/qn1811151920537af84bd6a253fb661c771360b6543b12.png?imageView2/2">
<div class="carname">
车主急售优惠
</div>
<div class="carprice">
买的早不如刚刚好
</div>
</div>
</div>
</div>
<div class="index-body-gray">
<div class="hotselfcar">
热卖车型
</div>
<ul class="hotselfcar-more">
<li id="like1"><span>猜你喜欢</span></li>
<li id="importcar1"><span>严选车</span></li>
<li id="newcar1"><span>最新上架</span></li>
<li id="onself1"><span>降价急售</span></li>
<li id="mustnewcar1"><span>准新车</span></li>
<li id="suv1"><span>SUV</span></li>
<li id="liangshouche1"><span>练手车</span></li>
</ul>
<!-- 猜你喜欢 -->
<div class="carlist-box" id="car1">
<ul class="carlist-ew">
<li>
<a href="ww" target="_blank">
<img src="https://image.guazistatic.com/gz01190317/13/49/059f2aa48d40cbf7852fb8437340b437.jpg@base@tag=imgScale&w=287&h=192&c=1&m=2&q=88" />
<div class="car-info">
<h2 class="t">奥迪A6L 2009款 2.0 TFSI 基本型</h2>
<div class="t-i">
2011
<span class="icon-pad">|</span>
17.5万公里
<span class="icon-pad">|</span>
重庆
</div>
<div class="t-price">
<p>
18.00
<span>万</span>
</p>
<i class="i-red">急售</i>
<em class="line-througth">37.80万</em>
</div>
</div>
</a>
</li>
<li>
<a href="ww" target="_blank">
<img src="https://image.guazistatic.com/gz01190317/13/49/059f2aa48d40cbf7852fb8437340b437.jpg@base@tag=imgScale&w=287&h=192&c=1&m=2&q=88" />
<div class="car-info">
<h2 class="t">奥迪A6L 2009款 2.0 TFSI 基本型</h2>
<div class="t-i">
2011
<span class="icon-pad">|</span>
17.5万公里
<span class="icon-pad">|</span>
重庆
</div>
<div class="t-price">
<p>
18.00
<span>万</span>
</p>
<i class="i-red">急售</i>
<em class="line-througth">37.80万</em>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- 严选车 -->
<div class="carlist-box-1" id="car2">
<ul class="carlist-ew">
<li>
<a href="ww" target="_blank">
<img src="https://image.guazistatic.com/gz01190317/13/49/059f2aa48d40cbf7852fb8437340b437.jpg@base@tag=imgScale&w=287&h=192&c=1&m=2&q=88" />
<div class="car-info">
<h2 class="t">奥迪A6L 2009款 2.0 TFSI 基本型</h2>
<div class="t-i">
2011
<span class="icon-pad">|</span>
17.5万公里
<span class="icon-pad">|</span>
重庆
</div>
<div class="t-price">
<p>
18.00
<span>万</span>
</p>
<i class="i-red">急售</i>
<em class="line-througth">37.80万</em>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="carlist-more">
<a>
更多好车
<i class="icon-morecar"></i>
</a>
</div>
<div class="maodounewcar">
<div class="maodoutital">
<h3>毛豆新车</h3>
</div>
<ul class="maodoukapian">
<li class="maodoukapian-left w1200">
<a>
<img src="https://image1.guazistatic.com/qn18110911494912993054599665c121867e8d33faa46a.png?imageView2/2" />
</a>
</li>
<li class="maodoukapian-left2 w1200" id="left2">
<a>
<img src="https://image1.guazistatic.com/qn1812272001563867bdf5e6e568c32baa88c7922d1b02.png?imageView2/2" />
<div class="capiantext w1400">
<p>1万开新车</p>
<span>优质价低</span>
</div>
</a>
</li>
<li class="maodoukapian-top w1500" id="top">
<a>
<img src="https://image1.guazistatic.com/qn181227170248e4a541c2ee17d80371666f75aef55354.png?imageView2/2" />
<div class="capiantext w15001">
<p>1万开新车</p>
<span>优质价低</span>
</div>
</a>
</li>
<li class="maodoukapian-botton w1500" id="botton">
<a>
<img src="https://image1.guazistatic.com/qn181227200220af31a7a8c79ef8208aa961c7bb5839b8.png?imageView2/2" />
<div class="capiantext w15001">
<p>1万开新车</p>
<span>优质价低</span>
</div>
</a>
</li>
<li class="maodoukapian-right w1200" id="right">
<a>
<img src="https://image1.guazistatic.com/qn1812271703149280569415649c5b9192439686a4fa1e.png?imageView2/2" />
<div class="capiantext w1300">
<p>爆款SUV</p>
<span>月供1800元起</span>
</div>
</a>
</li>
</ul>
</div>
<!-- 图片轮播 -->
<!-- 轮播1 -->
<div class="alllunbo">
<div class="guazi-lunbo" id="guazi-lunbo1">
<div class="lunbo-photo w1100" id="k1">
<img src="https://sta.guazistatic.com/static/c2c/web/index/buy-step-order.jpg" width="100%" height="400px">
</div>
<div class="lunbo-photo w1100" id="k2">
<img src="https://sta.guazistatic.com/static/c2c/web/index/buy-step-see.jpg" width="100%" height="400px">
</div>
<div class="lunbo-photo w1100" id="k3">
<img src="https://sta.guazistatic.com/static/c2c/web/index/buy-step-contract.jpg" width="100%" height="400px">
</div>
<div class="lunbo-photo w1100" id="k4">
<img src="https://sta.guazistatic.com/static/c2c/web/index/buy-step-deal.jpg" width=" 100%" height="400px">
</div>
<div class="lunbo-fugai" id="lunbo-fugai1">
</div>
</div>
<!-- 轮播2 -->
<div class="guazi-lunbo" id="guazi-lunbo2">
<div class="lunbo-photo w1100" id="Z1">
<img src="https://sta.guazistatic.com/static/c2c/web/index/sell-step-info.jpg" width="100%" height="400px">
</div>
<div class="lunbo-photo w1100" id="Z2">
<img src="https://sta.guazistatic.com/static/c2c/web/index/sell-step-service.jpg" width="100%" height="400px">
</div>
<div class="lunbo-photo w1100" id="Z3">
<img src="https://sta.guazistatic.com/static/c2c/web/index/sell-step-see.jpg" width="100%" height="400px">
</div>
<div class="lunbo-photo w1100" id="Z4">
<img src="https://sta.guazistatic.com/static/c2c/web/index/sell-step-deal.jpg" width=" 100%" height="400px">
</div>
<div class="lunbo-fugai" id="lunbo-fugai2">
</div>
</div>
<!-- 文字 -->
<div class="lunbo-text">
<a id="buy-car1">买车流程 </a>
<em> | </em>
<a id="buy-car2">卖车流程</a>
</div>
<!-- 轮播 -->
<!-- 买车流程 -->
<div class="lunbo-bigtext" id="lunbo-bigtext1">
<div class="w1224" id="w1">
<p class="w1222">预约看车</p>
<p class="w1223">拨打400-069-6530或在线预约
</div>
<div class="w1224" id="w2" style="display: none;">
<p class="w1222">专人带看</p>
<p class="w1223">瓜子将安排售车顾问陪同您看车
</div>
<div class="w1224" id="w3" style="display: none;">
<p class="w1222">签署合同</p>
<p class="w1223">签署三方合同（买家、卖家、瓜子二手车），支付定金
</div>
<div class="w1224" id="w4" style="display: none;">
<p class="w1222">交易过户</p>
<p class="w1223">协助过户，支付车款，好车开回家
</div>
</div>
<div class="lunbo-smallpictrue" id="lunbo-smallpictrue1">
<div class="lunbo-smallphoto" id="T1">
<img id="Q1" src="img/icon_phonegray.png">
<img id="Y1" class="w1111" src="img/icon_phonegreey.png">
<p>预约看车</p>
</div>
<span> </span>
<div class="lunbo-smallphoto" id="T2">
<img id="Q2" src="img/icon_eyegray.png">
<img id="Y2" class="w1111" src="img/icon_eyegreey.png">
<p>带人专看</p>
</div>
<span> </span>
<div class="lunbo-smallphoto" id="T3">
<img id="Q3" src="img/icon_bookgray.png">
<img id="Y3" class="w1111" src="img/icon_bookgreey.png">
<p>签署合同</p>
</div>
<span> </span>
<div class="lunbo-smallphoto" id="T4">
<img id="Q4" src="img/icon_shugray.png">
<img id="Y4" class="w1111" src="img/icon_shugreey.png">
<p>交易过户</p>
</div>
</div>
<!-- 卖车流程 -->
<div class="lunbo-bigtext" id="lunbo-bigtext2">
<div class="w1224" id="W1">
<p class="w1222">在线预约</p>
<p class="w1223">评估师免费上门检测
</div>
<div class="w1224" id="W2" style="display: none;">
<p class="w1222">全网代售</p>
<p class="w1223">海量卖家快速售出
</div>
<div class="w1224" id="W3" style="display: none;">
<p class="w1222">三方约看</p>
<p class="w1223">平均七日成交</p>
</div>
<div class="w1224" id="W4" style="display: none;">
<p class="w1222">签约过户</p>
<p class="w1223">省心省时，全程陪同
</div>
</div>
<div class="lunbo-bigtext" id="lunbo-bigtext2">
<div class="w1224" id="w1">
<p class="w1222">在线预约</p>
<p class="w1223">评估师免费上门检测
</div>
<div class="w1224" id="w2" style="display: none;">
<p class="w1222">全网代售</p>
<p class="w1223">海量卖家快速售出
</div>
<div class="w1224" id="w3" style="display: none;">
<p class="w1222">三方约看</p>
<p class="w1223">平均七日成交
</div>
<div class="w1224" id="w4" style="display: none;">
<p class="w1222">签约过户</p>
<p class="w1223">省心省时，全程陪同
</div>
</div>
<div class="lunbo-smallpictrue" id="lunbo-smallpictrue2">
<div class="lunbo-smallphoto" id="T">
<img id="R1" src="img/icon_zaixianyuyuuegray.png">
<img id="F1" class="w1111" src="img/icon_zaixianyuyuegreen.png">
<p>在线预约</p>
</div>
<span> </span>
<div class="lunbo-smallphoto" id="T">
<img id="R2" src="img/icon_quanwangdaishougray.png">
<img id="F2" class="w1111" src="img/icon_quanwangyushougreen.png">
<p>全网代售</p>
</div>
<span> </span>
<div class="lunbo-smallphoto" id="T">
<img id="R3" src="img/icon_sanfangyuekangray.png">
<img id="F3" class="w1111" src="img/icon_sanfangyuekangreenn.png">
<p>三方约看</p>
</div>
<span> </span>
<div class="lunbo-smallphoto" id="T">
<img id="R4" src="img/icon_qiannyueguohugray.png">
<img id="F4" class="w1111" src="img/icon_qianyueguohugreen.png">
<p>签约过户</p>
</div>
</div>
</div>
</div>
<div class="guazi-problem">
<p>瓜子问答</p>
</div>
</div>
</div>
</div>
<!-- 右边侧栏 -->
<div class='footer-right'>
<div class="
icon">
<div class="icon-down"></div>
<div class="icon-weixin"></div>
<div class="icon-fankui"></div>
<div class="icon-phone"></div>
<div class="icon-jilu"></div>
<div class="icon-up"></div>
</div>
</div>
<div class="icon-down-zz">
开发中！！！！
</div>
<div class="icon-weixin-xx">
</div>
<div class="icon-fankui-zz">
对不起，不支持反馈！
</div>
<div class="icon-phone-dh">
<p>020-1556335664</p>
</div>
<!-- js部分 -->
<script type='text/javascript' src="js/zepto.min.js" charset='utf-8'></script>
<script type='text/javascript' src="js/body4.js" charset='utf-8'></script>
<script type="text/javascript">
var x = $('#index')
// var c=$('.head')
x.scroll(function() {
// consollog(x.scrollTop())
// 头部显示
if (x.scrollTop() > 100) {
$('.head').css('display', 'block')
} else {
$('.head').css('display', 'none')
}
// 返回顶部
if (x.scrollTop() > 400) {
$('.icon-up').css('display', 'block')
} else {
$('.icon-up').css('display', 'none')
}
})
// 点击返回顶部
$('.icon-up').click(function() {
x.scrollTop(0)
})
</script>
</body>
这个不是官网的，是我打的代码出来的，别误会哦！
4375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
