9.6-CSDN博客

本文链接：https://blog.csdn.net/a757919590/article/details/100970257

瓜子二手网
html：

瓜子二手车直卖网

宝骏510 2017款 1.5L 豪华型

2017年|3.2万公里

5.00万7.60万

宝马X1 2013款时尚型

2013年|7.1万公里

14.00万 30.90万

现代朗动 2015款 1.6L 领先型

2016年|4.8万公里

6.66万 12.60万

斯巴鲁森林人 2009款豪华版

2010年|16.8万公里

7.50万29.30万

长安悦翔V3 2012款豪华型

2014年|4.2万公里

2.90万 5.30万

日产天籁 2011款领先版

2010年|11.8万公里

7.80万 24.40万

奥迪A4L 2017款进取型

2017年|5.8万公里

21.10万 32.50万

宝骏730 2016款舒适型

2016年|4.3万公里

5.20 万8.40万

咨询电话：400-069-7632（周一至周日 8:00-21:00）
服务监督热线： 400-066-8780（周一至周日 9:00-21:00）

互联网违法或不良信息举报联系方式：
邮箱： jubao@guazi.com 电话：010-89191670

关注微信

下载APP

css代码：

html,
body {
margin: 0;
padding: 0;
font: 14px/1.5 Microsoft Yahei, arial, “sans-serif”;
}

/** 初始化 **/

h1,
h2,
h3,
dl,
dt,
dd,
p {
margin: 0;
padding: 0;
}

input {
padding: 0;
border: 0;
outline: none;
}

ul,
li {
margin: 0;
padding: 0;
list-style: none;
}

a {
text-decoration: none;
color: #40b964;
}

a:hover {
color: #40b964;
}

img {
width: 100%;
transition: all .5s linear;
}

img:hover {
width: 110%;
margin-top: -5%;
margin-left: -5%;
}

/** 公共 **/

.content {
margin: 0 auto;
width: 1200px;
}

.clearfix {
width: 100%;
height: 0;
clear: both;
font-size: 0;
}

/** 头部 **/

.header {
position: relative;
width: 100%;
height: 242px;
overflow: hidden;
background: #40b964 url(’…/images/top_bg.png’) center center/cover no-repeat;
}

.login {
float: right;
margin-top: 19px;
margin-left: 10px;
line-height: 16px;
}

.login a {
padding-left: 24px;
color: #fff;
background: url(’…/images/icon_user.png’) 3px center/16px no-repeat;
}

.login a:hover {
font-weight: bold;
}

.phone {
float: right;
margin-top: 19px;
margin-left: 30px;
padding: 0 15px 0 0;
line-height: 16px;
color: #fff;
}

h1.logo {
float: left;
width: 52px;
height: 52px;
}

h1.logo>a {
display: block;
width: 100%;
height: 100%;
background: url(…/images/logo.png) center center/100% no-repeat;
}

.nav {
float: right;
padding-top: 6px;
height: 50px;
overflow: hidden;
}

.nav>li {
float: left;
margin: 0 20px;
}

.nav>li>a {
display: block;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}

.nav>li>a:hover {
font-weight: bold;
}

.nav>li.active {
border-bottom: 2px solid #fff;
}

/.banner-title{
position:absolute;
left:50%;
top:86px;
margin-left:-442px;
width:414px;
height:32px;
background:transparent url(…/images/gzesc.png) center center/100% auto no-repeat;
}/

/.banner-so{
position:absolute;
left:50%;
top:146px;
margin-left:-442px;
border-radius:6px;
width:655px;
height:56px;
overflow:hidden;
background-color:#fff;
}/

.banner-so-input {
float: left;
margin-top: 6px;
padding-left: 20px;
width: 450px;
height: 44px;
line-height: 44px;
font-size: 18px;
}

.banner-so-button {
float: right;
margin-top: 6px;
margin-right: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
width: 105px;
height: 44px;
color: #fff;
font-size: 18px;
background-color: #3cb46d;
cursor: pointer;
}

/.spokesman {
position: absolute;
top: 42px;
left: 50%;
margin-left: 272px;
width: 170px;
height: 200px;
background: transparent url(…/images/shl.png) center top/ 100% auto no-repeat;
}/

.banner-title {
position: absolute;
margin-left: -442px;
height: 32px;
background: transparent url(…/images/gzesc.png) center center/100% auto no-repeat;
animation: banner_title_in 1s ease-in both;
}

.banner-so {
position: absolute;
left: 50%;
margin-left: -442px;
border-radius: 6px;
width: 655px;
height: 56px;
overflow: hidden;
background-color: #fff;
animation: banner_so_in 1.5s ease-in-out .6s both;
}

.spokesman {
position: absolute;
top: 42px;
width: 170px;
height: 200px;
background: transparent url(…/images/shl.png) center top/ 100% auto no-repeat;
animation: spokesman_in 1s ease-out .3s both;
}

/定义动画/

@keyframes banner_title_in {
0% {
top: 0;
left: 0;
margin-left: 0;
width: 0;
opacity: 0
}
100% {
left: 50%;
margin-left: -442px;
top: 86px;
width: 414px;
opacity: 1;
}
}

@keyframes banner_so_in {
0% {
top: 100%;
opacity: 0;
}
100% {
top: 146px;
opacity: 1;
}
}

@keyframes spokesman_in {
0% {
left: 100%;
margin-left: 0;
opacity: 0;
}
100% {
left: 50%;
margin-left: 272px;
opacity: 1;
}
}

/* 常见问题 */

.news-box {
padding-bottom: 38px;
width: 100%;
height: auto;
background-color: #f5f5f5;
}

.news {
border: 1px solid #e4e4e4;
width: 583px;
height: 264px;
background-color: #ffffff;
}

.news-left {
float: left;
margin: 37px 30px 0 0;
}

.news-right {
float: right;
margin-top: 37px;
}

.buy-title {
margin: -7px 0 0 15px;
width: 146px;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
background: url(’…/images/icon_list.png’) 0 0 no-repeat;
}

.news-left .buy-title {
background-position: -152px 0;
}

.news-list {
margin-top: 20px;
border-top: 1px dashed #e6e6e6;
}

.news-list>li {
padding: 6px 15px 6px 33px;
border-bottom: 1px dashed #e6e6e6;
}

.news-list>li>span {
float: right;
}

.news-list>li>a {
color: #666;
}

.news-list>li>a:hover,
.extra a:hover {
color: #40b964;
}

.news-icon {
padding: 3px;
margin-left: -12px;
margin-right: 6px;
vertical-align: super;
font-size: 0;
background: url(’…/images/icon_list.png’) 0 0 no-repeat;
}

.news-left .news-icon {
background-position: -308px -57px;
}

.news-right .news-icon {
background-position: -308px -45px;
}

.extra {
padding: 28px 15px 0 0;
text-align: right;
}

.extra a {
font-size: 16px;
color: #acacac;
}

/save-list/

.save {
margin: 16px -4px 16px 0;
}

.save-list {
float: left;
margin-right: 4px;
width: 397px;
height: 543px;
background-color: #f9f9fa;
}

.save-list>dt {
font-size: 0;
}

.save-list>dd {
width: 100%;
}

.save-t {
padding: 38px 0 16px 32px;
line-height: 20px;
color: #232d33;
font-size: 20px;
}

.save-c {
padding-left: 32px;
line-height: 15px;
color: #2e3d47;
font-size: 15px;
}

/advert-item/

.advert {
margin: 16px -8px;
}

.advert-item {
float: left;
margin: 0 8px;
width: 227px;
height: 346px;
overflow: hidden;
background-color: #f5f5f7;
}

.advert-item:hover {
box-shadow: 0 0 5px 2px #e6e6e6;
box-shadow: 0 5.5px 13px 0 rgba(0, 0, 0, .1);
}

.advert-item-right {
float: right;
}

.advert-item-top,
.advert-item-bottom {
width: 470px;
height: 165px;
}

.advert-item-bottom {
margin-top: 16px;
}

/product/

.product {
margin: 16px -10px;
}

dl.product-list {
float: left;
margin: 10px;
width: 285px;
height: 314px;
cursor: pointer;
transition: box-shadow 1s;
}

dl.product-list:hover {
box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .12);
}

dl.product-list:hover img {
width: 110%;
margin-left: -5%;
margin-top: -5%;
}

.product-list>dt {
font-size: 0;
width: 100%;
height: 190px;
overflow: hidden;
}

.product-list>dd {
/height:120px;/
/border:1px solid #c6c6c6;/
}

.pro-t {
padding: 20px 20px 6px;
font-size: 17px;
color: #495056;
font-weight: 400;
}

.pro-i {
padding: 4px 20px 2px;
color: #a5abb2;
font-size: 14px;
}

.pro-p {
padding: 0 20px;
height: 30px;
font-size: 20px;
color: #f95523;
}

.pro-p span {
font-size: 14px;
}

.pro-p em {
margin-top: 7px;
margin-left: 10px;
text-decoration: line-through;
font-size: 14px;
color: #a5abb2;
font-style: normal;
}

/footer/

.footer {
padding: 50px 0 30px;
background: #2a2c37;
font-size: 12px;
color: #b8b8b8;
}

.footer-logo {
width: 102px;
height: 90px;
float: left;
margin-left: 40px;
background: url(…/images/footer_logo.png) center center/100% no-repeat;
}

.phone-email {
float: left;
margin-left: 30px;
width: 378px;
}

.phone-email p {
margin-bottom: 12px;
}

.phone-email span {
margin-right: 12px;
}

dl.ewm-box {
float: left;
margin-right: 30px;
width: 85px;
height: 105px;
text-align: center;
}

dl.ewm-box>dt {
width: 85px;
height: 85px;
font-size: 0;
}

dl.ewm-box>dt>img {
width: 100%;
margin: 0;
}

.footer-info {
float: left;
width: 390px;
margin-left: 20px;
}

.info-linlk>li {
float: left;
margin-right: 12px;
font-size: 14px;
}

.info-linlk a,
.info-linlk a:hover {
color: #b8b8b8;
}

.info-linlk a:hover {
text-decoration: underline;
}

.footer-info>p {
margin: 5px 0;
}
————————————————