实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../0905/CSS/style1.css">
<title>融鑫汽车网</title>
</head>
<style>
body {
margin: 0;
}
/* 头部 */
.tb {
height: 40px;
/* background-color: #444; */
}
/* 头部内容 */
.tb .dhhz {
margin: 0 auto;
width: 90%;
height: 40px;
background-color: #444;
}
/* 头部内容区 */
.tb .dhhz .dhul {
margin: 0;
padding: 0;
}
/* 头部导航条 */
.tb .dhhz .dhul .dh {
list-style: none;
}
.tb .dlzc {
float: right;
}
.tb .dlzc a {
width: 40px;
height: 40px;
/* 去掉链接下划线 */
text-decoration: none;
margin-right: 10px;
color: aliceblue;
line-height: 40px;
}
.tb .dlzc a:hover {
color: aliceblue;
font-size: 1.1em;
}
/* 头部链接导航 */
.tb .dhhz .dhul .dh a {
color: aliceblue;
float: left;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 40px;
padding: 0 15px;
/* 去掉链接下划线 */
text-decoration: none;
}
.tb .dhhz .dhul .dh a:hover {
color: red;
font-size: 1.2em;
}
.tb {
overflow: hidden;
}
.tpgg {
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 100%;
margin: 5px auto;
}
.tpgg img {
width: 90%;
}
/* 中间主体内容 */
.zt {
width: 90%;
margin: 10px auto;
overflow: hidden;
}
/* 中 */
.zjnr {
min-height: 800px;
width: 100%;
float: left;
}
.zjnr .zjnr_1 {
border: 1px solid #444;
height: 100%;
width: 100%;
}
.zjnr .zjnr_1 h3 {
font: 32px;
margin-left: 40px;
border-bottom: 1px solid black;
}
.zjnr .zjnr_1 img {
height: 120px;
width: 180px;
border-radius: 10px;
}
.zjnr .zjnr_1 img:hover {
border: 1px solid #0000ff;
}
.zjnr .zjnr_1 p {
overflow: hidden;
}
.zjnr .zjnr_1 p button {
float: right;
font-size: 14px;
}
.zjnr .zjnr_1 p samp:hover {
color: red;
font-size: 1.2em;
}
.zjnr .zjnr_1 .zjnr_cx .zjnr_cx1 {
float: left;
margin: 20px 40px;
}
.zjnr .zjnr_1 .zjnr_cx {
overflow: hidden;
}
.zjnr .zjnr_cx .zjnr_cx1 li {
list-style: none;
}
/* 左 */
.zcbl {
min-height: 800px;
width: 295px;
float: left;
}
.zcbl .zcbl_1 {
border: 1px solid #444;
height: 100%;
width: 100%;
}
.zcbl .zcbl_1 h3 {
font: 32px;
margin-left: 40px;
border-bottom: 1px solid black;
}
.zcbl .zcbl_1 ul li {
list-style: none;
margin: 40px auto;
font-size: 24px;
}
.zcbl .zcbl_1 ul li a {
text-decoration: none;
color: #000;
}
/* 右 */
.ycbl {
min-height: 800px;
width: 294px;
float: left;
}
.ycbl .ycbl_1 {
border: 1px solid #444;
height: 100%;
width: 100%;
}
.ycbl .ycbl_1 h3 {
font: 32px;
margin-left: 40px;
}
/* .ycbl .ycbl_1 ul li {
list-style-type: decimal;
margin: 15.5px auto;
color: crimson;
font: 14px;
padding-right: 0;
} */
/* 主体布局 */
.zjnr {
box-sizing: border-box;
padding: 0 300px;
}
.zcbl {
margin-left: -100%;
}
.ycbl {
margin-left: -296px;
}
/* 设置主体盒子 */
/* 底部 */
.db .dbnr {
width: 90%;
background-color: dimgray;
height: 60px;
margin: 0 auto;
}
.db .dbnr p {
font-size: 12px;
color: darkgrey;
text-align: center;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 60px;
}
.db .dbnr p a {
/* 去掉链接下划线 */
text-decoration: none;
color: azure;
}
.db .dbnr p a:hover {
color: aliceblue;
font-size: 1.1em;
}
</style>
<body>
<!-- 头部 -->
<div class="tb">
<!-- 头部内容区 -->
<div class="dhhz">
<!-- 头部导航条 -->
<ul class="dhul">
<li class="dh"><a href="">首页</a></li>
<li class="dh"><a href="">新车资讯</a></li>
<li class="dh"><a href="">汽车评测</a></li>
<li class="dh"><a href="">车主论坛</a></li>
<li class="dh"><a href="">汽车金融</a></li>
<li class="dh"><a href="">合作商家</a></li>
<li class="dh"><a href="">关于我们</a></li>
</ul>
<!-- 头部登陆 -->
<div class="dlzc">
<a href="#">登陆</a>
<a href="#">注册</a>
</div>
</div>
</div>
<!-- 图片广告 -->
<div class="tpgg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567768914512&di=dacb331549471561f71cf8d235067e37&imgtype=0&src=http%3A%2F%2Fimg011.hc360.cn%2Fk1%2FM0F%2F23%2FC2%2FwKhQw1iv4TuECmyNAAAAALMCHjQ754.jpg" alt="">
</div>
<!-- 主体内容 -->
<div class="zt">
<!-- 中 -->
<div class="zjnr">
<div class="zjnr_1">
<h3>找女朋友推荐车型</h3>
<div class="zjnr_cx">
<div class="zjnr_cx1">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1096320260,1516000112&fm=26&gp=0.jpg">
<p>奔驰AMG TG <button>***</button></p>
<li>指导价：97.38-229.88万</li>
</div>
<div class="zjnr_cx1">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1076809987,3997530839&fm=26&gp=0.jpg">
<p>宝马 i8 <button>***</button></p>
<li>指导价：179.80-195.80万</li>
</div>
<div class="zjnr_cx1">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3000896601,1079418147&fm=26&gp=0.jpg">
<p>保时捷911 <button>***</button></p>
<li>指导价:119.70-389.80万</li>
</div>
<div class="zjnr_cx1">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2195782823,1365283647&fm=26&gp=0.jpg">
<p>玛莎拉蒂 GT<button>***</button></p>
<li>指导价：246.80-288.80万</li>
</div>
<!-- /第二排 -->
</div>
<div class="zjnr_cx">
<div class="zjnr_cx1">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=539800785,1917856594&fm=26&gp=0.jpg">
<p>兰博基尼大牛 <button>***</button>></p>
<li>指导价：920.4733万</li>
</div>
<div class="zjnr_cx1">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=26627994,1939076167&fm=26&gp=0.jpg">
<p>法拉利 488<button>***</button></p>
<li>指导价：315.50-449.90万</li>
</div>
<div class="zjnr_cx1">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3944802461,1048168972&fm=26&gp=0.jpg">
<p>迈凯伦 P1<button>***</button></p>
<li>指导价：1260万 </li>
</div>
<div class="zjnr_cx1">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2206790109,1814253460&fm=26&gp=0.jpg">
<p>布加迪 威龙 <button>***</button></p>
<li>指导价：4300万</li>
</div>
</div>
<!-- 第三排 -->
<div class="zjnr_cx">
<div class="zjnr_cx1">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1344350438,926353118&fm=26&gp=0.jpg">
<p>劳斯莱斯 库里南 <button>***</button></p>
<li>指导价：610万</li>
</div>
<div class="zjnr_cx1">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3490019531,3567213659&fm=26&gp=0.jpg">
<p>宾利 添越<button>***</button></p>
<li>指导价：269.00-398.00万</li>
</div>
<div class="zjnr_cx1">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1652103352,3394812752&fm=26&gp=0.jpg">
<p>路虎 揽胜 GT<button>***</button></p>
<li>指导价：122.5-321.3万</li>
</div>
<div class="zjnr_cx1">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1623036801,23750046&fm=26&gp=0.jpg">
<p>奔驰G500<button>***</button></p>
<li>指导价：155.88-158.80万</li>
</div>
</div>
</div>
</div>
<!-- 左 -->
<div class="zcbl">
<div class="zcbl_1">
<h3> 条件找车</h3>
<ul>
<li><a href="">新能源>></a></li>
<li><a href="">微型>></a></li>
<li><a href="">小型>></a></li>
<li><a href="">紧凑型>></a></li>
<li><a href="">中型>></a></li>
<li><a href="">中大型>></a></li>
<li><a href="">大型>></a></li>
<li><a href="">SUV>></a></li>
<li><a href="">MPV>></a></li>
<li><a href="">跑车>></a></li>
</ul>
</div>
</div>
<!-- 右 -->
<div class="ycbl">
<div class="ycbl_1">
<table border="1" width="294" cellspacing="0" cellpadding="5">
<caption>
<h3>热销车型前20名排行榜</h3>
</caption>
<!-- 头部 -->
<th>序号</th>
<th>车型</th>
<th>月销售量</th>
</tr>
<!-- 表格 -->
<tr>
<td>1</td>
<td>宝马530</td>
<td>12000</td>
</tr>
<tr>
<td>2</td>
<td>奔驰E300</td>
<td>11900</td>
</tr>
<tr>
<td>3</td>
<td>奥迪A6</td>
<td>11800</td>
</tr>
<tr>
<td>4</td>
<td>宝马320</td>
<td>11000</td>
</tr>
<tr>
<td>5</td>
<td>奔驰C</td>
<td>10999</td>
</tr>
<tr>
<td>6</td>
<td>奥迪A4</td>
<td>10900</td>
</tr>
<tr>
<td>7</td>
<td>本田皇冠</td>
<td>10000</td>
</tr>
<tr>
<td>8</td>
<td>丰田 凯美瑞</td>
<td>9999</td>
</tr>
<tr>
<td>9</td>
<td>本田 雅阁</td>
<td>9988</td>
</tr>
<tr>
<td>10</td>
<td>奔驰GLC</td>
<td>9977</td>
</tr>
<tr>
<td>11</td>
<td>雷克萨斯 ES</td>
<td>9966</td>
</tr>
<tr>
<td>12</td>
<td>凯迪拉克 TC5</td>
<td>9955</td>
</tr>
<tr>
<td>13</td>
<td>捷豹 EX</td>
<td>9944</td>
</tr>
<tr>
<td>14</td>
<td>路虎 星脉</td>
<td>9933</td>
</tr>
<tr>
<td>15</td>
<td>英菲尼迪 G37</td>
<td>9900</td>
</tr>
<tr>
<td>16</td>
<td>日产 天籁</td>
<td>8900</td>
</tr>
<tr>
<td>17</td>
<td>凯迪拉克 ATS</td>
<td>8888</td>
</tr>
<tr>
<td>18</td>
<td>大众迈腾</td>
<td>8877</td>
</tr>
<tr>
<td>19</td>
<td>大众 帕萨特</td>
<td>8866</td>
</tr>
<tr>
<td>20</td>
<td>大众 捷达</td>
<td>8000</td>
</tr>
</table>
<!-- <h3>近期热销车型排行榜前20</h3>
<ul>
<li>宝马 5系 销量：12000台/月</li>
<li>奔驰 E级 销量：11000台</li>
<li>奥迪 A6 销量：8000台/月</li>
<li>宝马 3系 销量：7000台/月</li>
<li>凯迪拉克 CT5 销量：6000台/月</li>
<li>奥迪 A4L 销量：6000台/月</li>
<li>丰田 凯美瑞 销量：5000台/月</li>
<li>本田 思域 销量：4888台/月 </li>
<li>日产 天籁 销量：4850台/月 </li>
<li>宝骏 530 销量：4000台/月 </li>
<li>英菲尼迪 G20 销量：3888台/月 </li>
<li>路虎 极光 销量：3862台/月 </li>
<li> 捷豹 EX 销量：3762台/月</li>
<li> 哈佛 H6 销量：3562台/月 </li>
<li> 北京现代 名图 销量：3462台/月</li>
<li> 丰田 霸道 销量：3362台/月 </li>
<li> 本田 雅阁 销量：3262台/月</li>
<li> 五菱荣光 销量：3162台/月</li>
<li> 别克 君威 销量：3100台/月</li>
<li> 宝马 X1 销量：3000台/月</li>
</ul> -->
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="db">
<!-- 底部内容区 -->
<div class="dbnr">
<p>
<a href="">Copyright 2019 捷盈 All Rights Reserved</a> |
<a href="">京ICP备88888888号-1</a>
<a href="">©北京市融鑫汽车商贸***版权所有</a> |
<a href="">公司地址：北京市五环区东信路888号</a> |
<a href="">公司电话：021-1234567</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
