🍅 Author home page: Li Yangyong
🍅 Introduction: high quality creator in Java field 🏆, [Li Yangyong] author of public account ✌ Resume template, learning materials, interview question bank, technical assistance [pay attention to me and give it to you]
🍅 Get the source code at the end of the article 🍅
Near the end of the term, you are still designing your final homework for HTML web pages. Do you feel the teacher's homework requirements are great? The total number of pages required is too much? Can't you start HTML web page homework? No suitable template? And so on. You want to solve the problem in the column 👇🏻👇🏻👇🏻👇🏻
java project boutique actual combat sharing case "100 sets"
Web final assignment web page practice "100 sets"
Html+Css+JS final assignment "100 sets"
Common web design topics include individuals, food, companies, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotels, dance, animation, stars, clothing Culture, hometown, flowers, gifts, cars, other web design topics, A + level homework can meet the needs of College Students' web design. Original HTML+CSS+JS page design, web college students' web design homework source code, this is A good E-sports blog web page production, the picture is smart, very suitable for beginners to learn and use.
Video demonstration of station B: Web front-end responsive car rental web design.mp4
Screenshot of web page implementation: get the source code contact at the end of the article
Website home page
About us
The car rental industry is known as the transportation service bank. Because it does not need insurance, annual inspection and maintenance, and the models can be replaced at will, it uses car rental instead of buying a car to control the enterprise cost. This very popular management method in foreign enterprises is gradually favored by domestic enterprises, institutions and individual users. Car leasing refers to a transaction form that separates the asset use right of the car from the ownership, the lessor has the asset ownership, the lessee has the asset use right, and the lessor and the lessee sign a lease contract in exchange for the use right.
Car leasing refers to the operation mode in which the leasing operator delivers the leased cars (including trucks and passenger cars) to the lessee for use within the agreed time without providing driving services. The essence of car rental is a kind of business behavior that obtains income through the use right of taxi on the basis of separating the property right and use right of car. In addition to the physical car, the rental object also includes all procedures and related values to ensure the normal and legal driving of the vehicle. Different from the general car rental business, the lessee shall bear the driving responsibility during the lease period. The core idea of car rental industry is resource sharing and serving the society.
Vehicle volume display:
News information:
Customer case:
Professional driver:
Online Reservation:
contact us:
Project organization structure:
Main source code display:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>(Adaptive mobile version)Yellow responsive car shop car rental website template used car sales rental company website</title>
<meta name="keywords" content="Car rental template,Used car website template" />
</head>
<body>
<header class="index-header">
<div class="index-head">
<div class="wd1200"> <a href="/518/" class="logo"> <img src="/518/style/images/logo.png" alt="(Adaptive mobile version)Yellow responsive car shop car rental website template used car sales rental company website template download - AB Template net"> </a>
<ul class="nav">
<li><a href="/518/index.html" target="_self">home page</a> </li>
<li><a href="/518/about/">About us</a></li>
<li><a href="/518/car/">Vehicle display</a></li>
<li><a href="/518/news/">News information</a></li>
<li><a href="/518/case/">Customer case</a></li>
<li><a href="/518/siji/">Professional driver</a></li>
<li><a href="/518/yuyue/">Online booking </a></li>
<li><a href="/518/contact/">contact us</a></li>
</ul>
<!-- Mobile terminal navigation -->
<div class="m-header"> <span class="box"> <span class="line line1"></span> <span class="line line2"></span> <span class="line line3"></span> </span>
</div>
<div class="m-header-menu">
<div class="m-menu-top f-cb"> <a href="/518/" class="fl title"><img src="/518/style/images/logo2.png" alt="(Adaptive mobile version)Yellow responsive car shop car rental website template used car sales rental company website template download - AB Template net" /></a> <span class="fr close"></span> </div>
<div class="m-header-list">
<ul>
<li> <a class="col-box" href="/S437/" target="_self"> <span class="tit">home page</span> </a> </li>
<li> <a class="col-box" href="/518/about/" target="_self"> <span class="tit">About us</span> </a> </li>
<li> <a class="col-box" href="/518/car/" target="_self"> <span class="tit">Vehicle display</span> </a> </li>
<li> <a class="col-box" href="/518/news/" target="_self"> <span class="tit">News information</span> </a> </li>
<li> <a class="col-box" href="/518/case/" target="_self"> <span class="tit">Customer case</span> </a> </li>
<li> <a class="col-box" href="/518/siji/" target="_self"> <span class="tit">Professional driver</span> </a> </li>
<li> <a class="col-box" href="/518/yuyue/" target="_self"> <span class="tit">Online booking </span> </a> </li>
<li> <a class="col-box" href="/518/contact/" target="_self"> <span class="tit">contact us</span> </a> </li>
</ul>
</div>
<div class="m-header-menu-sub">
<div class="boxs"></div>
<div class="boxs"></div>
<div class="boxs"></div>
<div class="boxs"></div>
<div class="boxs"></div>
<div class="boxs"></div>
<div class="boxs"></div>
</div>
</div>
<div class="m-shadow"></div>
<!-- Mobile terminal navigation -->
</div>
</div>
<div class="swiper-container index-banner-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="/518/uploads/allimg/210729/1-210H92019370-L.jpg" alt="Slide 3"> </div>
<div class="swiper-slide"> <img src="/518/uploads/allimg/210729/1-210H92019230-L.jpg" alt="Slide 2"> </div>
<div class="swiper-slide"> <img src="/518/uploads/allimg/210729/1-210H9201Z70-L.jpg" alt="Slide 1"> </div>
</div>
<div class="swiper-pagination"></div>
</div>
</header>
<div class="index-search wow bounceInUp">
<div class="wd1200">
<div class="key"> <img src="/518/style/images/icon_hot.png" alt="" class="icon">
<div class="word"> <span class="title">Search keywords:</span>
<div>
<a href='/518/car/c1/'>Luxury</a>
<a href='/518/car/c2/'>Comfort type</a>
<a href='/518/car/c3/'>Economic type</a>
<a href='/518/car/c4/'>cross-country SUV</a>
<a href='/518/car/c5/'>Passenger car type</a>
</div>
</div>
</div>
<form name="formsearch" action="/518/plus/search.php">
<div class="search-box">
<div class="input">
<input type="text" name="q" id="kw" placeholder="Please enter keywords" />
</div>
<div class="button">
<button type="submit"> <img src="/518/style/images/icon_search.png" alt=""> </button>
</div>
</div>
</form>
</div>
</div>
<div class="index-show">
<div class="wd1200">
<div class="index-Title">
<div class="title wow slideInUp">Vehicle display</div>
<div class="intro wow slideInUp">Give customers clear and perfect car solutions!</div>
<div class="line wow slideInUp"></div>
</div>
<div class="show-nav wow slideInUp">
<ul>
<li class="li-active"> <a href="/518/car/">All models</a> </li>
<li><a href="/518/car/c1/">Luxury</a></li>
<li><a href="/518/car/c2/">Comfort type</a></li>
<li><a href="/518/car/c3/">Economic type</a></li>
<li><a href="/518/car/c4/">cross-country SUV</a></li>
<li><a href="/518/car/c5/">Passenger car type</a></li>
</ul>
</div>
<div class="show-contain">
<div class="show-box wow slideInUp">
<div class="picture"> <img src="/518/uploads/allimg/210730/1-162L31146-F30.jpg" alt="Maybach "> </div>
<div class="info">
<div class="name">Maybach </div>
<div class="intro">Maybach (German: Maybach)With Maybach engine manufacturing plant (German: Maybach-Motorenbau GmbH)It is a German super luxury car brand and manufacturer that was active in Europe from 1921 to 1940. The founder of the car factory is Karl Maybach( Karl Maybach)...</div>
<div class="photo"><img src='/518/uploads/allimg/210730/1-162L31146-6317.jpg'><img src='/518/uploads/allimg/210730/1-162L31146-2637.jpg'><img src='/518/uploads/allimg/210730/1-162L31146-F30.jpg'></div>
<div class="bot"> <a href="/518/car/c1/23.html" class="detail">View details+</a>
<div>￥<strong>1200</strong>/day</div>
</div>
</div>
</div>
<div class="show-car wow slideInUp">
<a href="/518/car/c3/22.html" class="car-item">
<div class="tu"> <img src="/518/uploads/allimg/210730/1-162L30923-9619.jpg" alt="BMW 7 Series"> </div>
<div class="info"> <span>BMW 7 Series</span>
<div>￥<strong>800</strong>/day</div>
</div>
</a>
<a href="/518/car/c1/2.html" class="car-item">
<div class="tu"> <img src="/518/uploads/allimg/210728/1-162JP4U-5634.jpg" alt="Benz S level"> </div>
<div class="info"> <span>Benz S level</span>
<div>￥<strong>800</strong>/day</div>
</div>
</a>
<a href="/518/car/c1/1.html" class="car-item">
<div class="tu"> <img src="/518/uploads/allimg/210728/1-162JP205-5921.jpg" alt="audi"> </div>
<div class="info"> <span>audi</span>
<div>￥<strong>600</strong>/day</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="index-reason">
<div class="index-Title">
<div class="title wow slideInUp">Choose our <strong style="color: #3186e0; "> four reasons < / strong > < / div >
<div class="intro wow slideInUp">Give customers clear and perfect solutions!</div>
<div class="line wow slideInUp"></div>
</div>
<div class="reason-nav wd1200 wow slideInUp">
<ul>
<li class='li-active'>
<div class="sanjiao"></div>
<img src="/518/style/images/ly1.png" alt="" class="icon icon1"> <img src="/518/style/images/ly1_h.png" alt="" class="icon icon2">
<div class="word">
<div class="title">fully reinforced</div>
<div class="intro">16 Years of car rental experience</div>
</div>
</li>
<li>
<div class="sanjiao"></div>
<img src="/518/style/images/ly2.png" alt="" class="icon icon1"> <img src="/518/style/images/ly2_h.png" alt="" class="icon icon2">
<div class="word">
<div class="title">High quality and high price</div>
<div class="intro">Reasonable price</div>
</div>
</li>
<li>
<div class="sanjiao"></div>
<img src="/518/style/images/ly3.png" alt="" class="icon icon1"> <img src="/518/style/images/ly3_h.png" alt="" class="icon icon2">
<div class="word">
<div class="title">Perfect service</div>
<div class="intro">Quality service system</div>
</div>
</li>
<li>
<div class="sanjiao"></div>
<img src="/518/style/images/ly4.png" alt="" class="icon icon1"> <img src="/518/style/images/ly4_h.png" alt="" class="icon icon2">
<div class="word">
<div class="title">Professional after sales</div>
<div class="intro">Professional team guarantee</div>
</div>
</li>
</ul>
</div>
<div class="reason-contain" style='background-image: url(/518/style/images/ly.jpg);'>
<div class="wd1200">
<div class="promise">
<h3 class="wow slideInUp">Four service commitments</h3>
<div class="intro wow slideInUp">Avoid your worries</div>
<div class="line wow slideInUp"></div>
<div class="seave wow slideInUp">
<div class="strip">
<div></div>
<span>24 Hourly customer service problem response service</span> </div>
<div class="strip">
<div></div>
<span>7*24 After sales hotline service</span> </div>
<div class="strip">
<div></div>
<span>High quality vehicle source to ensure safety</span> </div>
<div class="strip">
<div></div>
<span>Expert guidance services</span> </div>
</div>
<div class="wd1200">Copyright © 2021 General enterprise car rental Co., Ltd<a href="https://Beian. MIIT. Gov.cn / "target =" _blank "rel =" nofollow "> Su icp12345678 < / a > < a href =" / sitemap. XML "target =" _blank "> XML map < / a > < / div >
</div>
</footer>
<img src="/518/style/images/go-top.png" alt="" id="go-top">
<script src="/518/style/js/swiper.min.js"></script>
<script src="/518/style/js/common.js"></script>
<script src="/518/style/js/wow.js"></script>
<script>
$(function() {
$('#tj2').click(function() {
//alert(1)
if ($('#name2').val() == '') {
alert('Please enter your name!');
$("#name2").focus();
return false;
}
if ($("#tel2").val() == "") {
alert("Please enter your mobile phone!");
$("#tel2").focus();
return false;
}
if (!$("#tel2").val().match(/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/)) {
alert("Incorrect mobile phone number format!");
$("#tel2").focus();
return false;
}
})
})
</script>
<script src="/518/style/js/index.js"></script>
<script src="/518/style/js/jquery.kxbdmarquee.js"></script>
<script type="text/javascript">
(function() {
$("#marquee4").kxbdMarquee({
direction: "up",
isEqual: false
});
})();
</script>
</body>
</html>style.css
header .index-head .wd1200 {
display: flex;
align-items: center;
justify-content: space-between;
}
header .index-head .wd1200 .logo img {
height: 65px;
}
header .index-head .wd1200 .nav {
display: flex;
align-items: center;
}
header .index-head .wd1200 .nav li {
height: 90px;
padding: 0 20px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
header .index-head .wd1200 .nav li a {
font-size: 16px;
transition: 0.3s;
color: #fff
}
header .index-head .wd1200 .nav .li-active {
border-bottom: 3px solid #3186E0;
}The works come from network collection, infringement, legislation and deletion
Get the complete source code:
Everyone likes, collects, pays attention to, comments and views below 👇🏻👇🏻👇🏻 Wechat public account small card acquisition 👇🏻👇🏻👇🏻
Punch in article update 83/ 100 days
Recommended reading:
100 sets of high-quality practical case of Java completion project