Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Near the end of the semester, are you still writing an HTML web design class assignment and the teacher’s homework requirements are overwhelming? Is the total number of pages required too high? Don’t know how to do your HTML web homework? Don’t have the right template? And so on. The problem you’re trying to solve, There are personal, food, company, sports, cosmetics, logistics, environmental protection, books, wedding, military, games, festivals, smoking cessation, film, photography school, tourism, e-commerce, pets, electrical appliances, tea, home, hotel, dance, animation, stars, Clothing, culture, hometown, flowers, gifts, cars, other web design topics, A+ level homework, can meet college students web design needs can meet your needs. Original HTML+CSS+JS page design, Web college students web design homework source code, this is a good e-sports blog web page production, screen smart, very suitable for beginners to learn to use. Click the home page for source code links

Video demo:

# College students Web front-end final big homework — Audi car theme Web design. Mp4

Screenshot of webpage implementation:Click the home page for source code links

Automobile official website homepage:

​

Car model introduction:

​

Audi Sports Gene:

​

Introduction to popular events:

​

Driving control Experience Center:

​

Audi Sports Mall:

​

Project organization structure:

​

Main source code display:

Audi official website homepage.html

< HTML lang="en"> <head> <meta charset="UTF-8"> <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"> <! Navigation -- -- -- > < 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" > home page < / a > < / li > < li class = "li1" > < a class = "topzit1" href = "2. HTML" > motion models < / a > < / li > < li <a class="topzit1" href="3.html"> <li class="li1"><a class="topzit1" href="3.html"> Href = "4. HTML" > hot events < / a > < / li > < li class = "li1" > < a class = "topzit1" href = "5. HTML" > control experience center < / a > < / li > < li class = "li1" > < a Class = "topzit1" href = "6. HTML" > audi sport mall < / 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"> <! - picture list 1 -- > < div class = "other - 1" > < img class = "other - 1 - img SRC =" img/other - 1 - img. PNG "> < / div > <! - image list 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=""> Href =""> </a> <a class="typeface" href=""> Href = "" > copyright < / a > < / div > < / div > < / div > < / body > < / HTML >Copy the code

​

The home page of 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; The font - size: 15.5 px; letter-spacing: 1px; } .topzit1 { color: #838383; font-style: oblique; font-weight: bolder; The font - size: 15.5 px; letter-spacing: 1px; } .logo2 { float: right; margin-top: 14px; } /* carousel */. 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%; The transition: - 0.6 s ease its - transform; 0.6 s help ease the transition: transform; 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%; } /* List of images */. 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; } /* bottom */. Footer {width: 100%; height: 80px; line-height: 80px; background: #1b1b1b; } .content { height: 100%; padding: 0 60px; position: relative; } .typeface { color: #888b85; margin-right: 24px; }Copy the code

Works from the network collection, infringement stand delete

Get the full source code:

Everyone likes, favorites, attention, comments, click on the home page to get source contact

Clocked articles updated 62/100 days