完整的样式图
提示：模仿易车网的简写版，纯属自己手敲
目录结构
一、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script src="js/demo.js" type="text/javascript">
</script>
<body>
<!--头部开始-->
<header>
<table id="tou">
<tr>
<!--头部左开始-->
<td>
<ul class="tou_zuo">
<li>
<a href="index.html">易车</a>
</li>
<li>
<a href="index.html">淘车二手车</a>
</li>
<li>
<a href="index.html">易车慧</a>
</li>
<li>
<a href="index.html">一成首付</a>
</li>
<li>
<a href="index.html">易车福利</a>
</li>
<li>
<a href="index.html">移动应用</a>
</li>
<li>
<a href="index.html">本地车市</a>
</li>
<li>
<a href="index.html">易车优惠来袭</a>
</li>
</ul>
</td>
<!--头部左结束-->
<!--头部右开始-->
<td>
<ul class="tou_you">
<li>
<img src="img/8ca7b0d35d8da0f471e2d004f267457.png" />邯郸
</li>
<li>
<a href="index.html">
<input type="button" value="登录" />
</a>
</li>
<li>
<a href="index.html">注册</a>
</li>
<li>
<a href="index.html">第三方登录</a>
</li>
<li>
<a href="index.html">网站地图</a>
</li>
</ul>
</td>
</tr>
</table>
<div id="guang_gao">
<a href="index.html">
<img src="img/主体栏.png" />
</a>
</div>
<nav id="sousuo">
<table>
<tr>
<td><img src="img/779828aba5980a3681bfb6d192f3c18.png" /></td>
<td>邯郸</td>
<td>
<h6>本地车市</h6></td>
<td>
<input type="search" value="哈佛H6" />
<input type="button" value="搜索" />
</td>
</tr>
</table>
</nav>
<div id="shouye">
<ul>
<li>
<a href="index.html">车型</a>
</li>
<li>
<a href="index.html">图库</a>
</li>
<li>
<a href="index.html">视频</a>
</li>
<li>
<a href="index.html">文章</a>
</li>
<li>
<a href="index.html">易车号</a>
</li>
<li>
<a href="index.html">报价</a>
</li>
<li>
<a href="index.html">全民购车季</a>
</li>
<li>
<a href="index.html">降价</a>
</li>
<li>
<a href="index.html">经销商</a>
</li>
<li>
<a href="index.html">裸车价</a>
</li>
<li>
<a href="index.html">问答</a>
</li>
<li>
<a href="index.html">点评</a>
</li>
<li>
<a href="index.html">论坛</a>
</li>
<li>
<a href="index.html">优惠购车</a>
</li>
<li>
<a href="index.html">分期</a>
</li>
<li>
<a href="index.html">二手车</a>
</li>
</ul>
<nav class="shouyexia">
<a href="index.html">
<img src="img/捕获.PNG" />
</a>
</nav>
</div>
</header>
<!--头部结束-->
<!--主题开始-->
<section>
<div class="out">
<div class="in">
<ul>
<li class="ul_li">热门车</li>
<li>推荐</li>
<li>新车</li>
<li>5万以下</li>
<li>8-12万</li>
<li>12-18万</li>
<li>18-25万</li>
<li>25-40万</li>
<li>40万-80万</li>
<li>80万以上</li>
</ul>
</div>
</div>
<!--主题左滑动-->
<div class="msg" style="display: block;">
<table>
<tr>
<td>
<a href="index.html">SUV></a>
</td>
<td>
<a href="index.html">哈佛H6</a>
</td>
<td>
<a href="index.html">本田CR-V</a>
</td>
<td>
<a href="index.html">长安CS75 PLUS</a>
</td>
<td>
<a href="index.html">长安尚欧X5</a>
</td>
<td>
<a href="index.html">奇骏</a>
</td>
<td>
<a href="index.html">汉兰达</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">轿车></a>
</td>
<td>
<a href="index.html">轩逸</a>
</td>
<td>
<a href="index.html">朗逸</a>
</td>
<td>
<a href="index.html">桑塔纳</a>
</td>
<td>
<a href="index.html">思域</a>
</td>
<td>
<a href="index.html">卡罗拉</a>
</td>
<td>
<a href="index.html">名爵</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">新能源></a>
</td>
<td>
<a href="index.html">宏光MINI EV</a>
</td>
<td>
<a href="index.html">Model 3</a>
</td>
<td>
<a href="index.html">汉EV</a>
</td>
<td>
<a href="index.html">理想ONE</a>
</td>
<td>
<a href="index.html">小鹏汽车P7</a>
</td>
<td>
<a href="index.html">唐DM</a>
</td>
</tr>
</table>
</div>
<div class="msg" style="display: none;">
<table>
<tr>
<td>
<a href="index.html">三菱></a>
</td>
<td>
<a href="index.html">欧蓝德</a>
</td>
<td>
<a href="index.html">奕歌</a>
</td>
<td>
<a href="index.html">劲炫</a>
</td>
<td>
<a href="index.html">祺智EV</a>
</td>
<td>
<a href="index.html">祺智PHEV</a>
</td>
<td>
<a href="index.html">帕杰罗</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">比亚迪></a>
</td>
<td>
<a href="index.html">全新一代唐</a>
</td>
<td>
<a href="index.html">全新一代宋</a>
</td>
<td>
<a href="index.html">秦Pro</a>
</td>
<td>
<a href="index.html">宋MAX</a>
</td>
<td>
<a href="index.html">全新一代唐DM</a>
</td>
<td>
<a href="index.html">元EV360</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">广汽传祺></a>
</td>
<td>
<a href="index.html">传祺GS4</a>
</td>
<td>
<a href="index.html">传祺GS5</a>
</td>
<td>
<a href="index.html">传祺GS8</a>
</td>
<td>
<a href="index.html">传祺GA4</a>
</td>
<td>
<a href="index.html">传祺GM8</a>
</td>
<td>
<a href="index.html">传祺GM6</a>
</td>
</tr>
</table>
</div>
<div class="msg" style="display: none;">
<table>
<tr>
<td>
<a href="index.html">众泰T500</a>
</td>
<td>
<a href="index.html">哈佛H7</a>
</td>
<td>
<a href="index.html">英菲尼迪Q50L</a>
</td>
<td>
<a href="index.html">骏派A50</a>
</td>
<td>
<a href="index.html">金牛座</a>
</td>
<td>
<a href="index.html">YUKON</a>
</td>
<td>
<a href="index.html">Urus</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">帝豪</a>
</td>
<td>
<a href="index.html">宝骏530</a>
</td>
<td>
<a href="index.html">道达V8</a>
</td>
<td>
<a href="index.html">领动</a>
</td>
<td>
<a href="index.html">揽胜极光</a>
</td>
<td>
<a href="index.html">金刚</a>
</td>
<td>
<a href="index.html">大力神K5</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">萨瓦特</a>
</td>
<td>
<a href="index.html">汉腾X5</a>
</td>
<td>
<a href="index.html">江淮V7</a>
</td>
<td>
<a href="index.html">宋</a>
</td>
<td>
<a href="index.html">SIERRA</a>
</td>
<td>
<a href="index.html">smart fortwo</a>
</td>
<td>
<a href="index.html">更多>></a>
</td>
</tr>
</table>
</div>
<div class="msg" style="display: none;">
<table>
<tr>
<td>
<a href="index.html">SUV></a>
</td>
<td>
<a href="index.html">远景X3</a>
</td>
<td>
<a href="index.html">瑞虎3X</a>
</td>
<td>
<a href="index.html">BEIJING-X3</a>
</td>
<td>
<a href="index.html">博骏</a>
</td>
<td>
<a href="index.html">众泰T300</a>
</td>
<td>
<a href="index.html">凯瑞K60</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">轿车></a>
</td>
<td>
<a href="index.html">宏光MINL EV</a>
</td>
<td>
<a href="index.html">远景</a>
</td>
<td>
<a href="index.html">艾瑞泽5</a>
</td>
<td>
<a href="index.html">瑞纳</a>
</td>
<td>
<a href="index.html">比亚迪f3</a>
</td>
<td>
<a href="index.html">宝骏310</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">其他></a>
</td>
<td>
<a href="index.html">五菱宏光S</a>
</td>
<td>
<a href="index.html">五菱宏光</a>
</td>
<td>
<a href="index.html">五菱宏光V</a>
</td>
<td>
<a href="index.html">五菱荣光</a>
</td>
<td>
<a href="index.html">五菱荣光S</a>
</td>
<td>
<a href="index.html">五菱荣光V</a>
</td>
</tr>
</table>
</div>
<div class="msg" style="display: none;">
<table>
<tr>
<td>
<a href="index.html">SUV></a>
</td>
<td>
<a href="index.html">传祺GS4</a>
</td>
<td>
<a href="index.html">长安UNI-T</a>
</td>
<td>
<a href="index.html">宋</a>
</td>
<td>
<a href="index.html">长安CS35 PLUS</a>
</td>
<td>
<a href="index.html">哈佛大狗</a>
</td>
<td>
<a href="index.html">现代ix35</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">轿车></a>
</td>
<td>
<a href="index.html">轩逸</a>
</td>
<td>
<a href="index.html">朗逸</a>
</td>
<td>
<a href="index.html">桑塔纳</a>
</td>
<td>
<a href="index.html">思域</a>
</td>
<td>
<a href="index.html">卡罗拉</a>
</td>
<td>
<a href="index.html">名爵5</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">其他></a>
</td>
<td>
<a href="index.html">五菱凯捷</a>
</td>
<td>
<a href="index.html">宝骏730</a>
</td>
<td>
<a href="index.html">炮</a>
</td>
<td>
<a href="index.html">新宝骏RM-5</a>
</td>
<td>
<a href="index.html">宋MAX</a>
</td>
<td>
<a href="index.html">传祺M6</a>
</td>
</tr>
</table>
</div>
<div class="msg" style="display: none;">
<table>
<tr>
<td>
<a href="index.html">SUV></a>
</td>
<td>
<a href="index.html">本田CR-V</a>
</td>
<td>
<a href="index.html">奇骏</a>
</td>
<td>
<a href="index.html">汉兰达</a>
</td>
<td>
<a href="index.html">RAV4荣放</a>
</td>
<td>
<a href="index.html">威兰达</a>
</td>
<td>
<a href="index.html">途悦</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">轿车></a>
</td>
<td>
<a href="index.html">速腾</a>
</td>
<td>
<a href="index.html">雅阁</a>
</td>
<td>
<a href="index.html">高尔夫</a>
</td>
<td>
<a href="index.html">天澜</a>
</td>
<td>
<a href="index.html">迈腾</a>
</td>
<td>
<a href="index.html">亚洲龙</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">其他></a>
</td>
<td>
<a href="index.html">别克GL8</a>
</td>
<td>
<a href="index.html">奥德赛</a>
</td>
<td>
<a href="index.html">炮</a>
</td>
<td>
<a href="index.html">传祺M8</a>
</td>
<td>
<a href="index.html">艾力绅</a>
</td>
<td>
<a href="index.html">荣威iMAX8</a>
</td>
</tr>
</table>
</div>
<div class="msg" style="display: none;">
<table>
<tr>
<td>
<a href="index.html">SUV></a>
</td>
<td>
<a href="index.html">本田CR-V</a>
</td>
<td>
<a href="index.html">奇骏</a>
</td>
<td>
<a href="index.html">汉兰达</a>
</td>
<td>
<a href="index.html">RAV4荣放</a>
</td>
<td>
<a href="index.html">探岳</a>
</td>
<td>
<a href="index.html">奔驰GLC</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">轿车></a>
</td>
<td>
<a href="index.html">速腾</a>
</td>
<td>
<a href="index.html">奥迪A4L</a>
</td>
<td>
<a href="index.html">天澜</a>
</td>
<td>
<a href="index.html">迈腾</a>
</td>
<td>
<a href="index.html">奔驰C级</a>
</td>
<td>
<a href="index.html">亚洲龙</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">其他></a>
</td>
<td>
<a href="index.html">别克GL8</a>
</td>
<td>
<a href="index.html">奥德赛</a>
</td>
<td>
<a href="index.html">炮</a>
</td>
<td>
<a href="index.html">传祺M8</a>
</td>
<td>
<a href="index.html">艾力绅</a>
</td>
<td>
<a href="index.html">荣威iMAX8</a>
</td>
</tr>
</table>
</div>
<div class="msg" style="display: none;">
<table>
<tr>
<td>
<a href="index.html">SUV></a>
</td>
<td>
<a href="index.html">本田CR-V</a>
</td>
<td>
<a href="index.html">奇骏</a>
</td>
<td>
<a href="index.html">汉兰达</a>
</td>
<td>
<a href="index.html">RAV4荣放</a>
</td>
<td>
<a href="index.html">探岳</a>
</td>
<td>
<a href="index.html">奔驰GLC</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">轿车></a>
</td>
<td>
<a href="index.html">雅阁</a>
</td>
<td>
<a href="index.html">奥迪A4L</a>
</td>
<td>
<a href="index.html">天澜</a>
</td>
<td>
<a href="index.html">迈腾</a>
</td>
<td>
<a href="index.html">奔驰C级</a>
</td>
<td>
<a href="index.html">亚洲龙</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">其他></a>
</td>
<td>
<a href="index.html">别克GL8</a>
</td>
<td>
<a href="index.html">奥德赛</a>
</td>
<td>
<a href="index.html">传祺M8</a>
</td>
<td>
<a href="index.html">Mustang</a>
</td>
<td>
<a href="index.html">艾力绅</a>
</td>
<td>
<a href="index.html">荣威iMAX8</a>
</td>
</tr>
</table>
</div>
<div class="msg" style="display: none;">
<table>
<tr>
<td>
<a href="index.html">SUV></a>
</td>
<td>
<a href="index.html">普拉多</a>
</td>
<td>
<a href="index.html">奔驰GLC</a>
</td>
<td>
<a href="index.html">奥迪Q5L</a>
</td>
<td>
<a href="index.html">途昂</a>
</td>
<td>
<a href="index.html">宝马X3</a>
</td>
<td>
<a href="index.html">途悦</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">轿车></a>
</td>
<td>
<a href="index.html">奔驰C级</a>
</td>
<td>
<a href="index.html">奥迪A6L</a>
</td>
<td>
<a href="index.html">宝马3系</a>
</td>
<td>
<a href="index.html">宝马5系</a>
</td>
<td>
<a href="index.html">奔驰E级</a>
</td>
<td>
<a href="index.html">红旗H9</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">其他></a>
</td>
<td>
<a href="index.html">别克GL8</a>
</td>
<td>
<a href="index.html">Mustang</a>
</td>
<td>
<a href="index.html">保时捷718</a>
</td>
<td>
<a href="index.html">福特F-150</a>
</td>
<td>
<a href="index.html">宝马Z4</a>
</td>
<td>
<a href="index.html">奔驰V级</a>
</td>
</tr>
</table>
</div>
<div class="msg" style="display: none;">
<table>
<tr>
<td>
<a href="index.html">SUV></a>
</td>
<td>
<a href="index.html">途悦</a>
</td>
<td>
<a href="index.html">宝马X5</a>
</td>
<td>
<a href="index.html">揽胜运动版</a>
</td>
<td>
<a href="index.html">揽胜</a>
</td>
<td>
<a href="index.html">雷克萨斯RX</a>
</td>
<td>
<a href="index.html">奔驰GLS</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">轿车></a>
</td>
<td>
<a href="index.html">宝马7系</a>
</td>
<td>
<a href="index.html">宝马S级</a>
</td>
<td>
<a href="index.html">Panamer</a>
</td>
<td>
<a href="index.html">奥迪A8L</a>
</td>
<td>
<a href="index.html">迈巴赫S级</a>
</td>
<td>
<a href="index.html">雷克萨斯LS</a>
</td>
</tr>
<tr>
<td>
<a href="index.html">其他></a>
</td>
<td>
<a href="index.html">保时捷718</a>
</td>
<td>
<a href="index.html">埃尔法</a>
</td>
<td>
<a href="index.html">保时捷911</a>
</td>
<td>
<a href="index.html">Aventador</a>
</td>
<td>
<a href="index.html">奔驰GT AMG</a>
</td>
<td>
<a href="index.html">奥迪R8</a>
</td>
</tr>
</table>
</div>
<!--主题右广告-->
<div id="you">
<ul>
<li>
<a href="#guang_gao"><img src="img/guanggao.PNG" /></a>
</li>
<li>
<a href="#guang_gao">宏光MINIEV 2.88万起</a>
</li>
<li>
<a href="#guang_gao">哈佛多车型至高巨惠3万元</a>
</li>
<li>
<a href="#guang_gao">一汽红旗1111元返现</a>
</li>
<li>
<a href="#guang_gao">权限11天的探岳加码特权</a>
</li>
</ul>
</div>
<div id="che">
<ul class="chepai">
<li>
<a href="index.html">
<img src="img/diyi.PNG" />
<p>哈佛H6</p>
</a>
</li>
<li>
<a href="index.html">
<img src="img/dier.PNG" />
<p>雷克萨斯NX</p>
</a>
</li>
<li>
<a href="index.html">
<img src="img/k5.PNG" />
<p>K5凯酷</p>
</a>
</li>
<li>
<a href="index.html">
<img src="img/disi.PNG" />
<p>一汽-大众ID.4</p>
</a>
</li>
<li>
<a href="index.html">
<img src="img/kaluola.PNG" />
<p>卡罗拉 双擎E+</p>
</a>
</li>
<li>
<a href="index.html">
<img src="img/hongqi.PNG" />
<p>红旗HS5</p>
</a>
</li>
<li>
<a href="index.html">
<img src="img/zuohou.PNG" />
<p>蔚来ES8</p>
</a>
</li>
</ul>
</div>
<!--易车头条-->
<div id="tou_tiao">
<h1>
<span>易车头条：</span>
<a href="index.html">易看就知道|日产黑科技四驱e—40RCE到底是个啥？</a>
<hr />
</h1>
<div id="outy">
<nav id="iny">
<img src="img/lunbo1.PNG">
<img src="img/lunbo2.PNG">
<img src="img/lunbo3.PNG">
<img src="img/lunbo1.PNG">
</nav>
</div>
<div id="lun_bo_you">
<h2>
<a href="#">
广州车展7款重磅轿车 最低11万起售
</a>
</h2>
<ul>
<li>
<a href="#">全新埃尔法将2022年4月发布</a> |
<a href="#">红旗H9 2.5T动力版本</a>
</li>
<li>
<a href="#">宝马3系电动版最新消息</a> |
<a href="#">新款领克01广州车展亮相</a>
</li>
<li>
<a href="#">欧宝计划重返中国市场</a> |
<a href="#">恒驰车型命名规则正式发布</a>
</li>
<li>
<a href="#">长安UNI-K实车曝光</a> |
<a href="#">全新明锐命名为“明锐Plus”</a>
</li>
<li>
<a href="#">初次体验宝马X5系</a> |
<a href="#">操控比肩BBA</a> |
<a href="#">开车还能玩微信！</a>
</li>
<li>
<a href="#">大陆正式宣布停产</a> |
<a href="#">菜场中最凶的仔</a> |
<a href="#">意大利神经刀！</a>
</li>
</ul>
</div>
</div>
<div id="you_hui_gou_che">
<h2>优惠购车</h2>
<ul>
<li>
<a href="#">
<img src="img/yi.PNG" />
</a>
<a href="#" class="you_hui">
<h4>全新BMW 3系</h4>
<p>悦享48期0首付</p>
<p>厂商政策详询经销商</p>
</a>
</li>
<li>
<a href="#">
<img src="img/er.PNG" />
</a>
<a href="#" class="you_hui">
<h4>东风日产逍客</h4>
<p>抢半价购车补贴</p>
<p>与店内优惠同享</p>
</a>
</li>
<li>
<a href="#">
<img src="img/san.PNG" />
</a>
<a href="#" class="you_hui">
<h4>斯柯达柯迪亚克</h4>
<p>购享千元补贴</p>
<p>20%首付起</p>
</a>
</li>
<li>
<a href="#">
<img src="img/si.PNG" />
</a>
<a href="#" class="you_hui">
<h4>新BMW X1</h4>
<p>悦享48期0首付</p>
<p>厂商政策详询经销商</p>
</a>
</li>
<li>
<a href="#">
<img src="img/wu.PNG" />
</a>
<a href="#" class="you_hui">
<h4>东风本田享域</h4>
<p>抢半价购车补贴</p>
<p>赢取现金补贴</p>
</a>
</li>
</ul>
</div>
<a class="fan" href="index.html"><img src="img/guanggao2.PNG" /></a>
<div id="han_dan">
<h1><a href="han_dan">邯郸·二手车</a></h1>
<img src="img/hongbai.PNG" />
</div>
<table class="peng">
<tr>
<td class="zuo">
<ul>
<li>按价位</li>
<li>
<a href="peng">5万以内</a>
<a href="peng">5-8万</a>
<a href="peng">8-10万</a>
</li>
<li>
<a href="peng">10-15万</a>
<a href="peng">15-20万</a>
<a href="peng">20-30万</a>
</li>
<li>
<a href="peng">30-50万</a>
<a href="peng">50万以上</a>
</li>
<li>按级别</li>
<li>
<a href="peng">微型车</a>
<a href="peng">小型车</a>
<a href="peng">中型车</a>
</li>
<li>
<a href="peng">中大型车</a>
<a href="peng">豪华车</a>
<a href="peng">面包车</a>
</li>
<li>
<a href="peng">SUV</a>
</li>
</ul>
</td>
<td class="you">
<table>
<tr>
<td>
<a href="you"><img src="img/ershou1.PNG" /></a>
<a href="you">现代ix25 2017款 1.6L 手自一体<br />智能版 国VI</a>
<p>2019年 | 2.00万公里 | 沧州</p>
<a href="you" class="bian_se">￥9.50万</a><span><del>原价9.50万</del></span>
</td>
<td>
<a href="you" class="mt"><img src="img/ershou2.PNG" /></a>
<a href="you">Polo 2016款 1.4L 自动 风尚版</a>
<p>2016年 | 2.00万公里 | 沧州</p>
<a href="you" class="bian_se">￥6.20万</a><span><del>原价6.20万</del></span>
</td>
<td>
<a href="you" class="mt"><img src="img/ershou3.PNG" /></a>
<a href="you">捷达 2017款 1.5L 自动 时尚版</a>
<p>2017年 | 4.80万公里 | 沧州</p>
<a href="you" class="bian_se">￥6.30万</a><span><del>原价6.30万</del></span>
</td>
<td>
<a href="you"><img src="img/ershou4.PNG" /></a>
<a href="you">速腾 2015款 1.6L 手自一体<br>舒适型</a>
<p>2015年 | 6.50万公里 | 沧州</p>
<a href="you" class="bian_se">￥8.50万</a><span><del>原价8.50万</del></span>
</td>
</tr>
<tr>
<td>
<a href="you"><img src="img/ershou5.PNG" /></a>
<a href="you">雷凌 2017款 双擎 1.8H GS CVT<br />精英天窗版 国V</a>
<p>2017年 | 3.00万公里 | 沧州</p>
<a href="you" class="bian_se">￥10.90万</a><span><del>原价10.90万</del></span>
</td>
<td>
<a href="you"><img src="img/ershou6.PNG" /></a>
<a href="you">迈腾 2018款 330TSI 双离合 领先版</a>
<p>2017年 | 7.00万公里 | 沧州</p>
<a href="you" class="bian_se">￥15.90万</a><span><del>原价15.90万</del></span>
</td>
<td>
<a href="you"><img src="img/ershou7.PNG" /></a>
<a href="you">奥迪A3 2019款 Sportback<br />35TFSI 运动版 国V</a>
<p>2019年 | 1.60万公里 | 沧州</p>
<a href="you" class="bian_se">￥16.00万</a><span><del>原价16.00万</del></span>
</td>
<td>
<a href="you"><img src="img/ershou8.PNG" /></a>
<a href="you">奥迪Q3 2013款 40TFSI quattro<br />豪华型</a>
<p>2013年 | 10.00万公里 | 沧州</p>
<a href="you" class="bian_se">￥14.38万</a><span><del>原价14.38万</del></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</section>
<!--主题结束-->
<!--尾部开始-->
<footer>
<div id="wei_bu_zuo">
<ul class="ee">
<li>
<a href="#"><img src="img/7a3cee40b9f3c8235563baf514d6eb9.png" /></a>
</li>
<li>
<a href="#"><img src="img/17608f8676b8c173fc9299781a1f658.png" /></a>
</li>
<li>
<a href="#"><img src="img/9df1076c92dfb5d12f1d7c2b7f6963c.png" /></a>
</li>
<li>
<a href="#"><img src="img/7430fc80e6d6b4d3b8a6421650719df.png" /></a>
</li>
</ul>
<div id="wei_bu_xia">
<ul>
<li>
<a href="#wei_bu_zuo">关于我们</a>
</li>
<li>
<a href="#wei_bu_zuo">加入我们</a>
</li>
<li>
<a href="#wei_bu_zuo">English Site</a>
</li>
<li>
<a href="#wei_bu_zuo">联系我们</a>
</li>
<li>
<a href="#wei_bu_zuo">法律声明</a>
</li>
<li>
<a href="#wei_bu_zuo">服务协议</a>
</li>
<li>
<a href="#wei_bu_zuo">易车伙伴</a>
</li>
</ul>
</div>
</div>
<div id="wei_bu_you">
<p><img src="img/263596ec5bdee2eef6053330c179a78.png"/></p>
<ul>
<li>服务热线</li>
<li>4000—168-168</li>
<li>9：00-17：00(法定假日除外)</li>
<li>传真：010-68492726</li>
</ul>
</div>
</footer>
<!--尾部结束-->
</body>
</html>
二、css代码
@charset "utf-8";
*{
margin: 0;
padding: 0;
/*border: 1px black solid;*/
}
header a{
text-decoration: none;
color: #000000;
}
header #tou{
width: 100%;
}
header table a:hover{
background: fuchsia;
transition: 1s;
}
header table tr td .tou_zuo{
width: 830px;
height: 35px;
}
header table tr td .tou_zuo li{
list-style: none;
float: left;
width: 100px;
text-align: center;
}
header table tr td .tou_you{
/*width: 650px;*/
height: 35px;
padding-left: 65px;
}
header table tr td .tou_you li{
list-style: none;
float: left;
width: 84px;
text-align: right;
}
header table tr td .tou_you li:nth-of-type(3){
margin-right: 20px;
}
header table tr td .tou_you li input{
background: red;
color: white;
}
header div a img{
/*margin-left: 70px;*/
width: 100%;
}
header nav table{
width: 700px;
}
header nav table tr td:nth-of-type(1){
padding-left: 65px;
}
header nav input:nth-of-type(1){
width: 150px;
height: 30px;
}
header nav input:nth-of-type(2){
width: 50px;
height: 30px;
background: red;
color: white;
}
header nav table input{
border: 2px red solid;
}
header #shouye ul{
overflow: hidden;
background: dodgerblue;
width: 100%;
/*margin-left: 70px;*/
}
header #shouye ul li{
list-style: none;
float: left;
width: 80px;
text-align: center;
height: 35px;
line-height: 35px;
}
header #shouye ul li a{
color: white;
display: inline-block;
width: 50px;
}
header #shouye ul li a:hover{
background: deepskyblue;
transition: 1s;
}
header .shouyexia img{
width: 100%;
margin-left: -1px;
}
/*主题开始
/*主体左的滑动*/
section .out{
overflow: hidden;
margin-top: 30px;
margin-left: 30px;
}
section .out .in ul li{
list-style: none;
float: left;
width: 85px;
cursor: pointer;
text-align: center;
}
section .out .in ul li:hover{
color: white;
}
section .msg{
width: 800px;
height: 150px;
float: left;
margin-left: 30px;
}
section :after{
content: '';
display: block;
clear: both;
}
section .msg table{
text-align: center;
}
section .msg table tr td{
width: 130px;
height: 40px;
}
section .msg table tr td a{
text-decoration: none;
color: black;
display: block;
}
section .msg table tr td a:hover{
color: #FF4400;
}
section .ul_li{
background-color: red;
}
/*主体右的广告*/
section #you{
width: 500px;
overflow: hidden;
height: 270px;
margin-top: -40px;
}
section #you ul li{
list-style: none;
margin-left: 250px;
margin-top: 15px;
}
section #you ul li a{
text-decoration: none;
color: black;
display: block;
}
section #you ul li a:hover{
color: orangered;
}
/*section #you ul li a:nth-of-type(1)>a{
text-align: center;
}*/
/*主体下的车展*/
section #che{
margin-left: 30px;
}
section #che ul{
width: 796px;
height: 100px;
list-style: none;
text-align: center;
}
section #che{
margin-top: -180px;
}
section #che ul li{
float: left;
overflow: hidden;
width: 110px;
}
section #che ul li a{
text-decoration: none;
color: black;
}
section #che ul li a:hover{
color: orangered;
}
section #che ul li a img{
height: 50px;
}
section #che ul li a img:hover{
transform: scale(1.1);
transition: 1s;
}
section #che ul li a p{
width: 108px;
}
/*新闻头条*/
section #tou_tiao{
width: 900px;
margin-top: 15px;
float: left;
overflow: hidden;
margin-left: 30px;
}
section #tou_tiao h1 span{
float: left;
color: orangered;
}
section #tou_tiao h1 a{
text-decoration: none;
color: black;
}
section #tou_tiao h1 a:hover{
color: orangered;
}
/*轮播*/
section #outy{
height: 300px;
width: 350px;
/* border: 3px slateblue solid; */
margin: 30px 20px;
overflow: hidden;
float: left;
}
section #outy nav{
height: 300px;
width: 1400px;
position: relative;
left: 0px;
}
section #outy #iny img{
height: 300px;
width: 350px;
display: block;
float: left;
}
/*轮播右边*/
section #lun_bo_you{
width: 500px;
float: right;
margin-top: 35px;
}
section #lun_bo_you h2 a{
text-decoration: none;
color: orangered;
}
section #lun_bo_you h2 a:hover{
border-bottom: 1px orangered solid;
}
section #lun_bo_you li{
list-style: none;
}
section #lun_bo_you li a{
display: inline-block;
color: black;
text-decoration: none;
}
section #lun_bo_you li a:hover{
color: orangered;
}
section #lun_bo_you li{
padding: 10px 10px;
}
/*优惠购车*/
section #you_hui_gou_che{
float: right;
overflow: hidden;
width: 400px;
/*margin-right: 100px;*/
}
section #you_hui_gou_che h2{
color: orangered;
}
section #you_hui_gou_che ul{
border: 1px darkgray solid;
}
section #you_hui_gou_che ul li a h4{
color: black;
}
section #you_hui_gou_che ul li a h4:hover{
color: orangered;
}
section #you_hui_gou_che ul li a{
text-decoration: none;
float: left;
margin-top: 15px;
display: block;
height: 70px;
line-height: 24px;
margin-left: 30px;
}
section #you_hui_gou_che ul li a:hover{
transform: scale(1.1);
transition: 1s;
}
section #you_hui_gou_che ul li a p{
color: orangered;
}
/*广告的一批*/
section .fan img{
margin: 20px 0px;
width: 100%;
}
/*邯郸二手车*/
section #han_dan{
margin-bottom: 10px;
}
section #han_dan h1{
font-size: 40px;
}
section #han_dan h1 a{
color: orangered;
text-decoration: none;
}
section #han_dan img{
width: 100%;
}
/*价格*/
section .peng .zuo{
width: 400px;
height: 400px;
background: #F7F7F7;
}
section .peng .zuo ul{
border: 1px #F7F7F7 solid;
}
section .peng .zuo ul li{
list-style: none;
}
section .peng .zuo ul li a{
text-decoration: none;
color: black;
display: inline-block;
margin: 15px 10px;
width: 80px;
height: 50px;
line-height: 50px;
text-align: center;
background: white;
border-radius: 10px;
}
section .peng .zuo ul li:nth-of-type(1){
font-size: 30px;
}
section .peng .zuo ul li:nth-of-type(5){
font-size: 30px;
}
section .peng .zuo ul li a:hover{
color: white;
background: orangered;
transition: 1s;
}
/*二手车排版*/
section .peng .you{
/*width: 900px;*/
/*border: 2px blue solid;*/
}
section .peng .you table{
width: 800px;
/*margin-left: 100px;*/
}
section .peng .you table tr td a{
color: black;
text-decoration: none;
display: inline-block;
margin: 5px 5px;
/*width: 210px;*/
/*float: left;*/
}
section .peng .you table tr td img:hover{
transform: scale(1.1);
transition: 2s;
}
section .peng .you table tr td a:hover{
color: orangered;
}
section .peng .you table tr td .bian_se{
color: orangered;
}
section .peng .you table tr td .bian_se:hover{
border-bottom: 1px orangered solid;
}
section .peng .you table tr td a:nth-of-type(2){
width: 220px;
font-size: 15px;
}
section .peng .you table tr td p{
color: #999999;
font-size: 10px;
margin: 5px 5px;
}
section .peng .you table tr td span{
color: #999999;
}
/*尾部*/
footer{
margin-top: 10px;
clear: both;
border:2px #F7F7F7 solid;
}
footer #wei_bu_zuo{
width: 800px;
float: left;
overflow: hidden;
background: #F7F7F7;
}
footer #wei_bu_zuo .ee{
overflow: hidden;
}
footer #wei_bu_zuo .ee li{
list-style: none;
float: left;
overflow: hidden;
margin-left: 20px;
}
footer #wei_bu_zuo .ee li:nth-of-type(3){
margin-top: 20px;
}
footer #wei_bu_zuo .ee li:nth-of-type(4){
margin-top: 15px;
}
/*尾部左下*/
footer #wei_bu_xia{
float: left;
overflow: hidden;
}
footer #wei_bu_xia ul li{
float: left;
list-style: none;
padding:20px 20px;
}
footer #wei_bu_xia ul li a{
text-decoration: none;
color: black;
}
footer #wei_bu_xia ul li a:hover{
color: orangered;
}
footer #wei_bu_you{
float: left;
padding-left: 130px;
background: #F7F7F7;
}
footer #wei_bu_you p{
float: left;
}
footer #wei_bu_you ul{
list-style: none;
float: left;
}
footer #wei_bu_you ul li{
margin: 15px 15px;
}
footer #wei_bu_you p img{
padding-top: 15px;
}
footer #wei_bu_you ul li:nth-of-type(1){
text-align: center;
}
footer #wei_bu_you ul li:nth-of-type(2){
text-align: center;
font-weight: 900;
}
js代码
window.onload =function(){
var obtn = document.querySelectorAll(".in li");
var oElec = document.getElementsByClassName("msg");
for(var i =0;i<obtn.length;i++){
obtn[i].index=i;
obtn[i].onmouseover =function(){
console.log(this.index);
for(var j =0; j<obtn.length;j++){
obtn[j].className="";
oElec[j].style.display = "none";
}
this.className = "ul_li";
oElec[this.index].style.display ="block";
}
}
}
var num = 350;
var time = 300;
function move(){
var nav = document.getElementById("iny");
if( num == 1400){
nav.style.transition = "left 0s";
clearInterval(time);
time = setInterval("move()",0);
num = 0;
}else{
nav.style.transition = "left 1s";
clearInterval(time);
time = setInterval("move()",1000*2.5);
}
nav.style.left ="-"+num+"px";
num += 350;
}
time = setInterval("move()",1000*2.5);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
