今天让做的瓜子二手网
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瓜子二手车直卖网</title>
<link rel="stylesheet" href="./css/style121402.css" />
</head>
<body>
<div class="header">
<div class="content">
<h1 class="logo"><a href="##"></a></h1>
<div class="login">
<a href="##">登录</a>
</div>
<div class="phone">
热线电话 400-069-7632
</div>
<ul class="nav">
<li class="active"><a href="##">首页</a></li>
<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="banner">
<div class="banner-title"></div>
<div class="banner-so">
<input class="banner-so-button" type="button" value="搜索" />
<input class="banner-so-input" type="text" placeholder="请输入搜索内容" />
</div>
</div>
<div class="spokesman"></div>
</div>
<div class="content">
<div class="advert">
<div class="advert-item advert-item-right">
<img src="./images/advert_car.png" alt="">
</div>
<div class="advert-item advert-item-left">
<img src="./images/advert_figure.png" alt="">
</div>
<div class="advert-item advert-item-left">
<img src="./images/advert_car1.png" alt="">
</div>
<div class="advert-item advert-item-top">
<img src="./images/advert_car2.png" alt="">
</div>
<div class="advert-item advert-item-bottom">
<img src="./images/advert_car3.png" alt="">
</div>
<div class="clearfix"></div>
</div>
<div class="product">
<dl class="product-list">
<dt><img src="./images/car_1.jpg" alt="宝骏510 2017款 1.5L 手动豪华型"></dt>
<dd>
<p class="pro-t">宝骏510 2017款 1.5L 豪华型</p>
<p class="pro-i">2017年|3.2万公里</p>
<p class="pro-p">5.00万7.60万</p>
</dd>
</dl>
<dl class="product-list">
<dt><img src="./images/car_2.jpg" alt="宝马X1 2013款 sDrive18i 时尚型"></dt>
<dd>
<p class="pro-t">宝马X1 2013款 时尚型</p>
<p class="pro-i">2013年|7.1万公里</p>
<p class="pro-p">14.00万 30.90万</p>
</dd>
</dl>
<dl class="product-list">
<dt><img src="./images/car_3.jpg" alt="现代 朗动 2015款 1.6L 手动领先型"></dt>
<dd>
<p class="pro-t">现代 朗动 2015款 1.6L 领先型</p>
<p class="pro-i">2016年|4.8万公里</p>
<p class="pro-p">6.66万 12.60万</p>
</dd>
</dl>
<dl class="product-list">
<dt><img src="./images/car_4.jpg" alt="斯巴鲁 森林人 2009款 2.5XS 自动豪华版"></dt>
<dd>
<p class="pro-t">斯巴鲁 森林人 2009款 豪华版</p>
<p class="pro-i">2010年|16.8万公里</p>
<p class="pro-p">7.50万29.30万</p>
</dd>
</dl>
<dl class="product-list">
<dt><img src="./images/car_5.jpg" alt="长安 悦翔V3 2012款 1.3L 手动豪华型 国IV"></dt>
<dd>
<p class="pro-t">长安 悦翔V3 2012款 豪华型</p>
<p class="pro-i">2014年|4.2万公里</p>
<p class="pro-p">2.90万 5.30万 </p>
</dd>
</dl>
<dl class="product-list">
<dt><img src="./images/car_6.jpg" alt="日产 天籁 2011款 2.5L XL领先版"></dt>
<dd>
<p class="pro-t">日产 天籁 2011款 领先版</p>
<p class="pro-i">2010年|11.8万公里</p>
<p class="pro-p">7.80万 24.40万 </p>
</dd>
</dl>
<dl class="product-list">
<dt><img src="./images/car_7.jpg" alt="奥迪A4L 2017款 40 TFSI 进取型"></dt>
<dd>
<p class="pro-t">奥迪A4L 2017款 进取型</p>
<p class="pro-i">2017年|5.8万公里</p>
<p class="pro-p">21.10万 32.50万</p>
</dd>
</dl>
<dl class="product-list">
<dt><img src="./images/car_8.jpg" alt="宝骏730 2016款 1.5T 手动舒适型 7座"></dt>
<dd>
<p class="pro-t">宝骏730 2016款 舒适型</p>
<p class="pro-i">2016年|4.3万公里</p>
<p class="pro-p">5.20 <span>万</span><em>8.40万</em></p>
</dd>
</dl>
<div class="clearfix"></div>
</div>
</div>
<div class="footer">
<div class="content">
<div class="footer-logo">
</div>
<div class="phone-email">
<p>
咨询电话：<span>400-069-7632</span>（周一至周日 8:00-21:00） <br> 服务监督热线： <span>400-066-8780</span>（周一至周日 9:00-21:00）
</p>
<p>
互联网违法或不良信息举报联系方式： <br> 邮箱： <span>jubao@guazi.com</span> 电话：<span>010-89191670</span>
</p>
</div>
<dl class="ewm-box">
<dt><img src="./images/wx.png" alt="关注微信" /></dt>
<dd>关注微信</dd>
</dl>
<dl class="ewm-box">
<dt><img src="./images/wx.png" alt="下载APP" /></dt>
<dd>下载APP</dd>
</dl>
<div class="footer-info">
<ul class="info-linlk">
<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>
<li><a href="##">服务条款</a></li>
<li><a href="##">营业执照</a></li>
<div class="clearfix"></div>
</ul>
<p>Copyright 2018 www.guazi.com All Rights Reserved</p>
<p>京ICP备15053955号 ICP证151071号</p>
<p>京公网安备11010802020161号</p>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
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;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
