web前端期末大作业--奥迪RS汽车主题官网设计（HTML+CSS+JavaScript）实现

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏👇🏻👇🏻👇🏻👇🏻

Html+Css+JavaScript期末大作业

都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

视频演示： # 大学生Web前端期末大作业--奥迪汽车主题网页设计【附完整源码】.mp4

网页实现截图：

汽车官网主页：

汽车车型介绍：

奥迪运动基因：

热门赛事介绍：

驾控体验中心：

奥迪运动商城：

项目组织结构：

主要源码展示：

奥迪官网主页.html

<html lang="en"><head><meta charset="UTF-8"><title>奥迪官网</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/bootstrap.css"><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="./css/top1.css" />
</head><body><div><div class="top"><!--导航--><div class="top1"><img class="pt-3" src="img/logo1.png"><ul class="ul-nav d-flex "><li class="li1"><a class="topzit" href="1.html">首页</a></li><li class="li1"><a class="topzit1" href="2.html">运动车型</a></li><li class="li1"><a class="topzit1" href="3.html">奥迪运动基因</a></li><li class="li1"><a class="topzit1" href="4.html">热门赛事</a></li><li class="li1"><a class="topzit1" href="5.html">驾控体验中心</a></li><li class="li1"><a class="topzit1" href="6.html">奥迪运动商城</a></li></ul><div class="logo2 "><a href="#"><img src="img/logo2.png" ></a></div></div></div><!--轮播图--><div id="demo" class="carousel" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img class="banner-img" src="img/R8%20V10%20Coupe%20performance_1920x1080.jpg"></div><div class="carousel-item"><img class="banner-img" src="img/RS%20Q8_1920x1080.jpg"></div><div class="carousel-item"><img class="banner-img" src="img/RS7_1920x1080.jpg"></div><div class="carousel-item"><img class="banner-img" src="img/PC-04.jpg"></div></div><ul class="carousel-indicators"><li data-target="#demo" data-slide-to="0" class="active"></li><li data-target="#demo" data-slide-to="1"></li><li data-target="#demo" data-slide-to="2"></li><li data-target="#demo" data-slide-to="3"></li></ul></div><!--图片列表--><div class="other"><!--图片列表1--><div class="other-1"><img class="other-1-img" src="img/other-1-img.png"></div><!--图片列表2--><div class="other-2"><img class="other-2-img" src="img/other-2-img-new.png"></div></div><!--底部--><div class="footer"><div class="content"><a class="typeface" href="">预约试驾</a><a class="typeface" href="">经销商查询</a><a class="typeface" href="">一汽-大众奥迪</a><a class="typeface" href="">联系我们</a><a class="typeface" href="">版权说明</a></div></div></div>
</body></html>

主页css

.top {min-width: 1070px;padding-top: 60px;
}.top1 {width: 100%;height: 60px;line-height: 60px;position: fixed;background: black;min-width: 1070px;top: 0px;padding: 0 30px;box-sizing: border-box;z-index: 9999;background: url(../img/bg.png);
}body {background: url(../img/bodybg.jpg);
}.a-icon {float: left;
}.ul-nav {float: left;height: 60px;position: absolute;left: 50%;margin-left: -464px;margin-top: -34px;
}li {list-style-type: none;
}.li1 {padding-left: 24px;padding-right: 24px;
}.topzit {color: #ab192d;font-style: oblique;font-weight: bolder;font-size: 15.5px;letter-spacing: 1px;
}.topzit1 {color: #838383;font-style: oblique;font-weight: bolder;font-size: 15.5px;letter-spacing: 1px;
}.logo2 {float: right;margin-top: 14px;
}/*轮播图*/.carousel {position: relative;
}.carousel-inner {position: relative;width: 100%;overflow: hidden;
}.carousel-item {position: relative;display: none;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%;transition: -webkit-transform 0.6s ease;transition: transform 0.6s ease;transition: transform 0.6s ease, -webkit-transform 0.6s ease;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-perspective: 1000px;perspective: 1000px;
}.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {display: block;
}.carousel-item-next,
.carousel-item-prev {position: absolute;top: 0;
}.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {-webkit-transform: translateX(0);transform: translateX(0);
}.banner-img {width: 100%;
}/*图片列表*/.other {padding-top: 47px;
}.other-1 {width: 100%;position: relative;overflow: hidden;
}.other-1-img {width: 100%;height: auto;position: relative;z-index: 1;
}.other-2 {margin-top: 32px;position: relative;overflow: hidden;
}.other-2-img {width: 100%;height: auto;position: relative;z-index: 1;
}/*底部*/.footer {width: 100%;height: 80px;line-height: 80px;background: #1b1b1b;
}.content {height: 100%;padding: 0 60px;position: relative;
}.typeface {color: #888b85;margin-right: 24px;
}