静态网页设计——奥迪官网(HTML+CSS+JavaScript)

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!

使用技术: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">
        
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值