前言
声明:该文章只是做技术分享,若侵权请联系我删除。!!
使用技术:HTML+CSS+JS
主要内容:①网站栏目设计说明。
网站为奥迪官网,由奥迪首页、奥迪车型(具体车型介绍)、预约试驾、查询经销商、在线4s店、认证二手车、购车工具、售后服务、这几部分组成,每个都为超链接指向下一个网页,其中奥迪车型网页下还有具体车型介绍的网页。
②站点文件夹结构说明(站点下各文件夹、各文件)
每个文件夹下的都有相应的网页
③网页制作过程中使用的主要技术和方法(如:用什么方法布局、有什么特点及优势,网页中使用的JavaScript网页特效等)。
分块布局,内容清楚,美观大方,利用了JavaScript的焦点轮播图
主要内容
1、首页
首页用html标签分割成多个区域,使用css设置样式,精准的分割页面格式化。
代码:
<div class="chezhan_div">
<div class="chexing">
<p>奥迪车型</p>
</div>
<ul class="chezhan">
<li><a href="../奥迪 e-tron/奥迪 e-tron.html" target="_blank"><img src="image/chezhan1.webp"><p>Audi e-tron</p></a></li>
<li><a href="../全新奥迪A4L/全新奥迪A4L.html" target="_blank"><img src="image/chezhan2.webp"><p>Audi A4L</p></a></li>
<li><a href="../奥迪Q3轿车/奥迪Q3轿车.html" target="_blank"><img src="image/chezhan3.webp"><p>Audi Q3</p></a></li>
<li><a href="../全新奥迪Q7/全新奥迪Q7.html" target="_blank"><img src="image/chezhan4.webp"><p>Audi Q7</p></a></li>
<li><a href="../全新奥迪TT Roadster/全新奥迪TT Roadster.html" target="_blank"><img src="image/chezhan5.webp"><p>Audi TT</p></a></li>
<li><a href="../奥迪R8 V10 Coupe Performance/奥迪R8 V10 Coupe Performance.html" target="_blank"><img src="image/chezhan6.webp"><p>Audi R8</p></a></li>
</ul>
</div>
2、奥迪车型
最上方使用js实现的轮播图,能够自动刷新图片,或者点击轮播图下方的按钮,能够进入到该车型的详细介绍界面。
代码:
<div class="banner_div">