静态网页设计——奥迪官网（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">
        <div class="banner" id="banner_pic">
            <a href="../奥迪 e-tron/奥迪 e-tron.html"><div class="current"><img src="image/banner1.png"></div></a>
            <a href="../全新奥迪A4L/全新奥迪A4L.html"><div class="pic"><img src="image/banner2.png"></div></a>
            <a href="../奥迪Q3轿车/奥迪Q3轿车.html"><div class="pic"><img src="image/banner3.png"></div></a>
            <a href="../全新奥迪Q7/全新奥迪Q7.html"><div class="pic"><img src="image/banner4.png"></div></a>
            <a href="../全新奥迪TT Roadster/全新奥迪TT Roadster.html"><div class="pic"><img src="image/banner5.png"></div></a>
            <a href="../奥迪R8 V10 Coupe Performance/奥迪R8 V10 Coupe Performance.html"><div class="pic"><img src="image/banner6.png"></div></a>
        </div>
        <ol id="button">
            <a href="../奥迪 e-tron/奥迪 e-tron.html"><li class="current">Audi e-tron</li></a>
            <a href="../全新奥迪A4L/全新奥迪A4L.html"><li class="but">Audi A4L</li></a>
            <a href="../全新奥迪Q7/全新奥迪Q7.html"><li class="but">Audi Q3</li></a>
            <a href="../全新奥迪Q7/全新奥迪Q7.html"><li class="but">Audi Q7</li></a>
            <a href="../全新奥迪TT Roadster/全新奥迪TT Roadster.html"><li class="but">AudiTT</li></a>
            <a href="../奥迪R8 V10 Coupe Performance/奥迪R8 V10 Coupe Performance.html"><li class="but">Audi R8</li></a>
        </ol>
    </div>

车型详细介绍界面。

3、预约试驾

左侧使用form表单实现信息填写，右侧是一张img标签的图片。

代码：

<div class="form_div">
        <div class="form">
            <form action="#" method="post" class="form1">
                <span>意向车辆</span>
                <select>
                    <option>车系</option><option>A3</option><option>A4</option><option>A5</option><option>A6</option><option>A7</option><option>A8</option><option>Q2</option><option>Q3</option><option>Q5</option><option>Q7</option><option>Q8</option><option>TT</option><option>R8</option><option>RS</option><option>e-tron</option>
                </select>
                <input type="text" value="车型" maxlength="20">
                <br><br><br><br><br>
                <span>意向经销商</span>
                <select>
                    <option>经销商省</option><option>A安徽</option><option>B北京</option><option>C重庆</option><option>F福建</option><option>G甘肃</option><option>G广东</option><option>G广西</option><option>G贵州</option><option>H海南</option><option>H河北</option><option>H河南</option><option>H黑龙江</option><option>H湖北</option><option>H湖南</option><option>J吉林</option><option>J江苏</option><option>J江西</option><option>L辽宁</option><option>N内蒙古</option><option>N宁夏</option><option>Q青海</option><option>S山东</option><option>S山西</option><option>S陕西</option><option>S上海</option><option>S四川</option><option>T天津</option><option>X西藏</option><option>X新疆</option><option>Y云南</option><option>Z浙江</option>
                </select>
                <input type="text" value="经销商市" maxlength="10">
                <input type="text" value="经销商" maxlength="30">
                <br><br><br><br><br><br><br>
                <span>姓名</span>
                <input type="text" value="请填写您的姓名" maxlength="6">
                <br><br><br>
            </form>
            <form action="#" method="post" class="form2">
                <input type="radio" name="sex" checked="checked">先生
                <input type="radio" name="sex">女士
            </form>
            <br>
            <form action="#" method="post" class="form1">
                <span>手机号码</span>
                <input type="tel" value="请填写您的手机号码">
                <br><br><br>
                <span>计划购车时间</span>
                <select>
                    <option>计划购车时间</option><option>当天</option><option>三天内</option><option>一周内</option><option>两周内</option><option>一个月内</option><option>三个月内</option><option>四到六个月内</option><option>七个月到一年内</option><option>一年以上</option><option>不确定</option>
                </select>
            </form>
            <br><br><br>
            <form action="#" method="post" class="form3">
                <input type="radio" name="yinsi"><span>同意隐私条款</span>
            </form>
            <a href="#"><div class="tijiao">提交  ></div></a>
            <br><br><br>
        </div>
        <div class="form_tp"><img src="image/form_tp.png"></div>
    </div>

总结

想要看具体效果的同学，可以访问这个链接：
https://www.bilibili.com/video/BV1HT4y1H7cL/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。