當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時間：2025/3/12 javascript 56 豆豆

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

🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號作者? ?簡歷模板、學(xué)習(xí)資料、面試題庫、技術(shù)互助【關(guān)注我，都給你】

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

?臨近期末, 你還在為HTML網(wǎng)頁設(shè)計結(jié)課作業(yè),老師的作業(yè)要求感到頭大？HTML網(wǎng)頁作業(yè)無從下手？網(wǎng)頁要求的總數(shù)量太多？沒有合適的模板？等等一系列問題。你想要解決的問題，在專欄👇🏻👇🏻👇🏻👇🏻

??Html+Css+JavaScript期末大作業(yè)?

?都能滿足你的需求。原始HTML+CSS+JS頁面設(shè)計, web大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，非常適合初學(xué)者學(xué)習(xí)使用。

視頻演示：?# 大學(xué)生Web前端期末大作業(yè)--奧迪汽車主題網(wǎng)頁設(shè)計【附完整源碼】.mp4

網(wǎng)頁實現(xiàn)截圖：文末獲取源碼

汽車官網(wǎng)主頁：

汽車車型介紹：

奧迪運動基因：

熱門賽事介紹：

?駕控體驗中心：

?奧迪運動商城：

項目組織結(jié)構(gòu)：

主要源碼展示：

奧迪官網(wǎng)主頁.html

<html lang="en"><head><meta charset="UTF-8"><title>奧迪官網(wǎng)</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="">預(yù)約試駕</a><a class="typeface" href="">經(jīng)銷商查詢</a><a class="typeface" href="">一汽-大眾奧迪</a><a class="typeface" href="">聯(lián)系我們</a><a class="typeface" href="">版權(quán)說明</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; }

作品來自于網(wǎng)絡(luò)收集、侵權(quán)立刪?

獲取完整源碼：

大家點贊、收藏、關(guān)注、評論啦、查看👇🏻👇🏻👇🏻微信公眾號獲取聯(lián)系👇🏻👇🏻👇🏻

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

?精彩專欄推薦：

Java畢設(shè)項目精品實戰(zhàn)案例《100套》

HTML5大作業(yè)實戰(zhàn)案例《100套》

web前端網(wǎng)頁實戰(zhàn)《100套》

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HTML+CSS+JS实现 ❤️透明等离
下一篇： jsp源码oracle数据库,JSP与o