當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2025/3/12 javascript 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端期末大作业--奥迪RS汽车主题官网设计（HTML+CSS+JavaScript）实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

?臨近期末, 你還在為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"><div class="other-1"><img class="other-1-img" src="img/other-1-img.png"></div><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; }

作品來自于網絡收集、侵權立刪?

獲取完整源碼：

大家點贊、收藏、關注、評論啦、查看👇🏻👇🏻👇🏻微信公眾號獲取聯系👇🏻👇🏻👇🏻

打卡文章更新?62/? 100天

?精彩專欄推薦：

Java畢設項目精品實戰案例《100套》

HTML5大作業實戰案例《100套》

web前端網頁實戰《100套》

總結

以上是生活随笔為你收集整理的web前端期末大作业--奥迪RS汽车主题官网设计（HTML+CSS+JavaScript）实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HTML+CSS+JS实现 ❤️透明等离
下一篇： android寻找手机,寻找那些“干净”