代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="./css/common.css">
<body>
<div class="pos_f">
<div id="header">
<img src="imgs/logodesign.png" width="224"height="64" >
</div>
<div id="nav">
<ul class="ulnav">
<li class="linav"><a href="#">PERFORMANCE</a></li>
<li class="linav"><a href="#">PRICE</a></li>
<li class="linav"><a href="#">NEWS</a></li>
<li class="linav"><a href="#">TYPE</a>
</li>
<li class="linav"><a href="#">BRAND</a>
</li>
</ul>
</div>
</div>
<div class="main">
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="宝马">
<span class="search_btn">搜索</span>
</div>
<div class="content">
<!-- 导航 -->
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">推荐</li>
<li>最新</li>
<li>新车</li>
<li>本地</li>
<li>导购</li>
<li>SUV</li>
<li>行业</li>
<li>新能源</li>
<li>。。。</li>
</ul>
<div class="tab_con">
<div class="item" style="display: block;">
<!-- 主体内容 -->
<div class="main_content flex_x">
<div class="left flex_x">
<div class="list_item flex_y">
<img src="./imgs/car1.png" alt="">
<div class="title">新车 | 或售22.98-25.98万 进口+柴油动力 三菱L200将于广州车展上市</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car2.jpg" alt="">
<div class="title">售6.78万起，五菱Air ev晴空上市，续航300公里，比宏光MINIEV出色</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car3.jpg" alt="">
<div class="title">资讯 | 深圳出台多项措施促进汽车消费，宝安区将推一亿元购车补贴</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car4.jpg" alt="">
<div class="title">五菱甩出“王炸”新车，外观很时尚运动，搭载1.5T动力，5.68万起</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car1.jpg" alt="">
<div class="title">新车 | 售6.78万元起，五菱Air ev晴空正式上市，续航300公里</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car2.jpg" alt="">
<div class="title">解析2022款长安CS55 PLUS：1.5T+双独悬，售价9.29-12.59万</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car2.jpg" alt="">
<div class="title">海外 | 福特汽车与宁德时代计划在美建电池厂，福特100%控股</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car1.png" alt="">
<div class="title">续航里程405km，比亚迪海豚实车图，售价10.28万起，值得购买吗？</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car1.png" alt="">
<div class="title">坦克500的强劲对手！北京BJ60实车，售23.98万起，气场不输普拉多</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car1.png" alt="">
<div class="title">坦克500的强劲对手！北京BJ60实车，售23.98万起，气场不输普拉多</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car1.jpg" alt="">
<div class="title">新车 | 售6.78万元起，五菱Air ev晴空正式上市，续航300公里</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car2.jpg" alt="">
<div class="title">解析2022款长安CS55 PLUS：1.5T+双独悬，售价9.29-12.59万</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car2.jpg" alt="">
<div class="title">海外 | 福特汽车与宁德时代计划在美建电池厂，福特100%控股</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car1.png" alt="">
<div class="title">续航里程405km，比亚迪海豚实车图，售价10.28万起，值得购买吗？</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car1.png" alt="">
<div class="title">坦克500的强劲对手！北京BJ60实车，售23.98万起，气场不输普拉多</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
<div class="list_item flex_y">
<img src="./imgs/car1.png" alt="">
<div class="title">坦克500的强劲对手！北京BJ60实车，售23.98万起，气场不输普拉多</div>
<div class="desc"><span class="tw-mr-8">7万次阅读</span> <span>4天前</span></div>
</div>
</div>
<div class="right">
<div class="top"><span class="tag">促</span> 惠购12.12，买雪铁龙到里程 <span class="right_tag">广告</span></div>
<div class="right_bottom">
<span class="b_title">热搜榜</span>
<div class="b_item flex_x">
<span class="number">1</span>
<span>理想L9极寒出现亏电</span>
</div>
<div class="b_item flex_x">
<span class="number">2</span>
<span>油价或迎年内“最后一降”</span>
</div>
<div class="b_item flex_x">
<span class="number">3</span>
<span>一汽丰田bZ3开启预售</span>
</div>
<div class="b_item flex_x">
<span class="number">4</span>
<span>一汽丰田格瑞维亚上市</span>
</div>
<div class="b_item flex_x">
<span class="number">5</span>
<span>新款吉利帝豪实车曝光</span>
</div> <div class="b_item flex_x">
<span class="number">6</span>
<span>睿蓝9纯电SUV上市</span>
</div>
<div class="b_item flex_x">
<span class="number">7</span>
<span>奔驰召回超7万辆汽车</span>
</div>
<div class="b_item flex_x">
<span class="number">8</span>
<span>广汽本田型格e:HEV上市</span>
</div>
<div class="b_item flex_x">
<span class="number">9</span>
<span>劳斯莱斯闪灵上市</span>
</div>
<div class="b_item flex_x">
<span class="number">10</span>
<span>23款广汽传祺M6 PRO上市</span>
</div>
<div class="b_item flex_x">
<span class="number">11</span>
<span>睿蓝9纯电SUV上市</span>
</div>
<div class="b_item flex_x">
<span class="number">12</span>
<span>奔驰召回超7万辆汽车</span>
</div>
<div class="b_item flex_x">
<span class="number">13</span>
<span>广汽本田型格e:HEV上市</span>
</div>
<div class="b_item flex_x">
<span class="number">14</span>
<span>劳斯莱斯闪灵上市</span>
</div>
<div class="b_item flex_x">
<span class="number">15</span>
<span>23款广汽传祺M6 PRO上市</span>
</div>
</div>
</div>
</div>
</div>
<div class="item no_data">最新暂无数据</div>
<div class="item no_data">新车暂无数据</div>
<div class="item no_data">本地暂无数据</div>
<div class="item no_data">导购暂无数据</div>
<div class="item no_data">SUV暂无数据</div>
<div class="item no_data">行业暂无数据</div>
<div class="item no_data">新能源暂无数据</div>
</div>
</div>
</div>
<!-- 导航结束 -->
</div>
</div>
<div id="space3"></div>
<section id="footer">
<a class="zh" href="#"><p>车型介绍</p></a>
<a class="zh" href="#"><p>品牌故事</p></a>
<a class="zh" href="#"><p>价格咨询</p></a>
<a class="zh" href="#"><p>性能测试</p></a>
<a class="zh" href="#"><p>联系我们</p></a>
</section>
<div id="space4">
<p>Copyright © CAR中国 | 京ICP备12029670号-1 京公网安备 11010502031597号 隐私政策</p>
</div>
</body>
<style>
.pos_f{
position: sticky;
top: 0;
left: 24px;
background-color: #fff;
}
.flex_x {
display: flex;
}
.main {
padding: 24px;
text-align: center;
}
.search input {
width: 50%;
border: 1px solid rgb(255, 204, 50,.8);
height: 40px;
line-height: 40px;
padding: 6px;
box-sizing: border-box;
}
.search_btn {
display: inline-block;
background-color: rgb(255, 204, 50,1);
width: 64px;
height: 40px;
line-height: 40px;
text-align: center;
vertical-align: bottom;
transition: all .5s;
color: #fff;
margin-left: -10px;
}
.search_btn:hover{
cursor: pointer;
background-color:orange;
}
.tab_list ul {
margin-top: 20px;
display: inline-block;
width: 100%;
height: 40px;
background-color: #f7f8fc;
text-align: center;
line-height: 40px;
}
.tab_list ul li {
float: left;
display: block;
list-style: none;
padding-left: 10px;
padding-right: 10px;
}
.current {
border-bottom: 2px solid rgb(255, 204, 50);
font-size: 16px;
}
.item {
display: none;
}
.no_data {
color: #ccc;
font-size: 20px;
margin-top: 20px;
}
.main_content{
justify-content: space-between;
}
.right{
width: 300px;
height: 800px;
background-color: #f7f8fc;
}
.left{
flex: 1;
justify-content: space-between;
flex-wrap: wrap;
background-color: #f7f8fc;
}
.flex_y{
display: flex;
flex-direction: column;
}
.list_item{
padding: 12px;
justify-content: space-between;
width: 25%;
height: auto
}
.list_item img{
width: 100%;
height: 150px;
border-radius: 4px;
cursor: pointer;
transition: all 0.5s;
}
.list_item img:hover{
transform: scale(1.08);
}
.title{
font-size: 16px;
text-align: left;
margin-top: 10px;
}
.desc{
font-size: 14px;
text-align: left;
margin-top: 8px;
color:#606370
}
.tw-mr-8{
font-size: 14px;
margin-right: 8px;
}
.no_current{
transition: all .5s;
}
.no_current:hover{
transform: scale(1.08);
}
.top{
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 16px;
cursor: pointer;
height: 44px;
background: #fff;
border-radius: 2px;
}
.tag{
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
margin-right: 4px;
border-radius: 2px;
background: rgba(230,88,0,.1);
color: #e65800;
}
.right_tag{
transform: scale(.5);
white-space: nowrap;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px;
height: 28px;
color: #979aab;
border: 1px solid #ccc;
padding: 4px;
}
.right_bottom{
padding: 16px 12px 16px 12px;
box-sizing: border-box;
background-color: #fff;
text-align: left;
}
.b_title{
font-size: 18px;
}
.b_item{
justify-content: flex-start;
padding: 16px 8px 16px 4px;
border-bottom: 1px solid #e5e7eb;
transition: all 0.5s;
}
.b_item:hover{
background-color: #fff9e6;
transform: scale(1.08);
}
.number{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fef7e2;
color: red;
font-weight: bold;
margin-right: 8px;
}
</style>
<script>
// 1.选项卡，点击某一个，突出显示 其余不变 修改类名的方式
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环绑定事件
for (var i = 0; i < lis.length; i++) {
// 开始给五个li设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
// 其余的li清除class这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = 'no_current';
}
// 留下我自己
this.className = 'current';
// 2.下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人，让其余的item这些div隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
