汽车商务网站页面设计

最新推荐文章于 2024-03-14 12:32:11 发布
最新推荐文章于 2024-03-14 12:32:11 发布
阅读量226 收藏 1
点赞数
文章标签： 汽车 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48024575/article/details/123260741
版权

这里写自定义目录标题

汽车商务平台网页设计

网页效果展示
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

css

style.css

#page-preloader {
	width: 100%;
	background-color: #222;

}

* {
	margin: 0;
	padding: 0;
}

.box1 {
	width: 1170px;
	height: 50px;
	line-height: 50px;
	background-color: #222;
}

#page-preloader .box1 li {
	padding-right: 20px;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: #fff;
	list-style: none;
	text-decoration: none;
	float: left;
}

#list1 img {
	margin-right: 20px;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.clear {
	clear: both;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.box1-1-2-1 {
	width: 250px;
	height: 180px;
	background-color: rgba(0, 0, 0, 0.7);
	float: left;
	position: absolute;
	bottom: -150px;
	left: 690px;
	display: none;
}

.box2:hover .box1-1-2-1 {
	display: block;
	z-index: 11;
}

.box1-1-3 {
	text-align: center;
	width: 90px;
	height: 40px;
	font-size: 16px;
	color: #fff;
	margin: 5px 15px;
}

.box2,
.box3 {

	width: 100%;
	padding: 5px 0;
}

.box2-1 {
	width: 1170px;
	height: 91px;
}

.box2 {
	background-color: #FFFFFF;
}

.box2-2 {
	margin-left: 15px;
	margin-right: 100px;
	padding: 15px 0;
}

.box2-3 li {

	color: #222222;
	list-style: none;
	text-decoration: none;
	float: left;
	margin: 0 1px;
	line-height: 31px;
	font-size: 14px;
	font-weight: 600;
}

.box2-3 li a {
	background-color: #FFFFFF;
	color: #222222;
	list-style: none;
	text-decoration: none;
	float: left;
	margin: 0 1px;
	padding: 30px 15px;
	line-height: 31px;
	font-size: 14px;
	font-weight: 600;
}

.box2-3 li a:hover {
	background-color: #d01818;
	color: #FFFFFF;
}

.box2-4-1 {
	width: 112px;
	height: 44px;
}

.box2-4-1 a {
	text-decoration: none;
	list-style: none;
	background-color: #D01818;
	color: #FFFFFF;
}

.box2-4 li {
	list-style: none;
	text-decoration: none;
	float: left;
}

.playbox {
	width: 100%;
	height: 700px;
	overflow: hidden;
}

ul {
	list-style: none;
}

.relative {
	position: relative;
}

.zhezhao1 {
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 700px;
	z-index: 4;
	position: absolute;
	top: 0;
	left: 0;
}

.picbox {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
}

.pixapp {
	width: 680px;
	height: 700px;
	position: absolute;
	top: 180px;
	right: 150px;
	z-index: 5;
}

.picapp1 {
	width: 117px;
	height: 34px;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	line-height: 33px;
	background-color: #D01818;
	color: #fefdfd;
	position: absolute;
	top: 25px;
	left: 0;

}

.picapp2 {

	position: absolute;
	top: 0;
	left: 130px;
}

.picapp2 h2 {}

.starting {
	border: 2px #FEFDFD solid;
	color: #FEFDFD;
	margin-right: 13px;
	margin-bottom: 20px;
	width: 193px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	position: absolute;
	top: 200px;
}

.starting:hover {
	border: 2px #FF0000 solid;
	color: #FF0000;
}

.book {
	text-align: center;
	background-color: #D01818;
	color: #FEFDFD;
	margin-right: 13px;
	margin-bottom: 20px;
	width: 120px;
	height: 54px;
	line-height: 50px;
	position: absolute;
	left: 210px;
	top: 200px;
}

.book:hover {
	background-color: #FF0000;
	color: #FEFDFD;

}

.picapp2 p,
.picapp2 h2 {
	color: #FFFFFF;
	font-size: 50px;
}

.line {
	border: 2px #FFFFFF solid;
	position: absolute;
	top: 290px;
	width: 65px;
}

.line1 {
	border: 2px #D01818 solid;
	position: absolute;
	bottom: 60px;
	left: 50px;
	width: 20px;
}

.box3 {
	height: 730px;
	position: relative;
	z-index: 6;
}

.box3-1 {
	width: 1140px;
	height: 343px;
	position: absolute;
	top: -40px;
	left: 380px;
	z-index: 7;
	box-shadow: 0 0 20px rgb(0 0 0 / 45%);
	overflow: hidden;
}

.largest {
	width: 380px;
	height: 340px;
	position: absolute;
	top: 0;
	background-color: #f4f4f4;
}

.largest:nth-of-type(1) {
	left: 0;
}

.largest:nth-of-type(2) {
	left: 380px;
}

.largest:nth-of-type(3) {
	left: 760px;
}

.largest h3 {
	margin: 0 50px;
	color: #222222;
	font-size: 14px;
	margin-bottom: 15px;
}

.largest p {
	margin: 0 50px;
	color: #969696;
	font-size: 14px;
}

.largest img {
	width: 55px;
	height: 55px;
	margin: 60px 0px 30px 50px;
}

.box3-2 {
	width: 1140px;
	height: 350px;
	position: absolute;
	left: 380px;
	bottom: 0;
}

.find {
	text-align: center;
	width: 100%;
	height: auto;
}

.find h2,
.feature h2,
.about h2 {
	margin-top: 0;
	margin-bottom: 2px;
	font-size: 48px;
	font-weight: 320;
	line-height: 1.08;
}

.find p,
.feature p,
.about p {
	margin-bottom: 100px;
	font-size: 16px;
	line-height: 1.875;
	color: #888;
}

.line3,
.line4,
.line7 {
	border-bottom: 1px #D01818 solid;
	width: 40px;
	position: absolute;

}

.line7:nth-of-type(1) {
	left: 27px;
	top: 100px;
}

.line7:nth-of-type(2) {
	left: 2px;
	top: 108px;
}

.line7:nth-of-type(3) {
	left: 52px;
	top: 108px;
}

.line3:nth-of-type(1) {
	left: 550px;
	bottom: 250px;
}

.line3:nth-of-type(2) {
	left: 525px;
	bottom: 242px;
}

.line3:nth-of-type(3) {
	left: 575px;
	bottom: 242px;
}

.line4:nth-of-type(1) {
	left: 931px;
	bottom: 65px;
}

.line4:nth-of-type(2) {
	left: 906px;
	bottom: 58px;
}

.line4:nth-of-type(3) {
	left: 956px;
	bottom: 58px;
}

.box4 {
	width: 100%;
	background-color: #f4f4f4;
}

.input {
	width: 1140px;
	height: 140px;
	padding: 70px 0;
}

select {
	width: 260px;
	height: 50px;
	padding: 0 20px;
	font-size: 14px;
	line-height: 48px;
	vertical-align: top;
	text-transform: inherit;
	color: #222;
	border: 1px solid #eee;
	border-radius: 0;
	background-color: #fff;
	margin: 0 30px 40px 0;
}

input {
	background-color: #D01818;
	color: #FFFFFF;
	height: 50px;
	font-weight: bold;
	font-size: 14px;
	line-height: 46px;
	text-align: center;
	width: 166px;
	height: 50px;
	margin-bottom: 20px;
	list-style: none;
}

.search1 {
	margin-top: 25px;
	margin-left: 100px;
	width: 170px;
	height: 140px;
	text-align: center;
}

.search1 a {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;

	transition: all .3s;
	color: #222;
	line-height: 1;
	font-family: Poppins;
	text-decoration: underline;
}

.input1 {
	width: 290px;
	height: 140px;
	float: left;
}

.box5 {
	height: 890px;
	width: 100%;
	background-color: #ffffff;
}

.feature {
	width: 100%;
	height: 170px;
	text-align: center;
	position: relative;
	padding-top: 100px;
}

.msrp {
	width: 100%;
	height: 396px;
	position: relative;
}

.msrpbox {
	width: 357px;
	height: 410px;
	position: absolute;
	top: 0;
	overflow: hidden;
	z-index: 2;
}

.msrpbox:hover .zhezhao6 {
	z-index: 3;
}

.msrpbox:nth-of-type(1) .zhezhao6 {
	transition: all 1s linear;
	transform: rotate(90deg);
	transform-origin: right top;
}

.msrpbox:nth-of-type(1):hover .zhezhao6 {
	transform: rotate(0deg);
}

.msrpbox:nth-of-type(2) .zhezhao6 {
	transform: scale(0);
	transition: all 1s linear;
}

.msrpbox:nth-of-type(2):hover .zhezhao6 {
	transform: scale(1);
}

.msrpbox:nth-of-type(3) .zhezhao6 {
	transform: translate(96px, 0);
	transition: all 1s linear;
}

.msrpbox:nth-of-type(3):hover .zhezhao6 {
	transform: translate(0, 0);
}

.zhezhao6 {
	width: 100%;
	height: 218px;
	color: #FFFFFF;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.6);
	position: absolute;
	z-index: -1;
}

.msrpbox img {
	width: 357px;
	height: 218px;
}

.msrpbox:nth-of-type(1) {
	left: 0;
}

.msrpbox:nth-of-type(2) {
	left: 386px;
}

.msrpbox:nth-of-type(3) {
	left: 772px;
}

.msrpbox:nth-of-type(4) {
	left: 1158px;
}

.msrpbox:nth-of-type(5) {
	left: 1544px;
}

.price {
	position: absolute;
	right: 10px;
	top: 170px;
	background-color: #d01818;
	padding: 0 15px;
	font-family: Poppins;
	font-weight: 600;
	line-height: 38px;
	color: white;
}

.mi {
	width: 357px;
	height: 48px;
	margin-bottom: 34px;
}

.mi ul {
	display: table;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 6px;
	font: 500 12px Poppins;
	color: #888;
	border: 1px solid #eee;
}

.mi li {
	display: table-cell;
	line-height: 35px;
	padding-top: 15px;
	height: 35px;
	text-align: center;
	border-right: 1px solid #eee;
	font: 500 13px Poppins;
	color: #888;

}

.mi li:hover {

	color: #D01818;

}

.line5 {
	border: 2px #D01818 solid;
	position: absolute;
	bottom: 77px;
	left: 0;
	width: 8px;
}

.line9 {
	border: 2px #D01818 solid;
	position: absolute;
	top: 12px;
	left: 0;
	width: 8px;
}

.lexus {
	width: 356px;
	height: auto;
}

.lexus h3 {
	padding-left: 27px;
	margin-bottom: 20px;
}

.lexus a {
	color: #222;
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
	font-family: Poppins;
}

.lexus p {
	font: 12px/1.7143 'Hind';
	color: #444;
}

.box6 {
	width: 100%;
	height: 550px;
	background: url(../img/content/bg/bg-1.jpg) repeat fixed center;
	position: relative;

}

.zhezhao2 {
	width: 100%;
	height: 550px;
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	z-index: 2;
}

.box6 .feature p,
.box6 .feature h2 {
	color: #FFFFFF;
}

.box7 {
	width: 100%;
	height: 431px;
	position: relative;
	z-index: 4;
}

.balancing {
	width: 263px;
	height: 373px;
	position: absolute;
	box-shadow: 0 0 20px rgb(0 0 0 / 45%);
	top: -283px;
	color: #222222;
	background-color: #F4F4F4;
	z-index: 5;
	text-align: center;
}

.balancing:hover {
	background-color: #D01818;
	color: #FFFFFF;
}

.balancing:nth-of-type(1) {
	left: 380px;
}

.balancing:nth-of-type(2) {
	left: 673px;
}

.balancing:nth-of-type(3) {
	left: 966px;
}

.balancing:nth-of-type(4) {
	left: 1259px;
}

.balancing img {
	width: 65px;
	height: 65px;
	margin-top: 45px;
	margin-bottom: 25px;
}

.h3x {
	margin-top: 0;
	margin-bottom: 27px;
	font-size: 16px;
	font-weight: 600;
}

strong {
	margin-top: 5px;
	font-size: 20px;
}

.p {
	font: 12px/1.7143 'Hind';
	color: #444;
	margin-bottom: 7px;
	padding: 0 30px;
}

.balancing:hover .p {
	color: #FFFFFF;
}

.line6 {
	border: 1px #D01818 solid;
	position: absolute;
	bottom: 55px;
	left: 121px;
	width: 18px;
}

.balancing:hover .line6 {
	border: 1px #ffffff solid;
}

.box7-1 {
	width: 100%;
	height: 100%;
	position: relative;
}

.stock {
	height: 93px;
	width: 267px;
	position: absolute;
	text-align: center;
	bottom: 115px;
}

.stock:nth-of-type(1) {
	left: 380px;
}

.stock:nth-of-type(2) {
	left: 673px;
}

.stock:nth-of-type(3) {
	left: 966px;
}

.stock:nth-of-type(4) {
	left: 1259px;
}

.stock h3 {
	color: #d01818;
}

.stock .p {
	margin-bottom: 3px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: #444;
}

.box8 {
	width: 100%;
	height: 891px;
	position: relative;
	background-image: url(../img/content/bg/bg-5.jpg);
	background-size: cover;
	z-index: 1;
}

#tit {
	display: block;
	font-size: 1.5em;
	color: #FFFFFF;
}

.zhezhao3 {
	position: absolute;
	width: 100%;
	height: 891px;
	background-color: rgba(254, 254, 254, 0.7);
	z-index: 2;
}

.container {
	width: 1140px;
	height: 510px;
	position: relative;
}

.ford0 {
	width: 458px;
	height: 505px;
	background-color: #ffffff;
}

.ford {
	width: 458px;
	height: 100px;
	margin-bottom: 1px;
	background-color: #ececec;

}

.ford:hover {
	background-color: #D01818;

}

.ford:hover .lines {
	color: #FFFFFF
}

.ford h4 {
	margin-bottom: 4px;
	font: 600 16px Poppins;
	white-space: nowrap;
	letter-spacing: .01em;
	color: #222;
	padding: 25px 30px 5px 0px;
}

.ford span {
	padding: 1px 30px 25px 50px;
}

.ford span,
.ford span strong {
	font-weight: 500;
	white-space: nowrap;
	color: #888;
	font: 14px/1.7143 'Hind';
}

.ford span strong {
	font-weight: 700;
}

.fordpic {
	width: 682px;
	height: 505px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 459px;
}

.order {
	text-align: center;
	padding-top: 10px;
	width: 40px;
	height: 30px;
	position: fixed;
	left: 0;
	top: 140px;
	background-color: #FFFFFF;
	border: #DDDDDD 1px solid;
	z-index: 10;
}

.ford h4 .lines {
	font-size: 1rem;
	font-weight: bolder;
	color: #D01818;
	padding: 0 15px;
}

.box9 {
	width: 100%;
	height: 976px;
	background-color: #FFFFFF;
}

.motorland {
	width: 1140px;
	height: 762px;
	padding: 100px 15px;
	position: relative;
}

.about {
	height: 100%;
	width: 600px;
	text-align: left;
	position: absolute;

}

.visited {
	width: 585px;
	height: 306px;
	text-align: left;
	padding: 81px 0;
	margin: 60px 0;
}

.visited1 {
	font: 600 18px/1.2 Poppins;
	letter-spacing: .01em;
	color: #222;
}

.visited2 {
	margin-bottom: 20px;
	font: 300 24px Poppins;
	color: #444;
}

.visited .visited3 {
	margin: 0 0 50px;
	font: 14px/1.7143 'Hind';
	color: #444;
}

.btn:hover {
	box-shadow: 0 0 1px 0 #000;
	text-shadow: 0 0 1px #000;
}

.btn {
	overflow: hidden;
	display: inline-block;
	height: 44px;
	margin-bottom: 0;
	padding: 0 20px;
	font: 600 12px/40px Poppins;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 2px solid transparent;
	white-space: nowrap;
	user-select: none;
	text-transform: uppercase;
	color: white;
	transition: all .3s;
	letter-spacing: .05em;
	border-radius: 2px;
}

.visited a,
.buy a {
	text-decoration: none;
}

.btn-dark {
	background-color: #222;
}

.btn-red {
	background-color: #D01818;
}

.aboutpic {
	height: 100%;
	left: 665px;
	text-align: left;
	position: absolute;
	padding-top: 105px;
}

.aboutend {
	height: 100%;
	left: 1029px;
	width: 339px;
	position: absolute;
	padding-top: 164px;
}

.aboutend1 {
	margin-bottom: 34px;
	padding-left: 77px;
	width: 262px;
	height: 138px;

}

.aboutend1:hover .aboutend3 {
	color: #D01818;
}

.aboutend1:hover .aboutend4 {
	background-color: #000000;
}

.aboutend2 {
	margin-bottom: 14px;
	font: 600 16px Poppins;
	color: #222;
}

.aboutend3 {
	font: 14px/1.7143 'Hind';
	color: #444;
}

.aboutend4 {
	display: inline-block;
	width: 20px;
	height: 3px;
	background-color: #D01818;
}

.frame {
	width: 60px;
	padding-top: 164px;
	left: 1029px;
	height: 100%;
	position: absolute;
}

.aboutendpic {
	width: 58px;
	height: 58px;
	position: absolute;
	left: 0px;

}

.aboutendpic img {
	width: 58px;
	height: 58px;
}

.aboutendpic:nth-of-type(1) {
	top: 164px;
}

.aboutendpic:nth-of-type(2) {
	top: 342px;
}

.aboutendpic:nth-of-type(3) {
	top: 506px;
}

.tobuy {
	width: 100%;
	height: 464px;
	position: relative;
}

.tobuy1 {
	width: 950px;
	height: 424px;
	margin: 20px 0;
	background: url(../img/content/bg/bg-4.jpg) no-repeat fixed;
	position: absolute;
	background-size: cover;

}

.tozhe,
.tozhe1 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.tozhe-red {
	background-color: rgba(255, 0, 0, 0.5);
}

.tozhe-black {
	background-color: rgba(0, 0, 0, 0.5);
}

.tobuy2 {
	position: absolute;
	left: 950px;
	width: 950px;
	height: 464px;
	background: url(../img/content/bg/bg-3.jpg) no-repeat fixed;
	background-size: cover;
}

.buy {
	margin: 100px 0 0 380px;
	position: relative;
	font: 14px/1.7143 'Hind';
	width: 423px;
	height: 234px;
}

.tozhe-black .buy {
	margin: 100px 0 0 200px;
}

.buy1 {
	margin-top: 5px;
	margin-bottom: 20px;
	font-size: 18px;
	letter-spacing: .03em;
	color: #fff;
	line-height: 1.1;
	font-weight: 600;
	font-family: Poppins;
}

.buy2 {
	margin-top: 10px;
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .03em;
	color: #fff;
}

.btn-white {
	margin-top: 34px;
	padding: 0 40px;
	border-color: #fff;
	background-color: transparent;
}

.buy3 {
	color: #fff;
}

.team {
	width: 100%;
	height: 986px;

}

.teambox {
	width: 1140px;
	height: 100%;
}

.eteam1 {
	width: 1140px;
	height: 522px;
}


.teambox .msrp {
	width: 100%;
	height: 396px;
	position: relative;
}

.teambox .msrpbox {
	width: 360px;
	height: 552px;
	position: absolute;
	top: 0;
	overflow: hidden;
}

.teambox .msrpbox img {
	width: 360px;
	height: 280px;
}

.teambox .msrpbox:nth-of-type(1) {
	left: 0;
}

.teambox .msrpbox:nth-of-type(2) {
	left: 386px;
}

.teambox .msrpbox:nth-of-type(3) {
	left: 772px;
}

.teambox .price {
	position: absolute;
	right: 20px;
	top: 220px;
	background-color: #d01818;
	padding: 0 15px;
	font-family: Poppins;
	font-weight: 600;
	line-height: 38px;
	color: white;
}

.teambox .msrpbox .mi {
	width: 356px;
	height: 40px;
	margin-bottom: 34px;
}

.teambox .msrpbox .mi ul {
	display: table;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 6px;
	font: 14px/1.7143 'Hind';
	color: #444;
	border: 1px solid #eee;
}

.teambox .msrpbox .mi li {
	display: table-cell;
	padding: 0;
	line-height: 40px;
	height: 40px;
	text-align: center;
	border-right: 1px solid #eee;
	font: 600 12px/40px Poppins;
	color: #888;

}

.lexus1 {
	width: 100%;
	text-align: center;
}

.name {
	margin-top: 47px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: #222;
	margin-bottom: 6px;
	line-height: 1.1;
}

.euis {
	margin-top: 20px;
	margin-bottom: 14px;
	padding-bottom: 22px;
}

body {
	font: 14px/1.7143 'Hind';
	color: #444;
}

.photo {
	width: 100%;
	height: 260px;
	background-color: #f4f4f4;
}

.choose {
	width: 100%;
	height: 708px;
}

.all {
	width: 1140px;
	padding: 0 15px;
	position: relative;
}

.all li {
	float: left;
	padding-right: 0;
	padding-left: 0;
	text-align: -webkit-match-parent;
	border: #FFFFFF 2px solid;
}

.all li a {
	text-decoration: none;
	color: #2f2f2f;
	border-color: #444;
	position: relative;

	padding: 0 24px;
	font: 500 14px/36px Poppins;

	color: #888;
	border: 2px solid transparent;
	border-radius: 2px;
}

.all li:hover {
	border: #444444 2px solid;
}

.all li:hover .all li a {
	color: #000000;
}

.all ul {
	margin-top: 37px;
	margin-bottom: 36px;
	margin-left: 0;
	padding-left: 200px;
	text-align: center;
}

.choose1 {
	width: 100%;
	height: 600px;

}

.choose1 li {
	float: left;
	height: 296px;
}

.choose1 li img {
	width: 380px;
}

.topmake {
	width: 100%;
	height: 744px;
	overflow: hidden;
}

.alfa {
	width: 199px;
	height: auto;
	float: left;
}

.romeo {
	width: 585px;
	height: 306px;
	text-align: left;
	padding: 81px 0;
	margin: 60px 0;
}

a {
	text-decoration: none;
}

.remeo li a {
	display: block;
	padding-bottom: 12px;
	font-weight: 600;
	color: #444;
	text-decoration: none;
}

.remeo li a:hover {
	color: #D01818;

}

.remeo ul {
	margin-bottom: 40px;
}

.rental {
	width: 316px;
	height: 450px;
	padding: 44px 30px 30px 44px;
	position: absolute;
	background-color: #15191a;
	color: #FFFFFF;
	left: 740px;
	top: 100px;
}

.checkbox0 {
	position: absolute;
	left: 44px;
	top: 182px;
}

.checkbox {
	position: absolute;
}

.checkbox:nth-of-type(1) {
	top: 0px;
}

.checkbox:nth-of-type(2) {
	top: 29px;
}

.checkbox:nth-of-type(3) {
	top: 58px;
}

.checkbox:nth-of-type(4) {
	top: 87px;
}

.checkbox:nth-of-type(5) {
	top: 116px;
}

.rental1 {
	font: 18px/1 Poppins;
}

.rental2 {
	color: #d01818;
	margin-bottom: 13px;
	font: 600 36px/1 Poppins;
	letter-spacing: .025em;
}

.rental3 {
	margin-bottom: 17px;
	font-size: 16px;
	font-weight: 500;
}

.rental ul {
	margin-bottom: 40px;
	padding-left: 0;
	list-style-type: none;
}

.rental ul li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 30px;
	display: list-item;
	text-align: -webkit-match-parent;
}

.will {
	width: 100%;
	height: 344px;
	background: url(../img/content/bg/bg-6.jpg) repeat fixed;
	background-size: cover;
	position: relative;
}

.will1 {
	width: 100%;
	height: 185px;
	position: relative;

}

.will-1 {
	width: 480px;
	height: 263px;
	padding-left: 60px;
	margin: 30px 15px;
	position: absolute;
	box-shadow: 0 0 20px rgb(0 0 0 / 45%);
	top: -195px;
	background-color: #f4f4f4;
}

.will-1:nth-of-type(1) {
	left: 381px;
}

.will-1:nth-of-type(2) {
	left: 961px;
}

.will-2 {
	width: 80px;
	height: 80px;
	position: absolute;
	left: 60px;
	top: -35px;

}

.will-3 {
	width: 60px;
	height: 50px;
	position: absolute;
	right: 40px;
	top: 40px;

}

.will-4 {
	width: 400px;
	height: 130px;
	position: absolute;
	left: 60px;
	top: 80px;

}

.span {
	display: block;
	font: 600 16px Poppins;
	letter-spacing: .02em;
	color: #222;
}

.shop {
	width: 100%;
	height: 1167px;

}

.gauge {
	width: 1140px;
	height: auto;
}

.gauge1 {
	float: left;
}

.latest {
	width: 100%;
	height: 1048px;
	background: url(../img/content/bg/bg-7.jpg) no-repeat fixed;
	background-size: cover;
	position: relative;
}

.zhezhao4 {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	position: absolute;
	left: 0;
	top: 0;
}

.post {
	width: 360px;
	height: 631px;
	position: absolute;
	margin-right: 20px;
	background-color: #FFFFFF;

}

.post0 {
	width: 100%;
	position: relative;
}

.post:nth-of-type(1) {
	left: 380px;
}

.post:nth-of-type(2) {
	left: 780px;
}

.post:nth-of-type(3) {
	left: 1180px;
}

.postpic,
.postpic img {
	width: 360px;
	height: 250px;
}

.postpic {
	position: absolute;
	top: 0;
	left: 0;

}

.postpic1 {
	position: absolute;
	border: 38px;
	overflow: hidden;
	top: 200px;
	left: 30px;
	border-radius: 38px 38px;
}

.post1 {
	left: 30px;
	top: 350px;
	width: 300px;
	position: absolute;
	overflow: hidden;
}

.w300 {
	width: 300px;
}

.last {
	width: 100%;
	height: 143px;
	padding: 104px 0;
}

.auto {
	width: 238px;
	height: 115px;
	padding: 10px;
	margin: 0 25px;
	float: left;
	text-align: center;
	position: relative;
}

.zhezhao5 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
}

.zhezhao5:hover {
	background-color: rgba(255, 255, 255, 0.0);
}

.end {
	width: 100%;
	height: 547px;
	background: url(../img/content/bg/bg-1.jpg) no-repeat;
	background-size: cover;
	position: relative;
}

.end-1 {
	width: 263px;
	height: 100%;
	position: absolute;
	left: 300px;
	top: 110px;
}

.end-1 img {
	margin: 40px 0;
}

.end-1 p:hover {
	color: #D01818;
}

.end-1 p {
	color: #868686;
}

.end-2 {
	width: 310px;
	height: 100%;
	position: absolute;
	left: 650px;
	top: 180px;
}

.end-2-1 {
	color: #868686;
	position: absolute;
	top: 60px;
}

.end-2-1 li:hover {
	color: #D01818;
}

.end-2-1 li {
	margin-bottom: 10px;
}

.end-2-1:nth-of-type(1) {
	left: 0;
}

.end-2-1:nth-of-type(2) {
	left: 150px;
}

.end-2-1 span {
	color: #ffffff;
	margin-right: 7px;
}

.end-tit {
	width: 320px;
	position: absolute;
	top: 0;
	left: 0;
}


.end-tit span {
	color: #D01818;
	font-weight: bolder;
	margin-right: 30px;
}

.end-tit h2,
.end-tit h4 {
	font-size: 1em;
	margin-left: 0px;
	color: #FFFFFF;
}

.end-tit h4 {
	margin-left: 60px;
}

.sell {
	width: 300px;
	height: 70px;
	padding-top: 20px;
	margin-left: 900px;
}

.end-3 {
	width: 263px;
	height: 100%;
	position: absolute;
	left: 1000px;
	top: 180px;
}

.sell img {
	margin: 15px 15px 0 10px;
}

.end-4 {
	width: 320px;
	height: 100%;
	position: absolute;
	left: 1225px;
	top: 180px;
}

.black1 {
	background-color: rgba(0, 0, 0, 0.8);
}

.end-4 li {
	color: #FFFFFF;
}

.end-4 li img {
	width: 25px;
	height: 25px;
}
.w1903{
	width: 1903px;
	height: auto;
}

style-artice.css

#page-preloader {
	width: 100%;
	background-color: #222;

}

* {
	margin: 0;
	padding: 0;
}

.box1 {
	width: 1170px;
	height: 50px;
	line-height: 50px;
	background-color: #222;
}

#page-preloader .box1 li {
	padding-right: 20px;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: #fff;
	list-style: none;
	text-decoration: none;
	float: left;
}

#list1 img {
	margin-right: 20px;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.clear {
	clear: both;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.box1-1-2-1 {
	width: 250px;
	height: 180px;
	background-color: rgba(0, 0, 0, 0.7);
	float: left;
	position: absolute;
	bottom: -150px;
	left: 690px;
	display: none;
}

.box2:hover .box1-1-2-1 {
	display: block;
	z-index: 11;
}

.box1-1-3 {
	text-align: center;
	width: 90px;
	height: 40px;
	font-size: 16px;
	color: #fff;
	margin: 5px 15px;
}

.box2,
.box3 {

	width: 100%;
	padding: 5px 0;
}

.box2-1 {
	width: 1170px;
	height: 91px;
}

.box2 {
	background-color: #FFFFFF;
}

.box2-2 {
	margin-left: 15px;
	margin-right: 100px;
	padding: 15px 0;
}

.box2-3 li {

	color: #222222;
	list-style: none;
	text-decoration: none;
	float: left;
	margin: 0 1px;
	line-height: 31px;
	font-size: 14px;
	font-weight: 600;
}

.box2-3 li a {
	background-color: #FFFFFF;
	color: #222222;
	list-style: none;
	text-decoration: none;
	float: left;
	margin: 0 1px;
	padding: 30px 15px;
	line-height: 31px;
	font-size: 14px;
	font-weight: 600;
}

.box2-3 li a:hover {
	background-color: #d01818;
	color: #FFFFFF;
}

.box2-4-1 {
	width: 112px;
	height: 44px;
}

.box2-4-1 a {
	text-decoration: none;
	list-style: none;
	background-color: #D01818;
	color: #FFFFFF;
}

.box2-4 li {
	list-style: none;
	text-decoration: none;
	float: left;
}

.playbox {
	width: 100%;
	height: 700px;
	overflow: hidden;
}

ul {
	list-style: none;
}

.relative {
	position: relative;
}

.zhezhao1 {
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 700px;
	z-index: 4;
	position: absolute;
	top: 0;
	left: 0;
}

.picbox {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
}

.pixapp {
	width: 680px;
	height: 700px;
	position: absolute;
	top: 180px;
	right: 150px;
	z-index: 5;
}

.picapp1 {
	width: 117px;
	height: 34px;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	line-height: 33px;
	background-color: #D01818;
	color: #fefdfd;
	position: absolute;
	top: 25px;
	left: 0;

}

.picapp2 {

	position: absolute;
	top: 0;
	left: 130px;
}

.picapp2 h2 {}

.starting {
	border: 2px #FEFDFD solid;
	color: #FEFDFD;
	margin-right: 13px;
	margin-bottom: 20px;
	width: 193px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	position: absolute;
	top: 200px;
}

.starting:hover {
	border: 2px #FF0000 solid;
	color: #FF0000;
}

.book {
	text-align: center;
	background-color: #D01818;
	color: #FEFDFD;
	margin-right: 13px;
	margin-bottom: 20px;
	width: 120px;
	height: 54px;
	line-height: 50px;
	position: absolute;
	left: 210px;
	top: 200px;
}

.book:hover {
	background-color: #FF0000;
	color: #FEFDFD;

}

.picapp2 p,
.picapp2 h2 {
	color: #FFFFFF;
	font-size: 50px;
}

.line {
	border: 2px #FFFFFF solid;
	position: absolute;
	top: 290px;
	width: 65px;
}

.line1 {
	border: 2px #D01818 solid;
	position: absolute;
	bottom: 60px;
	left: 50px;
	width: 20px;
}

.box3 {
	height: 730px;
	position: relative;
	z-index: 6;
}

.box3-1 {
	width: 1140px;
	height: 343px;
	position: absolute;
	top: -40px;
	left: 380px;
	z-index: 7;
	box-shadow: 0 0 20px rgb(0 0 0 / 45%);
	overflow: hidden;
}

.largest {
	width: 380px;
	height: 340px;
	position: absolute;
	top: 0;
	background-color: #f4f4f4;
}

.largest:nth-of-type(1) {
	left: 0;
}

.largest:nth-of-type(2) {
	left: 380px;
}

.largest:nth-of-type(3) {
	left: 760px;
}

.largest h3 {
	margin: 0 50px;
	color: #222222;
	font-size: 14px;
	margin-bottom: 15px;
}

.largest p {
	margin: 0 50px;
	color: #969696;
	font-size: 14px;
}

.largest img {
	width: 55px;
	height: 55px;
	margin: 60px 0px 30px 50px;
}

.box3-2 {
	width: 1140px;
	height: 350px;
	position: absolute;
	left: 380px;
	bottom: 0;
}

.find {
	text-align: center;
	width: 100%;
	height: auto;
}

.find h2,
.feature h2,
.about h2 {
	margin-top: 0;
	margin-bottom: 2px;
	font-size: 48px;
	font-weight: 320;
	line-height: 1.08;
}

.find p,
.feature p,
.about p {
	margin-bottom: 100px;
	font-size: 16px;
	line-height: 1.875;
	color: #888;
}

.line3,
.line4,
.line7 {
	border-bottom: 1px #D01818 solid;
	width: 40px;
	position: absolute;

}

.line7:nth-of-type(1) {
	left: 27px;
	top: 100px;
}

.line7:nth-of-type(2) {
	left: 2px;
	top: 108px;
}

.line7:nth-of-type(3) {
	left: 52px;
	top: 108px;
}

.line3:nth-of-type(1) {
	left: 550px;
	bottom: 250px;
}

.line3:nth-of-type(2) {
	left: 525px;
	bottom: 242px;
}

.line3:nth-of-type(3) {
	left: 575px;
	bottom: 242px;
}

.line4:nth-of-type(1) {
	left: 931px;
	bottom: 65px;
}

.line4:nth-of-type(2) {
	left: 906px;
	bottom: 58px;
}

.line4:nth-of-type(3) {
	left: 956px;
	bottom: 58px;
}

.box4 {
	width: 100%;
	background-color: #f4f4f4;
}

.input {
	width: 1140px;
	height: 140px;
	padding: 70px 0;
}

select {
	width: 260px;
	height: 50px;
	padding: 0 20px;
	font-size: 14px;
	line-height: 48px;
	vertical-align: top;
	text-transform: inherit;
	color: #222;
	border: 1px solid #eee;
	border-radius: 0;
	background-color: #fff;
	margin: 0 30px 40px 0;
}

input {
	background-color: #D01818;
	color: #FFFFFF;
	height: 50px;
	font-weight: bold;
	font-size: 14px;
	line-height: 46px;
	text-align: center;
	width: 166px;
	height: 50px;
	margin-bottom: 20px;
	list-style: none;
}

.search1 {
	margin-top: 25px;
	margin-left: 100px;
	width: 170px;
	height: 140px;
	text-align: center;
}

.search1 a {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;

	transition: all .3s;
	color: #222;
	line-height: 1;
	font-family: Poppins;
	text-decoration: underline;
}

.input1 {
	width: 290px;
	height: 140px;
	float: left;
}

.box5 {
	height: 890px;
	width: 100%;
	background-color: #ffffff;
}

.feature {
	width: 100%;
	height: 170px;
	text-align: center;
	position: relative;
	padding-top: 100px;
}

.msrp {
	width: 100%;
	height: 396px;
	position: relative;
}

.msrpbox {
	width: 357px;
	height: 410px;
	position: absolute;
	top: 0;
	overflow: hidden;
	z-index: 2;
}

.msrpbox:hover .zhezhao6 {
	z-index: 3;
}

.msrpbox:nth-of-type(1) .zhezhao6 {
	transition: all 1s linear;
	transform: rotate(90deg);
	transform-origin: right top;
}

.msrpbox:nth-of-type(1):hover .zhezhao6 {
	transform: rotate(0deg);
}

.msrpbox:nth-of-type(2) .zhezhao6 {
	transform: scale(0);
	transition: all 1s linear;
}

.msrpbox:nth-of-type(2):hover .zhezhao6 {
	transform: scale(1);
}

.msrpbox:nth-of-type(3) .zhezhao6 {
	transform: translate(96px, 0);
	transition: all 1s linear;
}

.msrpbox:nth-of-type(3):hover .zhezhao6 {
	transform: translate(0, 0);
}

.zhezhao6 {
	width: 100%;
	height: 218px;
	color: #FFFFFF;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.6);
	position: absolute;
	z-index: -1;
}

.msrpbox img {
	width: 357px;
	height: 218px;
}

.msrpbox:nth-of-type(1) {
	left: 0;
}

.msrpbox:nth-of-type(2) {
	left: 386px;
}

.msrpbox:nth-of-type(3) {
	left: 772px;
}

.msrpbox:nth-of-type(4) {
	left: 1158px;
}

.msrpbox:nth-of-type(5) {
	left: 1544px;
}

.price {
	position: absolute;
	right: 10px;
	top: 170px;
	background-color: #d01818;
	padding: 0 15px;
	font-family: Poppins;
	font-weight: 600;
	line-height: 38px;
	color: white;
}

.mi {
	width: 357px;
	height: 48px;
	margin-bottom: 34px;
}

.mi ul {
	display: table;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 6px;
	font: 500 12px Poppins;
	color: #888;
	border: 1px solid #eee;
}

.mi li {
	display: table-cell;
	line-height: 35px;
	padding-top: 15px;
	height: 35px;
	text-align: center;
	border-right: 1px solid #eee;
	font: 500 13px Poppins;
	color: #888;

}

.mi li:hover {

	color: #D01818;

}

.line5 {
	border: 2px #D01818 solid;
	position: absolute;
	bottom: 77px;
	left: 0;
	width: 8px;
}

.line9 {
	border: 2px #D01818 solid;
	position: absolute;
	top: 12px;
	left: 0;
	width: 8px;
}

.lexus {
	width: 356px;
	height: auto;
}

.lexus h3 {
	padding-left: 27px;
	margin-bottom: 20px;
}

.lexus a {
	color: #222;
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
	font-family: Poppins;
}

.lexus p {
	font: 12px/1.7143 'Hind';
	color: #444;
}

.box6 {
	width: 100%;
	height: 550px;
	background: url(../img/content/bg/bg-1.jpg) repeat fixed center;
	position: relative;

}

.zhezhao2 {
	width: 100%;
	height: 550px;
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	z-index: 2;
}

.box6 .feature p,
.box6 .feature h2 {
	color: #FFFFFF;
}

.box7 {
	width: 100%;
	height: 431px;
	position: relative;
	z-index: 4;
}

.balancing {
	width: 263px;
	height: 373px;
	position: absolute;
	box-shadow: 0 0 20px rgb(0 0 0 / 45%);
	top: -283px;
	color: #222222;
	background-color: #F4F4F4;
	z-index: 5;
	text-align: center;
}

.balancing:hover {
	background-color: #D01818;
	color: #FFFFFF;
}

.balancing:nth-of-type(1) {
	left: 380px;
}

.balancing:nth-of-type(2) {
	left: 673px;
}

.balancing:nth-of-type(3) {
	left: 966px;
}

.balancing:nth-of-type(4) {
	left: 1259px;
}

.balancing img {
	width: 65px;
	height: 65px;
	margin-top: 45px;
	margin-bottom: 25px;
}

.h3x {
	margin-top: 0;
	margin-bottom: 27px;
	font-size: 16px;
	font-weight: 600;
}

strong {
	margin-top: 5px;
	font-size: 20px;
}

.p {
	font: 12px/1.7143 'Hind';
	color: #444;
	margin-bottom: 7px;
	padding: 0 30px;
}

.balancing:hover .p {
	color: #FFFFFF;
}

.line6 {
	border: 1px #D01818 solid;
	position: absolute;
	bottom: 55px;
	left: 121px;
	width: 18px;
}

.balancing:hover .line6 {
	border: 1px #ffffff solid;
}

.box7-1 {
	width: 100%;
	height: 100%;
	position: relative;
}

.stock {
	height: 93px;
	width: 267px;
	position: absolute;
	text-align: center;
	bottom: 115px;
}

.stock:nth-of-type(1) {
	left: 380px;
}

.stock:nth-of-type(2) {
	left: 673px;
}

.stock:nth-of-type(3) {
	left: 966px;
}

.stock:nth-of-type(4) {
	left: 1259px;
}

.stock h3 {
	color: #d01818;
}

.stock .p {
	margin-bottom: 3px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: #444;
}

.box8 {
	width: 100%;
	height: 891px;
	position: relative;
	background-image: url(../img/content/bg/bg-5.jpg);
	background-size: cover;
	z-index: 1;
}

#tit {
	display: block;
	font-size: 1.5em;
	color: #FFFFFF;
}

.zhezhao3 {
	position: absolute;
	width: 100%;
	height: 891px;
	background-color: rgba(254, 254, 254, 0.7);
	z-index: 2;
}

.container {
	width: 1140px;
	height: 510px;
	position: relative;
}

.ford0 {
	width: 458px;
	height: 505px;
	background-color: #ffffff;
}

.ford {
	width: 458px;
	height: 100px;
	margin-bottom: 1px;
	background-color: #ececec;

}

.ford:hover {
	background-color: #D01818;

}

.ford:hover .lines {
	color: #FFFFFF
}

.ford h4 {
	margin-bottom: 4px;
	font: 600 16px Poppins;
	white-space: nowrap;
	letter-spacing: .01em;
	color: #222;
	padding: 25px 30px 5px 0px;
}

.ford span {
	padding: 1px 30px 25px 50px;
}

.ford span,
.ford span strong {
	font-weight: 500;
	white-space: nowrap;
	color: #888;
	font: 14px/1.7143 'Hind';
}

.ford span strong {
	font-weight: 700;
}

.fordpic {
	width: 682px;
	height: 505px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 459px;
}

.order {
	text-align: center;
	padding-top: 10px;
	width: 40px;
	height: 30px;
	position: fixed;
	left: 0;
	top: 140px;
	background-color: #FFFFFF;
	border: #DDDDDD 1px solid;
	z-index: 10;
}

.ford h4 .lines {
	font-size: 1rem;
	font-weight: bolder;
	color: #D01818;
	padding: 0 15px;
}

.box9 {
	width: 100%;
	height: 976px;
	background-color: #FFFFFF;
}

.motorland {
	width: 1140px;
	height: 762px;
	padding: 100px 15px;
	position: relative;
}

.about {
	height: 100%;
	width: 600px;
	text-align: left;
	position: absolute;

}

.visited {
	width: 585px;
	height: 306px;
	text-align: left;
	padding: 81px 0;
	margin: 60px 0;
}

.visited1 {
	font: 600 18px/1.2 Poppins;
	letter-spacing: .01em;
	color: #222;
}

.visited2 {
	margin-bottom: 20px;
	font: 300 24px Poppins;
	color: #444;
}

.visited .visited3 {
	margin: 0 0 50px;
	font: 14px/1.7143 'Hind';
	color: #444;
}

.btn:hover {
	box-shadow: 0 0 1px 0 #000;
	text-shadow: 0 0 1px #000;
}

.btn {
	overflow: hidden;
	display: inline-block;
	height: 44px;
	margin-bottom: 0;
	padding: 0 20px;
	font: 600 12px/40px Poppins;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 2px solid transparent;
	white-space: nowrap;
	user-select: none;
	text-transform: uppercase;
	color: white;
	transition: all .3s;
	letter-spacing: .05em;
	border-radius: 2px;
}

.visited a,
.buy a {
	text-decoration: none;
}

.btn-dark {
	background-color: #222;
}

.btn-red {
	background-color: #D01818;
}

.aboutpic {
	height: 100%;
	left: 665px;
	text-align: left;
	position: absolute;
	padding-top: 105px;
}

.aboutend {
	height: 100%;
	left: 1029px;
	width: 339px;
	position: absolute;
	padding-top: 164px;
}

.aboutend1 {
	margin-bottom: 34px;
	padding-left: 77px;
	width: 262px;
	height: 138px;

}

.aboutend1:hover .aboutend3 {
	color: #D01818;
}

.aboutend1:hover .aboutend4 {
	background-color: #000000;
}

.aboutend2 {
	margin-bottom: 14px;
	font: 600 16px Poppins;
	color: #222;
}

.aboutend3 {
	font: 14px/1.7143 'Hind';
	color: #444;
}

.aboutend4 {
	display: inline-block;
	width: 20px;
	height: 3px;
	background-color: #D01818;
}

.frame {
	width: 60px;
	padding-top: 164px;
	left: 1029px;
	height: 100%;
	position: absolute;
}

.aboutendpic {
	width: 58px;
	height: 58px;
	position: absolute;
	left: 0px;

}

.aboutendpic img {
	width: 58px;
	height: 58px;
}

.aboutendpic:nth-of-type(1) {
	top: 164px;
}

.aboutendpic:nth-of-type(2) {
	top: 342px;
}

.aboutendpic:nth-of-type(3) {
	top: 506px;
}

.tobuy {
	width: 100%;
	height: 464px;
	position: relative;
}

.tobuy1 {
	width: 950px;
	height: 424px;
	margin: 20px 0;
	background: url(../img/content/bg/bg-4.jpg) no-repeat fixed;
	position: absolute;
	background-size: cover;

}

.tozhe,
.tozhe1 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.tozhe-red {
	background-color: rgba(255, 0, 0, 0.5);
}

.tozhe-black {
	background-color: rgba(0, 0, 0, 0.5);
}

.tobuy2 {
	position: absolute;
	left: 950px;
	width: 950px;
	height: 464px;
	background: url(../img/content/bg/bg-3.jpg) no-repeat fixed;
	background-size: cover;
}

.buy {
	margin: 100px 0 0 380px;
	position: relative;
	font: 14px/1.7143 'Hind';
	width: 423px;
	height: 234px;
}

.tozhe-black .buy {
	margin: 100px 0 0 200px;
}

.buy1 {
	margin-top: 5px;
	margin-bottom: 20px;
	font-size: 18px;
	letter-spacing: .03em;
	color: #fff;
	line-height: 1.1;
	font-weight: 600;
	font-family: Poppins;
}

.buy2 {
	margin-top: 10px;
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .03em;
	color: #fff;
}

.btn-white {
	margin-top: 34px;
	padding: 0 40px;
	border-color: #fff;
	background-color: transparent;
}

.buy3 {
	color: #fff;
}

.team {
	width: 100%;
	height: 986px;

}

.teambox {
	width: 1140px;
	height: 100%;
}

.eteam1 {
	width: 1140px;
	height: 522px;
}


.teambox .msrp {
	width: 100%;
	height: 396px;
	position: relative;
}

.teambox .msrpbox {
	width: 360px;
	height: 552px;
	position: absolute;
	top: 0;
	overflow: hidden;
}

.teambox .msrpbox img {
	width: 360px;
	height: 280px;
}

.teambox .msrpbox:nth-of-type(1) {
	left: 0;
}

.teambox .msrpbox:nth-of-type(2) {
	left: 386px;
}

.teambox .msrpbox:nth-of-type(3) {
	left: 772px;
}

.teambox .price {
	position: absolute;
	right: 20px;
	top: 220px;
	background-color: #d01818;
	padding: 0 15px;
	font-family: Poppins;
	font-weight: 600;
	line-height: 38px;
	color: white;
}

.teambox .msrpbox .mi {
	width: 356px;
	height: 40px;
	margin-bottom: 34px;
}

.teambox .msrpbox .mi ul {
	display: table;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 6px;
	font: 14px/1.7143 'Hind';
	color: #444;
	border: 1px solid #eee;
}

.teambox .msrpbox .mi li {
	display: table-cell;
	padding: 0;
	line-height: 40px;
	height: 40px;
	text-align: center;
	border-right: 1px solid #eee;
	font: 600 12px/40px Poppins;
	color: #888;

}

.lexus1 {
	width: 100%;
	text-align: center;
}

.name {
	margin-top: 47px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: #222;
	margin-bottom: 6px;
	line-height: 1.1;
}

.euis {
	margin-top: 20px;
	margin-bottom: 14px;
	padding-bottom: 22px;
}

body {
	font: 14px/1.7143 'Hind';
	color: #444;
}

.photo {
	width: 100%;
	height: 260px;
	background-color: #f4f4f4;
}

.choose {
	width: 100%;
	height: 708px;
}

.all {
	width: 1140px;
	padding: 0 15px;
	position: relative;
}

.all li {
	float: left;
	padding-right: 0;
	padding-left: 0;
	text-align: -webkit-match-parent;
	border: #FFFFFF 2px solid;
}

.all li a {
	text-decoration: none;
	color: #2f2f2f;
	border-color: #444;
	position: relative;

	padding: 0 24px;
	font: 500 14px/36px Poppins;

	color: #888;
	border: 2px solid transparent;
	border-radius: 2px;
}

.all li:hover {
	border: #444444 2px solid;
}

.all li:hover .all li a {
	color: #000000;
}

.all ul {
	margin-top: 37px;
	margin-bottom: 36px;
	margin-left: 0;
	padding-left: 200px;
	text-align: center;
}

.choose1 {
	width: 100%;
	height: 600px;

}

.choose1 li {
	float: left;
	height: 296px;
}

.choose1 li img {
	width: 380px;
}

.topmake {
	width: 100%;
	height: 744px;
	overflow: hidden;
}

.alfa {
	width: 199px;
	height: auto;
	float: left;
}

.romeo {
	width: 585px;
	height: 306px;
	text-align: left;
	padding: 81px 0;
	margin: 60px 0;
}

a {
	text-decoration: none;
}

.remeo li a {
	display: block;
	padding-bottom: 12px;
	font-weight: 600;
	color: #444;
	text-decoration: none;
}

.remeo li a:hover {
	color: #D01818;

}

.remeo ul {
	margin-bottom: 40px;
}

.rental {
	width: 316px;
	height: 450px;
	padding: 44px 30px 30px 44px;
	position: absolute;
	background-color: #15191a;
	color: #FFFFFF;
	left: 740px;
	top: 100px;
}

.checkbox0 {
	position: absolute;
	left: 44px;
	top: 182px;
}

.checkbox {
	position: absolute;
}

.checkbox:nth-of-type(1) {
	top: 0px;
}

.checkbox:nth-of-type(2) {
	top: 29px;
}

.checkbox:nth-of-type(3) {
	top: 58px;
}

.checkbox:nth-of-type(4) {
	top: 87px;
}

.checkbox:nth-of-type(5) {
	top: 116px;
}

.rental1 {
	font: 18px/1 Poppins;
}

.rental2 {
	color: #d01818;
	margin-bottom: 13px;
	font: 600 36px/1 Poppins;
	letter-spacing: .025em;
}

.rental3 {
	margin-bottom: 17px;
	font-size: 16px;
	font-weight: 500;
}

.rental ul {
	margin-bottom: 40px;
	padding-left: 0;
	list-style-type: none;
}

.rental ul li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 30px;
	display: list-item;
	text-align: -webkit-match-parent;
}

.will {
	width: 100%;
	height: 344px;
	background: url(../img/content/bg/bg-6.jpg) repeat fixed;
	background-size: cover;
	position: relative;
}

.will1 {
	width: 100%;
	height: 185px;
	position: relative;

}

.will-1 {
	width: 480px;
	height: 263px;
	padding-left: 60px;
	margin: 30px 15px;
	position: absolute;
	box-shadow: 0 0 20px rgb(0 0 0 / 45%);
	top: -195px;
	background-color: #f4f4f4;
}

.will-1:nth-of-type(1) {
	left: 381px;
}

.will-1:nth-of-type(2) {
	left: 961px;
}

.will-2 {
	width: 80px;
	height: 80px;
	position: absolute;
	left: 60px;
	top: -35px;

}

.will-3 {
	width: 60px;
	height: 50px;
	position: absolute;
	right: 40px;
	top: 40px;

}

.will-4 {
	width: 400px;
	height: 130px;
	position: absolute;
	left: 60px;
	top: 80px;

}

.span {
	display: block;
	font: 600 16px Poppins;
	letter-spacing: .02em;
	color: #222;
}

.shop {
	width: 100%;
	height: 1167px;

}

.gauge {
	width: 1140px;
	height: auto;
}

.gauge1 {
	float: left;
}

.latest {
	width: 100%;
	height: 1048px;
	background: url(../img/content/bg/bg-7.jpg) no-repeat fixed;
	background-size: cover;
	position: relative;
}

.zhezhao4 {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	position: absolute;
	left: 0;
	top: 0;
}

.post {
	width: 360px;
	height: 631px;
	position: absolute;
	margin-right: 20px;
	background-color: #FFFFFF;

}

.post0 {
	width: 100%;
	position: relative;
}

.post:nth-of-type(1) {
	left: 380px;
}

.post:nth-of-type(2) {
	left: 780px;
}

.post:nth-of-type(3) {
	left: 1180px;
}

.postpic,
.postpic img {
	width: 360px;
	height: 250px;
}

.postpic {
	position: absolute;
	top: 0;
	left: 0;

}

.postpic1 {
	position: absolute;
	border: 38px;
	overflow: hidden;
	top: 200px;
	left: 30px;
	border-radius: 38px 38px;
}

.post1 {
	left: 30px;
	top: 350px;
	width: 300px;
	position: absolute;
	overflow: hidden;
}

.w300 {
	width: 300px;
}

.last {
	width: 100%;
	height: 143px;
	padding: 104px 0;
}

.auto {
	width: 238px;
	height: 115px;
	padding: 10px;
	margin: 0 25px;
	float: left;
	text-align: center;
	position: relative;
}

.zhezhao5 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
}

.zhezhao5:hover {
	background-color: rgba(255, 255, 255, 0.0);
}

.end {
	width: 100%;
	height: 547px;
	background: url(../img/content/bg/bg-1.jpg) no-repeat;
	background-size: cover;
	position: relative;
}

.end-1 {
	width: 263px;
	height: 100%;
	position: absolute;
	left: 300px;
	top: 110px;
}

.end-1 img {
	margin: 40px 0;
}

.end-1 p:hover {
	color: #D01818;
}

.end-1 p {
	color: #868686;
}

.end-2 {
	width: 310px;
	height: 100%;
	position: absolute;
	left: 650px;
	top: 180px;
}

.end-2-1 {
	color: #868686;
	position: absolute;
	top: 60px;
}

.end-2-1 li:hover {
	color: #D01818;
}

.end-2-1 li {
	margin-bottom: 10px;
}

.end-2-1:nth-of-type(1) {
	left: 0;
}

.end-2-1:nth-of-type(2) {
	left: 150px;
}

.end-2-1 span {
	color: #ffffff;
	margin-right: 7px;
}

.end-tit {
	width: 320px;
	position: absolute;
	top: 0;
	left: 0;
}


.end-tit span {
	color: #D01818;
	font-weight: bolder;
	margin-right: 30px;
}

.end-tit h2,
.end-tit h4 {
	font-size: 1em;
	margin-left: 0px;
	color: #FFFFFF;
}

.end-tit h4 {
	margin-left: 60px;
}

.sell {
	width: 300px;
	height: 70px;
	padding-top: 20px;
	margin-left: 900px;
}

.end-3 {
	width: 263px;
	height: 100%;
	position: absolute;
	left: 1000px;
	top: 180px;
}

.sell img {
	margin: 15px 15px 0 10px;
}

.end-4 {
	width: 320px;
	height: 100%;
	position: absolute;
	left: 1225px;
	top: 180px;
}

.black1 {
	background-color: rgba(0, 0, 0, 0.8);
}

.end-4 li {
	color: #FFFFFF;
}

.end-4 li img {
	width: 25px;
	height: 25px;
}
.w1903{
	width: 1903px;
	height: auto;
}

style-list.css

#page-preloader {
	width: 100%;
	background-color: #222;

}

* {
	margin: 0;
	padding: 0;
}

.box1 {
	width: 1170px;
	height: 50px;
	line-height: 50px;
	background-color: #222;
}

#page-preloader .box1 li {
	padding-right: 20px;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: #fff;
	list-style: none;
	text-decoration: none;
	float: left;
}

#list1 img {
	margin-right: 20px;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.clear {
	clear: both;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.box1-1-2-1 {
	width: 250px;
	height: 180px;
	background-color: rgba(0, 0, 0, 0.7);
	float: left;
	position: absolute;
	bottom: -150px;
	left: 690px;
	display: none;
}

.box2:hover .box1-1-2-1 {
	display: block;
	z-index: 11;
}

.box1-1-3 {
	text-align: center;
	width: 90px;
	height: 40px;
	font-size: 16px;
	color: #fff;
	margin: 5px 15px;
}

.box2,
.box3 {

	width: 100%;
	padding: 5px 0;
}

.box2-1 {
	width: 1170px;
	height: 91px;
}

.box2 {
	background-color: #FFFFFF;
}

.box2-2 {
	margin-left: 15px;
	margin-right: 100px;
	padding: 15px 0;
}

.box2-3 li {

	color: #222222;
	list-style: none;
	text-decoration: none;
	float: left;
	margin: 0 1px;
	line-height: 31px;
	font-size: 14px;
	font-weight: 600;
}

.box2-3 li a {
	background-color: #FFFFFF;
	color: #222222;
	list-style: none;
	text-decoration: none;
	float: left;
	margin: 0 1px;
	padding: 30px 15px;
	line-height: 31px;
	font-size: 14px;
	font-weight: 600;
}

.box2-3 li a:hover {
	background-color: #d01818;
	color: #FFFFFF;
}

.box2-4-1 {
	width: 112px;
	height: 44px;
}

.box2-4-1 a {
	text-decoration: none;
	list-style: none;
	background-color: #D01818;
	color: #FFFFFF;
}

.box2-4 li {
	list-style: none;
	text-decoration: none;
	float: left;
}

.playbox {
	width: 100%;
	height: 700px;
	overflow: hidden;
}

ul {
	list-style: none;
}

.relative {
	position: relative;
}

.zhezhao1 {
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 700px;
	z-index: 4;
	position: absolute;
	top: 0;
	left: 0;
}

.picbox {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
}

.pixapp {
	width: 680px;
	height: 700px;
	position: absolute;
	top: 180px;
	right: 150px;
	z-index: 5;
}

.picapp1 {
	width: 117px;
	height: 34px;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	line-height: 33px;
	background-color: #D01818;
	color: #fefdfd;
	position: absolute;
	top: 25px;
	left: 0;

}

.picapp2 {

	position: absolute;
	top: 0;
	left: 130px;
}

.picapp2 h2 {}

.starting {
	border: 2px #FEFDFD solid;
	color: #FEFDFD;
	margin-right: 13px;
	margin-bottom: 20px;
	width: 193px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	position: absolute;
	top: 200px;
}

.starting:hover {
	border: 2px #FF0000 solid;
	color: #FF0000;
}

.book {
	text-align: center;
	background-color: #D01818;
	color: #FEFDFD;
	margin-right: 13px;
	margin-bottom: 20px;
	width: 120px;
	height: 54px;
	line-height: 50px;
	position: absolute;
	left: 210px;
	top: 200px;
}

.book:hover {
	background-color: #FF0000;
	color: #FEFDFD;

}

.picapp2 p,
.picapp2 h2 {
	color: #FFFFFF;
	font-size: 50px;
}

.line {
	border: 2px #FFFFFF solid;
	position: absolute;
	top: 290px;
	width: 65px;
}

.line1 {
	border: 2px #D01818 solid;
	position: absolute;
	bottom: 60px;
	left: 50px;
	width: 20px;
}

.box3 {
	height: 730px;
	position: relative;
	z-index: 6;
}

.box3-1 {
	width: 1140px;
	height: 343px;
	position: absolute;
	top: -40px;
	left: 380px;
	z-index: 7;
	box-shadow: 0 0 20px rgb(0 0 0 / 45%);
	overflow: hidden;
}

.largest {
	width: 380px;
	height: 340px;
	position: absolute;
	top: 0;
	background-color: #f4f4f4;
}

.largest:nth-of-type(1) {
	left: 0;
}

.largest:nth-of-type(2) {
	left: 380px;
}

.largest:nth-of-type(3) {
	left: 760px;
}

.largest h3 {
	margin: 0 50px;
	color: #222222;
	font-size: 14px;
	margin-bottom: 15px;
}

.largest p {
	margin: 0 50px;
	color: #969696;
	font-size: 14px;
}

.largest img {
	width: 55px;
	height: 55px;
	margin: 60px 0px 30px 50px;
}

.box3-2 {
	width: 1140px;
	height: 350px;
	position: absolute;
	left: 380px;
	bottom: 0;
}

.find {
	text-align: center;
	width: 100%;
	height: auto;
}

.find h2,
.feature h2,
.about h2 {
	margin-top: 0;
	margin-bottom: 2px;
	font-size: 48px;
	font-weight: 320;
	line-height: 1.08;
}

.find p,
.feature p,
.about p {
	margin-bottom: 100px;
	font-size: 16px;
	line-height: 1.875;
	color: #888;
}

.line3,
.line4,
.line7 {
	border-bottom: 1px #D01818 solid;
	width: 40px;
	position: absolute;

}

.line7:nth-of-type(1) {
	left: 27px;
	top: 100px;
}

.line7:nth-of-type(2) {
	left: 2px;
	top: 108px;
}

.line7:nth-of-type(3) {
	left: 52px;
	top: 108px;
}

.line3:nth-of-type(1) {
	left: 550px;
	bottom: 250px;
}

.line3:nth-of-type(2) {
	left: 525px;
	bottom: 242px;
}

.line3:nth-of-type(3) {
	left: 575px;
	bottom: 242px;
}

.line4:nth-of-type(1) {
	left: 931px;
	bottom: 65px;
}

.line4:nth-of-type(2) {
	left: 906px;
	bottom: 58px;
}

.line4:nth-of-type(3) {
	left: 956px;
	bottom: 58px;
}

.box4 {
	width: 100%;
	background-color: #f4f4f4;
}

.input {
	width: 1140px;
	height: 140px;
	padding: 70px 0;
}

select {
	width: 260px;
	height: 50px;
	padding: 0 20px;
	font-size: 14px;
	line-height: 48px;
	vertical-align: top;
	text-transform: inherit;
	color: #222;
	border: 1px solid #eee;
	border-radius: 0;
	background-color: #fff;
	margin: 0 30px 40px 0;
}

input {
	background-color: #D01818;
	color: #FFFFFF;
	height: 50px;
	font-weight: bold;
	font-size: 14px;
	line-height: 46px;
	text-align: center;
	width: 166px;
	height: 50px;
	margin-bottom: 20px;
	list-style: none;
}

.search1 {
	margin-top: 25px;
	margin-left: 100px;
	width: 170px;
	height: 140px;
	text-align: center;
}

.search1 a {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;

	transition: all .3s;
	color: #222;
	line-height: 1;
	font-family: Poppins;
	text-decoration: underline;
}

.input1 {
	width: 290px;
	height: 140px;
	float: left;
}

.box5 {
	height: 890px;
	width: 100%;
	background-color: #ffffff;
}

.feature {
	width: 100%;
	height: 170px;
	text-align: center;
	position: relative;
	padding-top: 100px;
}

.msrp {
	width: 100%;
	height: 396px;
	position: relative;
}

.msrpbox {
	width: 357px;
	height: 410px;
	position: absolute;
	top: 0;
	overflow: hidden;
	z-index: 2;
}

.msrpbox:hover .zhezhao6 {
	z-index: 3;
}

.msrpbox:nth-of-type(1) .zhezhao6 {
	transition: all 1s linear;
	transform: rotate(90deg);
	transform-origin: right top;
}

.msrpbox:nth-of-type(1):hover .zhezhao6 {
	transform: rotate(0deg);
}

.msrpbox:nth-of-type(2) .zhezhao6 {
	transform: scale(0);
	transition: all 1s linear;
}

.msrpbox:nth-of-type(2):hover .zhezhao6 {
	transform: scale(1);
}

.msrpbox:nth-of-type(3) .zhezhao6 {
	transform: translate(96px, 0);
	transition: all 1s linear;
}

.msrpbox:nth-of-type(3):hover .zhezhao6 {
	transform: translate(0, 0);
}

.zhezhao6 {
	width: 100%;
	height: 218px;
	color: #FFFFFF;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.6);
	position: absolute;
	z-index: -1;
}

.msrpbox img {
	width: 357px;
	height: 218px;
}

.msrpbox:nth-of-type(1) {
	left: 0;
}

.msrpbox:nth-of-type(2) {
	left: 386px;
}

.msrpbox:nth-of-type(3) {
	left: 772px;
}

.msrpbox:nth-of-type(4) {
	left: 1158px;
}

.msrpbox:nth-of-type(5) {
	left: 1544px;
}

.price {
	position: absolute;
	right: 10px;
	top: 170px;
	background-color: #d01818;
	padding: 0 15px;
	font-family: Poppins;
	font-weight: 600;
	line-height: 38px;
	color: white;
}

.mi {
	width: 357px;
	height: 48px;
	margin-bottom: 34px;
}

.mi ul {
	display: table;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 6px;
	font: 500 12px Poppins;
	color: #888;
	border: 1px solid #eee;
}

.mi li {
	display: table-cell;
	line-height: 35px;
	padding-top: 15px;
	height: 35px;
	text-align: center;
	border-right: 1px solid #eee;
	font: 500 13px Poppins;
	color: #888;

}

.mi li:hover {

	color: #D01818;

}

.line5 {
	border: 2px #D01818 solid;
	position: absolute;
	bottom: 77px;
	left: 0;
	width: 8px;
}

.line9 {
	border: 2px #D01818 solid;
	position: absolute;
	top: 12px;
	left: 0;
	width: 8px;
}

.lexus {
	width: 356px;
	height: auto;
}

.lexus h3 {
	padding-left: 27px;
	margin-bottom: 20px;
}

.lexus a {
	color: #222;
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
	font-family: Poppins;
}

.lexus p {
	font: 12px/1.7143 'Hind';
	color: #444;
}

.box6 {
	width: 100%;
	height: 550px;
	background: url(../img/content/bg/bg-1.jpg) repeat fixed center;
	position: relative;

}

.zhezhao2 {
	width: 100%;
	height: 550px;
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	z-index: 2;
}

.box6 .feature p,
.box6 .feature h2 {
	color: #FFFFFF;
}

.box7 {
	width: 100%;
	height: 431px;
	position: relative;
	z-index: 4;
}

.balancing {
	width: 263px;
	height: 373px;
	position: absolute;
	box-shadow: 0 0 20px rgb(0 0 0 / 45%);
	top: -283px;
	color: #222222;
	background-color: #F4F4F4;
	z-index: 5;
	text-align: center;
}

.balancing:hover {
	background-color: #D01818;
	color: #FFFFFF;
}

.balancing:nth-of-type(1) {
	left: 380px;
}

.balancing:nth-of-type(2) {
	left: 673px;
}

.balancing:nth-of-type(3) {
	left: 966px;
}

.balancing:nth-of-type(4) {
	left: 1259px;
}

.balancing img {
	width: 65px;
	height: 65px;
	margin-top: 45px;
	margin-bottom: 25px;
}

.h3x {
	margin-top: 0;
	margin-bottom: 27px;
	font-size: 16px;
	font-weight: 600;
}

strong {
	margin-top: 5px;
	font-size: 20px;
}

.p {
	font: 12px/1.7143 'Hind';
	color: #444;
	margin-bottom: 7px;
	padding: 0 30px;
}

.balancing:hover .p {
	color: #FFFFFF;
}

.line6 {
	border: 1px #D01818 solid;
	position: absolute;
	bottom: 55px;
	left: 121px;
	width: 18px;
}

.balancing:hover .line6 {
	border: 1px #ffffff solid;
}

.box7-1 {
	width: 100%;
	height: 100%;
	position: relative;
}

.stock {
	height: 93px;
	width: 267px;
	position: absolute;
	text-align: center;
	bottom: 115px;
}

.stock:nth-of-type(1) {
	left: 380px;
}

.stock:nth-of-type(2) {
	left: 673px;
}

.stock:nth-of-type(3) {
	left: 966px;
}

.stock:nth-of-type(4) {
	left: 1259px;
}

.stock h3 {
	color: #d01818;
}

.stock .p {
	margin-bottom: 3px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: #444;
}

.box8 {
	width: 100%;
	height: 891px;
	position: relative;
	background-image: url(../img/content/bg/bg-5.jpg);
	background-size: cover;
	z-index: 1;
}

#tit {
	display: block;
	font-size: 1.5em;
	color: #FFFFFF;
}

.zhezhao3 {
	position: absolute;
	width: 100%;
	height: 891px;
	background-color: rgba(254, 254, 254, 0.7);
	z-index: 2;
}

.container {
	width: 1140px;
	height: 510px;
	position: relative;
}

.ford0 {
	width: 458px;
	height: 505px;
	background-color: #ffffff;
}

.ford {
	width: 458px;
	height: 100px;
	margin-bottom: 1px;
	background-color: #ececec;

}

.ford:hover {
	background-color: #D01818;

}

.ford:hover .lines {
	color: #FFFFFF
}

.ford h4 {
	margin-bottom: 4px;
	font: 600 16px Poppins;
	white-space: nowrap;
	letter-spacing: .01em;
	color: #222;
	padding: 25px 30px 5px 0px;
}

.ford span {
	padding: 1px 30px 25px 50px;
}

.ford span,
.ford span strong {
	font-weight: 500;
	white-space: nowrap;
	color: #888;
	font: 14px/1.7143 'Hind';
}

.ford span strong {
	font-weight: 700;
}

.fordpic {
	width: 682px;
	height: 505px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 459px;
}

.order {
	text-align: center;
	padding-top: 10px;
	width: 40px;
	height: 30px;
	position: fixed;
	left: 0;
	top: 140px;
	background-color: #FFFFFF;
	border: #DDDDDD 1px solid;
	z-index: 10;
}

.ford h4 .lines {
	font-size: 1rem;
	font-weight: bolder;
	color: #D01818;
	padding: 0 15px;
}

.box9 {
	width: 100%;
	height: 976px;
	background-color: #FFFFFF;
}

.motorland {
	width: 1140px;
	height: 762px;
	padding: 100px 15px;
	position: relative;
}

.about {
	height: 100%;
	width: 600px;
	text-align: left;
	position: absolute;

}

.visited {
	width: 585px;
	height: 306px;
	text-align: left;
	padding: 81px 0;
	margin: 60px 0;
}

.visited1 {
	font: 600 18px/1.2 Poppins;
	letter-spacing: .01em;
	color: #222;
}

.visited2 {
	margin-bottom: 20px;
	font: 300 24px Poppins;
	color: #444;
}

.visited .visited3 {
	margin: 0 0 50px;
	font: 14px/1.7143 'Hind';
	color: #444;
}

.btn:hover {
	box-shadow: 0 0 1px 0 #000;
	text-shadow: 0 0 1px #000;
}

.btn {
	overflow: hidden;
	display: inline-block;
	height: 44px;
	margin-bottom: 0;
	padding: 0 20px;
	font: 600 12px/40px Poppins;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 2px solid transparent;
	white-space: nowrap;
	user-select: none;
	text-transform: uppercase;
	color: white;
	transition: all .3s;
	letter-spacing: .05em;
	border-radius: 2px;
}

.visited a,
.buy a {
	text-decoration: none;
}

.btn-dark {
	background-color: #222;
}

.btn-red {
	background-color: #D01818;
}

.aboutpic {
	height: 100%;
	left: 665px;
	text-align: left;
	position: absolute;
	padding-top: 105px;
}

.aboutend {
	height: 100%;
	left: 1029px;
	width: 339px;
	position: absolute;
	padding-top: 164px;
}

.aboutend1 {
	margin-bottom: 34px;
	padding-left: 77px;
	width: 262px;
	height: 138px;

}

.aboutend1:hover .aboutend3 {
	color: #D01818;
}

.aboutend1:hover .aboutend4 {
	background-color: #000000;
}

.aboutend2 {
	margin-bottom: 14px;
	font: 600 16px Poppins;
	color: #222;
}

.aboutend3 {
	font: 14px/1.7143 'Hind';
	color: #444;
}

.aboutend4 {
	display: inline-block;
	width: 20px;
	height: 3px;
	background-color: #D01818;
}

.frame {
	width: 60px;
	padding-top: 164px;
	left: 1029px;
	height: 100%;
	position: absolute;
}

.aboutendpic {
	width: 58px;
	height: 58px;
	position: absolute;
	left: 0px;

}

.aboutendpic img {
	width: 58px;
	height: 58px;
}

.aboutendpic:nth-of-type(1) {
	top: 164px;
}

.aboutendpic:nth-of-type(2) {
	top: 342px;
}

.aboutendpic:nth-of-type(3) {
	top: 506px;
}

.tobuy {
	width: 100%;
	height: 464px;
	position: relative;
}

.tobuy1 {
	width: 950px;
	height: 424px;
	margin: 20px 0;
	background: url(../img/content/bg/bg-4.jpg) no-repeat fixed;
	position: absolute;
	background-size: cover;

}

.tozhe,
.tozhe1 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.tozhe-red {
	background-color: rgba(255, 0, 0, 0.5);
}

.tozhe-black {
	background-color: rgba(0, 0, 0, 0.5);
}

.tobuy2 {
	position: absolute;
	left: 950px;
	width: 950px;
	height: 464px;
	background: url(../img/content/bg/bg-3.jpg) no-repeat fixed;
	background-size: cover;
}

.buy {
	margin: 100px 0 0 380px;
	position: relative;
	font: 14px/1.7143 'Hind';
	width: 423px;
	height: 234px;
}

.tozhe-black .buy {
	margin: 100px 0 0 200px;
}

.buy1 {
	margin-top: 5px;
	margin-bottom: 20px;
	font-size: 18px;
	letter-spacing: .03em;
	color: #fff;
	line-height: 1.1;
	font-weight: 600;
	font-family: Poppins;
}

.buy2 {
	margin-top: 10px;
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .03em;
	color: #fff;
}

.btn-white {
	margin-top: 34px;
	padding: 0 40px;
	border-color: #fff;
	background-color: transparent;
}

.buy3 {
	color: #fff;
}

.team {
	width: 100%;
	height: 986px;

}

.teambox {
	width: 1140px;
	height: 100%;
}

.eteam1 {
	width: 1140px;
	height: 522px;
}


.teambox .msrp {
	width: 100%;
	height: 396px;
	position: relative;
}

.teambox .msrpbox {
	width: 360px;
	height: 552px;
	position: absolute;
	top: 0;
	overflow: hidden;
}

.teambox .msrpbox img {
	width: 360px;
	height: 280px;
}

.teambox .msrpbox:nth-of-type(1) {
	left: 0;
}

.teambox .msrpbox:nth-of-type(2) {
	left: 386px;
}

.teambox .msrpbox:nth-of-type(3) {
	left: 772px;
}

.teambox .price {
	position: absolute;
	right: 20px;
	top: 220px;
	background-color: #d01818;
	padding: 0 15px;
	font-family: Poppins;
	font-weight: 600;
	line-height: 38px;
	color: white;
}

.teambox .msrpbox .mi {
	width: 356px;
	height: 40px;
	margin-bottom: 34px;
}

.teambox .msrpbox .mi ul {
	display: table;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 6px;
	font: 14px/1.7143 'Hind';
	color: #444;
	border: 1px solid #eee;
}

.teambox .msrpbox .mi li {
	display: table-cell;
	padding: 0;
	line-height: 40px;
	height: 40px;
	text-align: center;
	border-right: 1px solid #eee;
	font: 600 12px/40px Poppins;
	color: #888;

}

.lexus1 {
	width: 100%;
	text-align: center;
}

.name {
	margin-top: 47px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: #222;
	margin-bottom: 6px;
	line-height: 1.1;
}

.euis {
	margin-top: 20px;
	margin-bottom: 14px;
	padding-bottom: 22px;
}

body {
	font: 14px/1.7143 'Hind';
	color: #444;
}

.photo {
	width: 100%;
	height: 260px;
	background-color: #f4f4f4;
}

.choose {
	width: 100%;
	height: 708px;
}

.all {
	width: 1140px;
	padding: 0 15px;
	position: relative;
}

.all li {
	float: left;
	padding-right: 0;
	padding-left: 0;
	text-align: -webkit-match-parent;
	border: #FFFFFF 2px solid;
}

.all li a {
	text-decoration: none;
	color: #2f2f2f;
	border-color: #444;
	position: relative;

	padding: 0 24px;
	font: 500 14px/36px Poppins;

	color: #888;
	border: 2px solid transparent;
	border-radius: 2px;
}

.all li:hover {
	border: #444444 2px solid;
}

.all li:hover .all li a {
	color: #000000;
}

.all ul {
	margin-top: 37px;
	margin-bottom: 36px;
	margin-left: 0;
	padding-left: 200px;
	text-align: center;
}

.choose1 {
	width: 100%;
	height: 600px;

}

.choose1 li {
	float: left;
	height: 296px;
}

.choose1 li img {
	width: 380px;
}

.topmake {
	width: 100%;
	height: 744px;
	overflow: hidden;
}

.alfa {
	width: 199px;
	height: auto;
	float: left;
}

.romeo {
	width: 585px;
	height: 306px;
	text-align: left;
	padding: 81px 0;
	margin: 60px 0;
}

a {
	text-decoration: none;
}

.remeo li a {
	display: block;
	padding-bottom: 12px;
	font-weight: 600;
	color: #444;
	text-decoration: none;
}

.remeo li a:hover {
	color: #D01818;

}

.remeo ul {
	margin-bottom: 40px;
}

.rental {
	width: 316px;
	height: 450px;
	padding: 44px 30px 30px 44px;
	position: absolute;
	background-color: #15191a;
	color: #FFFFFF;
	left: 740px;
	top: 100px;
}

.checkbox0 {
	position: absolute;
	left: 44px;
	top: 182px;
}

.checkbox {
	position: absolute;
}

.checkbox:nth-of-type(1) {
	top: 0px;
}

.checkbox:nth-of-type(2) {
	top: 29px;
}

.checkbox:nth-of-type(3) {
	top: 58px;
}

.checkbox:nth-of-type(4) {
	top: 87px;
}

.checkbox:nth-of-type(5) {
	top: 116px;
}

.rental1 {
	font: 18px/1 Poppins;
}

.rental2 {
	color: #d01818;
	margin-bottom: 13px;
	font: 600 36px/1 Poppins;
	letter-spacing: .025em;
}

.rental3 {
	margin-bottom: 17px;
	font-size: 16px;
	font-weight: 500;
}

.rental ul {
	margin-bottom: 40px;
	padding-left: 0;
	list-style-type: none;
}

.rental ul li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 30px;
	display: list-item;
	text-align: -webkit-match-parent;
}

.will {
	width: 100%;
	height: 344px;
	background: url(../img/content/bg/bg-6.jpg) repeat fixed;
	background-size: cover;
	position: relative;
}

.will1 {
	width: 100%;
	height: 185px;
	position: relative;

}

.will-1 {
	width: 480px;
	height: 263px;
	padding-left: 60px;
	margin: 30px 15px;
	position: absolute;
	box-shadow: 0 0 20px rgb(0 0 0 / 45%);
	top: -195px;
	background-color: #f4f4f4;
}

.will-1:nth-of-type(1) {
	left: 381px;
}

.will-1:nth-of-type(2) {
	left: 961px;
}

.will-2 {
	width: 80px;
	height: 80px;
	position: absolute;
	left: 60px;
	top: -35px;

}

.will-3 {
	width: 60px;
	height: 50px;
	position: absolute;
	right: 40px;
	top: 40px;

}

.will-4 {
	width: 400px;
	height: 130px;
	position: absolute;
	left: 60px;
	top: 80px;

}

.span {
	display: block;
	font: 600 16px Poppins;
	letter-spacing: .02em;
	color: #222;
}

.shop {
	width: 100%;
	height: 1167px;

}

.gauge {
	width: 1140px;
	height: auto;
}

.gauge1 {
	float: left;
}

.latest {
	width: 100%;
	height: 1048px;
	background: url(../img/content/bg/bg-7.jpg) no-repeat fixed;
	background-size: cover;
	position: relative;
}

.zhezhao4 {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	position: absolute;
	left: 0;
	top: 0;
}

.post {
	width: 360px;
	height: 631px;
	position: absolute;
	margin-right: 20px;
	background-color: #FFFFFF;

}

.post0 {
	width: 100%;
	position: relative;
}

.post:nth-of-type(1) {
	left: 380px;
}

.post:nth-of-type(2) {
	left: 780px;
}

.post:nth-of-type(3) {
	left: 1180px;
}

.postpic,
.postpic img {
	width: 360px;
	height: 250px;
}

.postpic {
	position: absolute;
	top: 0;
	left: 0;

}

.postpic1 {
	position: absolute;
	border: 38px;
	overflow: hidden;
	top: 200px;
	left: 30px;
	border-radius: 38px 38px;
}

.post1 {
	left: 30px;
	top: 350px;
	width: 300px;
	position: absolute;
	overflow: hidden;
}

.w300 {
	width: 300px;
}

.last {
	width: 100%;
	height: 143px;
	padding: 104px 0;
}

.auto {
	width: 238px;
	height: 115px;
	padding: 10px;
	margin: 0 25px;
	float: left;
	text-align: center;
	position: relative;
}

.zhezhao5 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
}

.zhezhao5:hover {
	background-color: rgba(255, 255, 255, 0.0);
}

.end {
	width: 100%;
	height: 547px;
	background: url(../img/content/bg/bg-1.jpg) no-repeat;
	background-size: cover;
	position: relative;
}

.end-1 {
	width: 263px;
	height: 100%;
	position: absolute;
	left: 300px;
	top: 110px;
}

.end-1 img {
	margin: 40px 0;
}

.end-1 p:hover {
	color: #D01818;
}

.end-1 p {
	color: #868686;
}

.end-2 {
	width: 310px;
	height: 100%;
	position: absolute;
	left: 650px;
	top: 180px;
}

.end-2-1 {
	color: #868686;
	position: absolute;
	top: 60px;
}

.end-2-1 li:hover {
	color: #D01818;
}

.end-2-1 li {
	margin-bottom: 10px;
}

.end-2-1:nth-of-type(1) {
	left: 0;
}

.end-2-1:nth-of-type(2) {
	left: 150px;
}

.end-2-1 span {
	color: #ffffff;
	margin-right: 7px;
}

.end-tit {
	width: 320px;
	position: absolute;
	top: 0;
	left: 0;
}


.end-tit span {
	color: #D01818;
	font-weight: bolder;
	margin-right: 30px;
}

.end-tit h2,
.end-tit h4 {
	font-size: 1em;
	margin-left: 0px;
	color: #FFFFFF;
}

.end-tit h4 {
	margin-left: 60px;
}

.sell {
	width: 300px;
	height: 70px;
	padding-top: 20px;
	margin-left: 900px;
}

.end-3 {
	width: 263px;
	height: 100%;
	position: absolute;
	left: 1000px;
	top: 180px;
}

.sell img {
	margin: 15px 15px 0 10px;
}

.end-4 {
	width: 320px;
	height: 100%;
	position: absolute;
	left: 1225px;
	top: 180px;
}

.black1 {
	background-color: rgba(0, 0, 0, 0.8);
}

.end-4 li {
	color: #FFFFFF;
}

.end-4 li img {
	width: 25px;
	height: 25px;
}
.w1903{
	width: 1903px;
	height: auto;
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/style-artice.css" />
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/act1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="w1903 center">
			<div class="order">
				<img src="img/general/Snipaste_2021-09-29_07-07-32.png">
			</div>
			<div id="page-preloader">
				<div class="box1 center">
					<ul id="list1">
						<li><img src="./img/general/Snipaste_2021-09-27_09-42-24.png">Mon - Fri : 0900am to 0600pm</li>
						<li><img src="./img/general/Snipaste_2021-09-27_09-43-12.png">+ 042 798 3549</li>
						<li><img src="./img/general/Snipaste_2021-09-27_09-43-29.png">support@motorland.com</li>
					</ul>
					<ul class="fr">
						<li><img src="./img/general/Snipaste_2021-09-27_09-49-02.png"></li>
						<li><img src="./img/general/Snipaste_2021-09-27_09-49-32.png"></li>
						<li><img src="img/general/Snipaste_2021-09-27_09-50-11.png"></li>
						<li><img src="img/general/Snipaste_2021-09-27_09-50-47.png"></li>
						<li><img src="img/general/Snipaste_2021-09-27_09-51-12.png"></li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			
			<div class="box2">
				<div class="box2-1 center">
					<div class="box2-2 fl"><img src="img/general/logo-dark.png"></div>
					<div class="box2-3 fl">
						<ul>
							<li><a href="index.html">Home</a></li>
							<li><a href="list.html">List</a></li>
							<li><a href="article.html">Article</a></li>
							<li><a href="#">Listings</a></li>
							<li><a href="#">Blog</a></li>
							<li><a href="#">Pages</a></li>
							<div class="clear"></div>
						</ul>
					</div>
			
					<div class="sell">
						<img src="./img/general/Snipaste_2021-09-27_11-05-40.png">
						<img src="./img/general/Snipaste_2021-09-27_11-05-56.png">
						<div class="btn btn-red">SELL CAR</div>
			
					</div>
					<div class="box1-1-2-1">
						<div class="fl">
							<div class="box1-1-3">测评</div>
							<div class="box1-1-3">教程</div>
							<div class="box1-1-3">评测</div>
							<div class="box1-1-3">攻略</div>
						</div>
						<div class="fl">
							<div class="box1-1-3">公告</div>
			
						</div>
			
					</div>
					<div class="clear"></div>
				</div>
			
			</div>
			<div class="playbox center relative">
				<!-- <div class="picleft">
					<img src="img/general/playful_white@x2.png" >
				</div> -->
				<div class="pixapp">
					<div class="picapp1">
						MODEL 2018
					</div>
					<div class="picapp2">
						<div>
							<h2>MERCEDES BENZ</h2>
							<p>SMART DRIVE</p>
						</div>
						<div class="starting">
							Starting $560/M
						</div>
						<div class="book">
							BOOK NOW
						</div>
						<div class="line"></div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="zhezhao1">
			
				</div>
				<div class="picbox">
					<img src="img/components/b-main-slider/1.jpg">
					<img src="img/components/b-main-slider/2.jpg">
				</div>
			</div>
			<div class="box3">
				<div class="box3-1 center">
					<div class="largest">
						<img src="./img/general/Agenda.svg">
						<h3>Largest Dealership of Cars</h3>
						<p>MotorLand is nisi aliquip ex consequat duis velit esse cillum dolore fugiat nulla pariatur
							excepteur sint occaecat.</p>
						<div class="line1"></div>
					</div>
					<div class="largest">
						<img src="./img/general/Radio.svg">
						<h3>We Offers Lower Cars Prices</h3>
						<p>MotorLand is nisi aliquip ex consequat duis velit esse cillum dolore fugiat nulla pariatur
							excepteur sint occaecat.</p>
						<div class="line1"></div>
					</div>
					<div class="largest">
						<img src="./img/general/Column.svg">
						<h3>Multipoint Safety Checks</h3>
						<p>MotorLand is nisi aliquip ex consequat duis velit esse cillum dolore fugiat nulla pariatur
							excepteur sint occaecat.</p>
						<div class="line1"></div>
					</div>
				</div>
				<div class="box3-2 center">
					<div class="find">
						<h2>Find Your Dream Car</h2>
						<p>Tempor incididunt labore dolore magna aliqua sed ipsum</p>
						<div class="line3"></div>
						<div class="line3"></div>
						<div class="line3"></div>
			
						<p><img src="img/general/Snipaste_2021-09-27_16-39-31.png"></p>
					</div>
				</div>
			</div>
			
			<div class="box4">
				<div class="input center">
			
					<div class="input1">
						<select name="">
							<option value=""> Select Make</option>
							<option value="">Make 1</option>
							<option value="">Make 2</option>
							<option value="">Make 3</option>
						</select>
						<select name="">
							<option value=""> Select Model</option>
							<option value="">Model 1</option>
							<option value="">Model 2</option>
							<option value="">Model 3</option>
						</select>
					</div>
					<div class="input1">
						<select name="">
							<option value=""> Select Year</option>
							<option value="">2016</option>
							<option value="">2017</option>
							<option value="">2018</option>
						</select>
						<select name="">
							<option value=""> Select Car Status</option>
							<option value="">Make 1</option>
							<option value="">Make 2</option>
							<option value="">Make 3</option>
						</select>
					</div>
					<div class="input1">
						<select name="">
							<option value=""> Select All Location</option>
							<option value="">Make 1</option>
							<option value="">Make 2</option>
							<option value="">Make 3</option>
						</select>
						<select name="">
							<option value=""> Select All Location</option>
							<option value="">Make 1</option>
							<option value="">Make 2</option>
							<option value="">Make 3</option>
						</select>
					</div>
					<div class="search1 fl">
						<p><input type="button" name="" id="" value="SEARCH VEHICLE" /></p>
						<a href="#">ADVANCED SEARCH</a>
					</div>
					<div class="clear">
					</div>
				</div>
			</div>
			<div class="box5">
				<div class="feature">
					<h2>Featured Vehicles</h2>
					<p>Tempor incididunt labore dolore magna alique</p>
					<div class="line4"></div>
					<div class="line4"></div>
					<div class="line4"></div>
			
				</div>
				<div class="msrp">
					<div class="msrpbox">
						<div class="zhezhao6"></div>
						<img src="img/components/b-goods/featured-2.jpg">
						<div class="price">
							$45,000&nbsp;&nbsp;MSRP $27,000
						</div>
						<div class="mi">
							<ul>
								<li>35,000 mi</li>
								<li>Model: 2017</li>
								<li>Auto</li>
								<li>320 hp</li>
			
							</ul>
						</div>
						<div class="line5"></div>
						<div class="lexus">
							<h3><a href="#">Lexus GX 490i Hybird</a></h3>
							<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
							</p>
						</div>
					</div>
					<div class="msrpbox">
						<div class="zhezhao6"></div>
						<img src="img/components/b-goods/featured-1.jpg">
						<div class="price">
							$45,000&nbsp;&nbsp;MSRP $27,000
						</div>
						<div class="mi">
							<ul>
								<li>35,000 mi</li>
								<li>Model: 2017</li>
								<li>Auto</li>
								<li>320 hp</li>
			
							</ul>
						</div>
						<div class="line5"></div>
						<div class="lexus">
							<h3><a href="#">Lexus GX 490i Hybird</a></h3>
							<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
							</p>
						</div>
					</div>
					<div class="msrpbox">
						<div class="zhezhao6"></div>
						<img src="img/components/b-goods/featured-3.jpg">
						<div class="price">
							$45,000&nbsp;&nbsp;MSRP $27,000
						</div>
						<div class="mi">
							<ul>
								<li>35,000 mi</li>
								<li>Model: 2017</li>
								<li>Auto</li>
								<li>320 hp</li>
			
							</ul>
						</div>
						<div class="line5"></div>
						<div class="lexus">
							<h3><a href="#">Lexus GX 490i Hybird</a></h3>
							<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
							</p>
						</div>
					</div>
					<div class="msrpbox">
						<div class="zhezhao6"></div>
						<img src="img/components/b-goods/featured-4.jpg">
						<div class="price">
							$45,000&nbsp;&nbsp;MSRP $27,000
						</div>
						<div class="mi">
							<ul>
								<li>35,000 mi</li>
								<li>Model: 2017</li>
								<li>Auto</li>
								<li>320 hp</li>
			
							</ul>
						</div>
						<div class="line5"></div>
						<div class="lexus">
							<h3><a href="#">Lexus GX 490i Hybird</a></h3>
							<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
							</p>
						</div>
					</div>
					<div class="msrpbox">
						<div class="zhezhao6"></div>
						<img src="img/components/b-goods/featured-5.jpg">
						<div class="price">
							$45,000&nbsp;&nbsp;MSRP $27,000
						</div>
						<div class="mi">
							<ul>
								<li>35,000 mi</li>
								<li>Model: 2017</li>
								<li>Auto</li>
								<li>320 hp</li>
			
							</ul>
						</div>
						<div class="line5"></div>
						<div class="lexus">
							<h3><a href="#">Lexus GX 490i Hybird</a></h3>
							<p>Duis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur excepteur ipsum.
							</p>
						</div>
					</div>
			
				</div>
			</div>
			<div class="box6">
				<div class="zhezhao2">
					<div class="feature white">
						<h2>What We Offers</h2>
						<p>Tempor incididunt labore dolore duis lorem magna aliqua sed ipsum</p>
						<div class="line4"></div>
						<div class="line4"></div>
						<div class="line4"></div>
			
					</div>
				</div>
			
			</div>
			<div class="box7">
				<div class="balancing">
					<img src="./img/general/Radio.svg">
					<h3 class="h3x">
						The Wheel<br />
						<strong>Balancing</strong>
					</h3>
					<p class="p">MotorLand is nisi aliquip ex con velit esse cillum dolore fugiatal excepteur sint occaecat.
					</p>
					<div class="line6"></div>
				</div>
				<div class="balancing">
					<img src="./img/general/Radio.svg">
					<h3 class="h3x">
						Transmission<br />
						<strong>Installation</strong>
					</h3>
					<p class="p">MotorLand is nisi aliquip ex con velit esse cillum dolore fugiatal excepteur sint occaecat.
					</p>
					<div class="line6"></div>
				</div>
				<div class="balancing">
					<img src="./img/general/Radio.svg">
					<h3 class="h3x">
						CarZone<br />
						<strong>Painting</strong>
					</h3>
					<p class="p">MotorLand is nisi aliquip ex con velit esse cillum dolore fugiatal excepteur sint occaecat.
					</p>
					<div class="line6"></div>
				</div>
				<div class="balancing">
					<img src="./img/general/Radio.svg">
					<h3 class="h3x">
						CarZone<br />
						<strong>Inspection</strong>
					</h3>
					<p class="p">MotorLand is nisi aliquip ex con velit esse cillum dolore fugiatal excepteur sint occaecat.
					</p>
					<div class="line6"></div>
				</div>
			
				<div class="box7-1">
					<div class="stock">
						<h3>3874</h3>
						<p class="p">VEHICLES STOCK</p>
						<!-- <div class="line6"></div> -->
					</div>
					<div class="stock">
						<h3>299+</h3>
						<p class="p">DEALERS SERVED</p>
						<!-- <div class="line6"></div> -->
					</div>
					<div class="stock">
						<h3>6403</h3>
						<p class="p">HAPPY CUSTOMERS</p>
						<!-- <div class="line6"></div> -->
					</div>
					<div class="stock">
						<h3>1450+</h3>
						<p class="p">VEHICLES ON SALE</p>
						<!-- <div class="line6"></div> -->
					</div>
				</div>
			</div>
			<div class="box8">
				<div class="zhezhao3">
					<div class="feature">
						<h2>Recent Cars</h2>
						<p>Tempor incididunt labore dolore magna cillium fugiat alique</p>
						<div class="line4"></div>
						<div class="line4"></div>
						<div class="line4"></div>
			
					</div>
					<div class="container center">
						<div class="ford0">
							<div class="ford">
								<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
								<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
							</div>
							<div class="ford">
								<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
								<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
							</div>
							<div class="ford">
								<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
								<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
							</div>
							<div class="ford">
								<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
								<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
							</div>
							<div class="ford">
								<h4><span class="lines">—</span>Chevrolet Silverado 1500</h4>
								<span><strong>MSRP $30,862,</strong>5.3L V8, Automatic 4-Speed, 4X2</span>
							</div>
						</div>
						<div class="fordpic">
							<img src="img/components/b-thumb-slider/img-1.jpg">
							<img src="img/components/b-thumb-slider/img-1.jpg">
						</div>
					</div>
				</div>
			</div>
			<div class="box9">
				<div class="motorland center">
					<div class="about">
						<h2>Recent Cars</h2>
						<p>Tempor incididunt labore dolore magna cillium fugiat alique</p>
						<div class="line7"></div>
						<div class="line7"></div>
						<div class="line7"></div>
						<div class="visited">
							<div class="visited1">
								We are a Trusted Name in Auto Industry
							</div>
							<div class="visited2">
								Visited by Million of Car Buyers Every Month!
							</div>
							<p class="visited3">
								MotorLand is aliquip exd ea consequat duis lorem ipsum dolor sit amet consectetur dipis
								icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
								minim veniam quis nostrud exercitation.
							</p>
							<p class="visited3">
								Slamco laboris nisi ut aliquip ex ea comdo consequat uis aute irure dolor raeprehenderit
								voluptate velit esse cillum dolore eu fugiat nulla pariatur.
							</p>
							<a class="btn btn-dark" href="#">Our partners</a>
							<a class="btn btn-red" href="#">Our partners</a>
						</div>
					</div>
					<div class="aboutpic">
						<img src="./img/content/bg/bg-2.png">
					</div>
					<div class="frame">
						<div class="aboutendpic">
							<img src="./img/general/Column.svg">
						</div>
						<div class="aboutendpic">
							<img src="./img/general/Column.svg">
						</div>
						<div class="aboutendpic">
							<img src="./img/general/Column.svg">
						</div>
					</div>
					<div class="aboutend">
						<div class="aboutend1">
							<div class="aboutend2">
								10 Years in Business
							</div>
							<div class="aboutend3">
								MotorLand is nisi aliquip ea consequat duis velit esse cillum dolore fugiat nulla pariatur
								excepteur sint occaecat.
							</div>
							<div class="aboutend4">
			
							</div>
						</div>
						<div class="aboutend1">
							<div class="aboutend2">
								Trusted by Auto Buyers
							</div>
							<div class="aboutend3">
								MotorLand is nisi aliquip ea consequat duis velit esse cillum dolore fugiat nulla pariatur
								excepteur sint occaecat.
							</div>
							<div class="aboutend4">
			
							</div>
						</div>
						<div class="aboutend1">
							<div class="aboutend2">
								Affordable Auto Prices
							</div>
							<div class="aboutend3">
								MotorLand is nisi aliquip ea consequat duis velit esse cillum dolore fugiat nulla pariatur
								excepteur sint occaecat.
							</div>
							<div class="aboutend4">
			
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="tobuy">
				<div class="tobuy1">
					<div class="tozhe tozhe-red">
						<div class="buy">
							<h2 class="buy1">
								Are You Looking<br />
								<strong class="buy2">TO BUY A CAR?</strong>
							</h2>
							<div class="buy3">
								MotorLand is nisi aliquip exa con velit esse cillum dolore fugiatal sint occaecat excepteur
								ipsum dolor sit amet consectetur.
							</div>
							<a class="btn btn-white" href="#">search your car</a>
			
						</div>
					</div>
				</div>
				<div class="tobuy2">
					<div class="tozhe tozhe-black">
						<div class="buy">
							<h2 class="buy1">
								Are You Looking<br />
								<strong class="buy2">TO BUY A CAR?</strong>
							</h2>
							<div class="buy3">
								MotorLand is nisi aliquip exa con velit esse cillum dolore fugiatal sint occaecat excepteur
								ipsum dolor sit amet consectetur.
							</div>
							<a class="btn btn-white" href="#">search your car</a>
			
						</div>
					</div>
				</div>
			</div>
			<div class="team">
				<div class="feature">
					<h2>Executive Team</h2>
					<p>Tempor incididunt duis labore dolore magna aliqua sed ipsum</p>
					<div class="line4"></div>
					<div class="line4"></div>
					<div class="line4"></div>
			
				</div>
				<div class="teambox center">
					<div class="msrp">
						<div class="msrpbox">
							<img src="img/components/b-team/group-1_3.jpg">
							<div class="price">
								Owner & CEO
							</div>
							<div class="lexus1">
								<h3 class="name">William J. Smith</h3>
								<div class="euis">
									Euis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
									excepteur ipsum
								</div>
							</div>
							<div class="mi">
								<ul>
									<li>FaceBook</li>
									<li>Twitter</li>
									<li>LinkedIn</li>
									<li>YouTUbe</li>
			
								</ul>
							</div>
			
						</div>
						<div class="msrpbox">
							<img src="img/components/b-team/group-1_1.jpg">
							<div class="price">
								Senior Manager
							</div>
							<div class="lexus1">
								<h3 class="name">William J. Smith</h3>
								<div class="euis">
									Euis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
									excepteur ipsum
								</div>
							</div>
							<div class="mi">
								<ul>
									<li>FaceBook</li>
									<li>Twitter</li>
									<li>LinkedIn</li>
									<li>YouTUbe</li>
			
								</ul>
							</div>
						</div>
						<div class="msrpbox">
							<img src="img/components/b-team/group-1_2.jpg">
							<div class="price">
								Dealers President
							</div>
							<div class="lexus1">
								<h3 class="name">William J. Smith</h3>
								<div class="euis">
									Euis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
									excepteur ipsum
								</div>
							</div>
							<div class="mi">
								<ul>
									<li>FaceBook</li>
									<li>Twitter</li>
									<li>LinkedIn</li>
									<li>YouTUbe</li>
			
								</ul>
							</div>
						</div>
			
			
					</div>
				</div>
			</div>
			
			<div class="photo">
				<div class="feature">
					<h2>Photo Gallery</h2>
					<p>Tempor incididunt labore dolore magna cillium fugiat</p>
					<div class="line4"></div>
					<div class="line4"></div>
					<div class="line4"></div>
			
				</div>
			</div>
			<div class="choose">
				<div class="all center">
					<ul>
						<li><a href="#">ALL</a></li>
						<li><a href="#">FOR SALE</a></li>
						<li><a href="#">NEW ARRIVALS</a></li>
						<li><a href="#">TOP BRANDS</a></li>
						<li><a href="#">FERRARI</a></li>
						<li><a href="#">MERCEDES</a></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="choose1">
					<ul>
						<li><img src="img/content/gallery/384x300/1.jpg"></li>
						<li><img src="img/content/gallery/384x300/2.jpg"></li>
						<li><img src="img/content/gallery/384x300/3.jpg"></li>
						<li><img src="img/content/gallery/384x300/4.jpg"></li>
						<li><img src="img/content/gallery/384x300/5.jpg"></li>
						<li><img src="img/content/gallery/384x300/6.jpg"></li>
						<li><img src="img/content/gallery/384x300/7.jpg"></li>
						<li><img src="img/content/gallery/384x300/8.jpg"></li>
						<li><img src="img/content/gallery/384x300/9.jpg"></li>
						<li><img src="img/content/gallery/384x300/10.jpg"></li>
						<div class="clear">
			
						</div>
					</ul>
				</div>
			</div>
			<div class="topmake">
				<div class="motorland center ">
					<div class="about">
						<h2>Top Car Makes</h2>
						<p>We have large number of Cars available, here you can browse by Make!</p>
						<div class="line7"></div>
						<div class="line7"></div>
						<div class="line7"></div>
						<div class="remeo">
							<div class="alfa">
								<ul>
									<li><a href="#">Alfa Romeo(256)</a></li>
									<li><a href="#">Alpine(157)</a></li>
									<li><a href="#">Alpine(145)</a></li>
									<li><a href="#">Aston Martin(456)</a></li>
									<li><a href="#">Audi(856)</a></li>
									<li><a href="#">Bently(125)</a></li>
									<li><a href="#">BMW(562)</a></li>
									<li><a href="#">Bugatti(562)</a></li>
								</ul>
							</div>
							<div class="alfa">
								<ul>
									<li><a href="#">Alfa Romeo(256)</a></li>
									<li><a href="#">Alpine(157)</a></li>
									<li><a href="#">Alpine(145)</a></li>
									<li><a href="#">Aston Martin(456)</a></li>
									<li><a href="#">Audi(856)</a></li>
									<li><a href="#">Bently(125)</a></li>
									<li><a href="#">BMW(562)</a></li>
									<li><a href="#">Bugatti(562)</a></li>
								</ul>
							</div>
							<div class="alfa">
								<ul>
									<li><a href="#">Alfa Romeo(256)</a></li>
									<li><a href="#">Alpine(157)</a></li>
									<li><a href="#">Alpine(145)</a></li>
									<li><a href="#">Aston Martin(456)</a></li>
									<li><a href="#">Audi(856)</a></li>
									<li><a href="#">Bently(125)</a></li>
									<li><a href="#">BMW(562)</a></li>
									<li><a href="#">Bugatti(562)</a></li>
								</ul>
							</div>
							<div class="clear"></div>
							<a class="btn btn-red" href="#">OSee all brands</a>
						</div>
					</div>
					<div class="rental">
						<div class="rental1">Best & Low Cost</div>
						<div class="rental2">CAR RENTAL</div>
						<div class="rental3">We have Effective and Efficient Vehicles for Car Rental to meet all your needs!
						</div>
						<ul>
							<li>Instant Quotes</li>
							<li>Unlimited Mileage</li>
							<li>No Booking Fees or Hidden Costs</li>
							<li>Hassle-Free Service</li>
							<li>Guranteed Reservations</li>
						</ul>
						<div class="checkbox0">
							<div class="checkbox">
								<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
							</div>
							<div class="checkbox">
								<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
							</div>
							<div class="checkbox">
								<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
							</div>
							<div class="checkbox">
								<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
							</div>
							<div class="checkbox">
								<img src="./img/general/Snipaste_2021-09-28_14-24-26.png">
							</div>
						</div>
			
			
					</div>
			
				</div>
			</div>
			<div class="will">
				<div class="tozhe tozhe-black">
			
				</div>
			</div>
			<div class="will1">
				<div class="will-1">
					<div class="will-2">
						<img src="img/components/b-blockquote/face-1.jpg">
					</div>
					<div class="will-3">
						<img src="./img/components/b-blockquote/ic-quotes.png">
					</div>
					<div class="will-4">
						<div class="line9"></div>
						<div class="lexus">
							<h3><a href="#">James Liam</a></h3>
							<span>Quality Assurance Manager</span>
							<p>Motorland uis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
								excepteur ipsum et dolore magna aliqua. Ut enim minim veniam quis nostrud exercitation
								ullamco.</p>
						</div>
					</div>
				</div>
				<div class="will-1">
					<div class="will-2">
						<img src="img/components/b-blockquote/face-2.jpg">
					</div>
					<div class="will-3">
						<img src="./img/components/b-blockquote/ic-quotes.png">
					</div>
					<div class="will-4">
						<div class="line9"></div>
						<div class="lexus">
							<h3><a href="#">Nick William</a></h3>
							<span>Quality Assurance Manager</span>
							<p>Motorland uis aute irure reprehender voluptate velit ese acium fugiat nulla pariatur lorem
								excepteur ipsum et dolore magna aliqua. Ut enim minim veniam quis nostrud exercitation
								ullamco.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="latest">
			
				<div class="zhezhao4">
					<div class="feature">
						<h2>Latest News</h2>
						<p>Tempor incididunt labore dolore magna clium fugiat alique</p>
						<div class="line4"></div>
						<div class="line4"></div>
						<div class="line4"></div>
					</div>
					<div class="post0">
						<div class="post">
							<div class="postpic">
								<img src="img/content/posts/360x250/1.jpg">
							</div>
							<div class="postpic1">
								<img src="img/content/posts/face/76x76_1.jpg">
							</div>
							<div class="post1">
								<div class="line9"></div>
								<div class="lexus w300">
									<h3><a href="#">Ford Motors overhauled its design team </a></h3>
									<p>Duis aute irure reprehender voluptate velits fugiat nulla pariatur excepteur ipsum
										doloe amet consecteur adipisicing elit.</p>
								</div>
							</div>
						</div>
			
						<div class="post">
							<div class="postpic">
								<img src="img/content/posts/360x250/2.jpg">
							</div>
							<div class="postpic1">
								<img src="img/content/posts/face/76x76_2.jpg">
							</div>
							<div class="post1">
								<div class="line9"></div>
								<div class="lexus w300">
									<h3><a href="#">Ford Motors overhauled its design team </a></h3>
									<p>Duis aute irure reprehender voluptate velits fugiat nulla pariatur excepteur ipsum
										doloe amet consecteur adipisicing elit.</p>
								</div>
							</div>
						</div>
						<div class="post">
							<div class="postpic">
								<img src="img/content/posts/360x250/3.jpg">
							</div>
							<div class="postpic1">
								<img src="img/content/posts/face/76x76_3.jpg">
							</div>
							<div class="post1">
								<div class="line9"></div>
								<div class="lexus w300">
									<h3><a href="#">Ford Motors overhauled its design team </a></h3>
									<p>Duis aute irure reprehender voluptate velits fugiat nulla pariatur excepteur ipsum
										doloe amet consecteur adipisicing elit.</p>
								</div>
							</div>
						</div>
			
					</div>
				</div>
			</div>
			<div class="last">
				<div class="auto">
					<div class="zhezhao5"></div>
					<img src="img/components/b-brands/4.jpg">
				</div>
				<div class="auto">
					<div class="zhezhao5"></div>
					<img src="img/components/b-brands/5.jpg">
				</div>
				<div class="auto">
					<div class="zhezhao5"></div>
					<img src="img/components/b-brands/6.jpg">
				</div>
				<div class="auto">
					<div class="zhezhao5"></div>
					<img src="img/components/b-brands/1.jpg">
				</div>
				<div class="auto">
					<div class="zhezhao5"></div>
					<img src="img/components/b-brands/2.jpg">
				</div>
				<div class="auto">
					<div class="zhezhao5"></div>
					<img src="img/components/b-brands/3.jpg">
				</div>
			
			</div>
			<div class="end">
				<div class="tozhe black1">
					<div class="end-1">
						<img src="./img/general/logo.png">
						<p>Duis aute irure reprehend voluptate velit ese acium fugiat nula pariatur exceptus ipsum dolor sit
							amet consectetur adipisic elita sed eiusmod tempor.</p>
						<img src="./img/general/Snipaste_2021-09-28_17-30-26.png">
					</div>
					<div class="end-2">
						<div class="end-tit">
							<h2><span>—</span>TOP BRANDS</h2>
						</div>
						<div class="end-2-1">
							<ul>
								<li><span>&gt</span>Alfa Romeo</li>
								<li><span>&gt</span>Ferrari</li>
								<li><span>&gt</span>BMW Series</li>
								<li><span>&gt</span>Mercedes</li>
								<li><span>&gt</span>Aston Martin</li>
								<li><span>&gt</span>Toyota</li>
							</ul>
			
						</div>
						<div class="end-2-1">
							<ul>
								<li><span>&gt</span>Alfa Romeo</li>
								<li><span>&gt</span>Ferrari</li>
								<li><span>&gt</span>BMW Series</li>
								<li><span>&gt</span>Mercedes</li>
								<li><span>&gt</span>Aston Martin</li>
			
							</ul>
			
						</div>
					</div>
					<div class="end-3">
						<div class="end-tit">
							<h2><span>—</span>CATEGORIES</h2>
						</div>
						<div class="end-2-1">
							<ul>
								<li><span></span></li>
							</ul>
			
						</div>
						<div class="end-2-1">
							<ul>
								<li><span>&gt</span>Alfa Romeo</li>
								<li><span>&gt</span>Ferrari</li>
								<li><span>&gt</span>BMW Series</li>
								<li><span>&gt</span>Mercedes</li>
								<li><span>&gt</span>Aston Martin</li>
			
							</ul>
			
						</div>
					</div>
					<div class="end-4">
						<div class="end-tit">
			
							<div id="tit">
								<span>—</span> ADDRESSINFORMATION
							</div>
							<h4>Call us<span>(042) 789 35490</span></h4>
						</div>
						<div class="end-2-1">
							<ul>
								<li><span></span></li>
							</ul>
			
			
						</div>
						<div class="end-2-1">
							<ul>
								<li><span></span></li>
								<li><span></span></li>
								<li><span><img
											src="img/general/Snipaste_2021-09-27_09-50-47.png"></span>support@motorland.com
								</li>
								<li><span><img src="./img/general/map-marker.png"></span>Fairview Ave, El Monte, CA, 91732
								</li>
								<li><span><img src="./img/general/map-marker.png"></span>Mon - Fri : 0900am to 0600pm</li>
			
							</ul>
			
						</div>
					</div>
				</div>
			
			</div>
			
			
		</div>

	</body>
</html>
那个座位是我的
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
关于汽车html网页设计完整版,10个以汽车为主题的网页设计与实现
qq_38515154的博客
05-09 451
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常
web课程设计：关于汽车html网页设计完整版,10个以汽车为主题的网页设计与实现
qq_3200628753的博客
12-17 76
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常...
7. web前端网页制作 汽车网站网页设计实例 大学生期末大作业 html+css+js
A240307的博客
03-14 1326
​本实例为html+css+javascript代码。该实例里面有设置导航栏效果、动态轮播特效、DIV、视频、登录页面等实例比较全面，有助于各位大小朋友学习,本文以“汽车”旅游为主题来设计实践，介绍如何通过从头开始设计汽车网站并将其转换为代码的过程。
【html网页设计】 汽车介绍特斯拉 (dreamweaver作业静态HTML网页设计模板)
12-19 437
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
汽车销售网站的设计和实现.doc
12-16
汽车销售网站的设计和实现 基于本文档，我们可以总结出以下几个关键知识点： 1. 网上汽车销售管理系统的设计与实现：本文档详细介绍了网上汽车销售管理系统的设计和实现过程，包括系统的需求分析、数据库设计、...
汽车电子商务的网页设计以及视觉呈现.docx
07-02
汽车电子商务的网页设计以及视觉呈现是现代汽车行业与互联网技术紧密结合的重要体现。随着电子商务的普及，汽车销售也逐渐从线下转移到线上，汽车电子商务网站已经成为消费者获取汽车信息、咨询和购买的重要平台。...
毕业设计，基于ASP+ACCESS开发的汽车销售系统BtoC电子商务网站，内含完整源代码，数据库，开题报告，论文答辩，毕业论文
最新发布
08-10
毕业设计，基于ASP+ACCESS开发的汽车销售系统BtoC电子商务网站，内含完整源代码，数据库，开题报告，论文答辩，毕业论文 随着Internet的不断普及，人们对于互联网技术的要求已不单单是浏览一下网页，收发电子邮件，...
汽车电子商务网站源码
08-28
布局方面，网站采用的是Div+CSS，这是一种现代网页设计的标准方式，它将内容与表现分离，使页面结构清晰，易于维护，同时支持响应式设计，能够适应不同设备的屏幕尺寸，提供良好的用户体验。 后台管理界面则是基于...
学生汽车网页设计作品静态HTML网页模板源码 大学生汽车网站制作 简单汽车网页设计成品
STU学生简单网页设计作品分享
11-18 6053
学生奥迪汽车静态网页设计模板网页作品介绍作品首页截图网页作品地址 网页作品介绍 本网页设计期末大作业成品使用DIV CSS布局制作，题材为奥迪概念车。顶部LOGO区及首页的汽车区使用 CSS3动画属性 制作了鼠标经过动画特效（鼠标经过图片缓慢放大，鼠标离开缓慢缩小）。同时顶部LOGO区域使用 CSS3动画属性 制作了响应式加载效果。 网页整体简洁大气，每个页面都配了不同的BANNER大图，每个页面也制作了返回顶部按钮，子页面顶部制作了返回首页按钮。除了CSS文件中 有几行CSS3动画样式（可删除），其他代码
一个汽车类DIV+css布局的html网站
02-17
汽车类网页代码，供学习使用，DIV+css布局，适合大家学习研究使用
HTML制作一个汽车介绍网站【大学生网页制作期末作业】
qq__3200628753的博客
12-16 30
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🚗汽车网站、🚘汽车介绍、🚍汽车官网、汽车租赁、企业网页 、等网站的设计与制作。🏷️ 此作品为学生汽车网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常...
优秀网页设计：30个优秀的汽车网站设计欣赏
weixin_30344131的博客
11-21 412
　　梦想天空和大家分享过各种类型的优秀网页设计，包括餐饮网站，旅游网站，电子商务网站等等。今天这篇文章和大家分享国外30个优秀的汽车网站设计作品欣赏，希望能带给你网站设计灵感。 您可能还喜欢 10套精美的免费网站后台管理系统模板 25个国外优秀的餐饮网站设计案例欣赏 20个独具创意的优秀个人博客设计案例 分享50个优秀的电子商务网站设计案例 分享25个优秀的活动邀请网站设计案例...
Web前端期末大作业---汽车主题网页设计002（HTML+CSS+JavaScript+）实现
chengyang_java的博客
01-14 7150
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页...
汽车网页设计模板以及源代码_如何设计好的网页？_搜狐汽车
weixin_39755952的博客
11-06 868
如何设计好的网页？设计师在进行网页设计的过程中，提升质量是非常有必要的，因为如果你的网页看起来非常的杂乱，那么网站的流量和收益自然也不会好到哪去。下面我们就来简单地说说，如何设计一个好的网页。一、了解用户心理对于网页设计师而言，如果你连用户的心理都不了解，那么你设计的网页也就很难得到用户的认可。设计师想要利用珍贵的几秒钟鼓励用户看更多内容，就需要根据用户的需求对页面进行调整。二、了解浏览器的兼容性...
web前端期末大作业--奥迪RS汽车主题官网设计（HTML+CSS+JavaScript）实现
热门推荐
java李阳勇的博客
09-24 1万+
酷炫奥迪RS汽车主题官网模板（HTML+CSS+JavaScript-前端大作业） 主要功能：首页、运动车型、奥迪运动基因、热门赛事、驾控体验中心、奥迪运动商城
学生网页设计代码成品 大学生汽车网页代做 红旗汽车网页设计模板下载 HTML汽车网站制作 dreamweaver学生汽车网页设计成品
STU学生简单网页设计作品分享
09-15 972
网页效果展示 首页 子页面（共4个子页面，此处仅展示一页） 网页下载地址 www.stu-works.com/html/qiche/422.html 网页作品介绍 作品采用DIV CSS布局制作，主题为红旗汽车介绍，共5个页面，1个首页和4个汽车详情页。网页采用极简设计，整体设置了网页背景颜色，顶部为LOGO，子页面点击LOGO可返回首页。 首页为大图加四个最新车型图片，点击车型图可进入对应的详情子页面。进入子页面后顶部视频自动播放，整个作品共4个视频文件，每个子页面顶部都插入了对应的车型视频、文案、海
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值