web前端期末大作業??酷炫回應式汽車租賃網頁設計??（HTML+CSS+JavaScript）-有解無憂

🍅 作者主頁：Java李楊勇

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

🍅 文末獲取原始碼聯系 🍅

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

java專案精品實戰分享案例《100套》》》

web期末大作業網頁實戰《100套》》》

Html+Css+JS期末大作業《100套》》》

常見網頁設計作業題材有個人、美食、公司、體育、化妝品、物流、環保、書籍、婚紗、軍事、游戲、節日、戒煙、電影、攝影學校、旅游、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、明星、服裝、文化、家鄉、鮮花、禮品、汽車、其他等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求，原始HTML+CSS+JS頁面設計, web大學生網頁設計作業原始碼，這是一個不錯的電競博客網頁制作，畫面精明，非常適合初學者學習使用，

B站視頻演示： Web前端期末大作業課程--回應式汽車租賃網頁設計.mp4

網頁實作截圖：文末獲取原始碼聯系

網站首頁

關于我們

汽車租賃業被稱為交通運輸服務行，它因為無須辦理保險、無須年檢維修、車型可隨意更換等優點，以租車代替買車來控制企業成本，這種在外企中十分流行的管理方式，正慢慢受到國內企事業單位和個人用戶的青睞，汽車租賃是指將汽車的資產使用權從擁有權中分開，出租人具有資產所有權，承租人擁有資產使用權，出租人與承租人簽訂租賃合同，以交換使用權利的一種交易形式，
汽車租賃是指在約定時間內，租賃經營人將租賃汽車（包括載貨汽車和載客汽車）交付承租人使用，不提供駕駛勞務的經營方式，汽車租賃的實質是在將汽車的產權與使用權分開的基礎上，通過出租汽車的使用權而獲取收益的一種經營行為，其出租標的除了實物汽車以外，還包含保證該車輛正常、合法上路行駛的所有手續與相關價值，不同于一般汽車出租業務的是，在租賃期間，承租人自行承擔駕駛職責，汽車租賃業的核心思想是資源共享，服務社會，

車量展示：

新聞資訊：

客戶案例：

專業司機：

在線預約：

聯系我們：

專案組織結構：

主要原始碼展示：

index.html

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>(自適應手機版)黃色回應式車行汽車租賃網站模板 二手車銷售出租公司網站</title>
    <meta name="keywords" content="汽車租賃模板,二手車網站模板" />
  
</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="(自適應手機版)黃色回應式車行汽車租賃網站模板 二手車銷售出租公司網站模板下載 - AB模板網"> </a>
                <ul class="nav">
                    <li><a href="/518/index.html" target="_self">首 頁</a> </li>

                    <li><a href="/518/about/">關于我們</a></li>

                    <li><a href="/518/car/">車輛展示</a></li>

                    <li><a href="/518/news/">新聞資訊</a></li>

                    <li><a href="/518/case/">客戶案例</a></li>

                    <li><a href="/518/siji/">專業司機</a></li>

                    <li><a href="/518/yuyue/">在線預約</a></li>

                    <li><a href="/518/contact/">聯系我們</a></li>

                </ul>

                <!-- 手機端導航 -->

                <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="(自適應手機版)黃色回應式車行汽車租賃網站模板 二手車銷售出租公司網站模板下載 - AB模板網" /></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">首 頁</span> </a> </li>

                            <li> <a class="col-box" href="/518/about/" target="_self"> <span class="tit">關于我們</span> </a> </li>

                            <li> <a class="col-box" href="/518/car/" target="_self"> <span class="tit">車輛展示</span> </a> </li>

                            <li> <a class="col-box" href="/518/news/" target="_self"> <span class="tit">新聞資訊</span> </a> </li>

                            <li> <a class="col-box" href="/518/case/" target="_self"> <span class="tit">客戶案例</span> </a> </li>

                            <li> <a class="col-box" href="/518/siji/" target="_self"> <span class="tit">專業司機</span> </a> </li>

                            <li> <a class="col-box" href="/518/yuyue/" target="_self"> <span class="tit">在線預約</span> </a> </li>

                            <li> <a class="col-box" href="/518/contact/" target="_self"> <span class="tit">聯系我們</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>

                <!-- 手機端導航 -->

            </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="幻燈片3"> </div>
                <div class="swiper-slide"> <img src="/518/uploads/allimg/210729/1-210H92019230-L.jpg" alt="幻燈片2"> </div>
                <div class="swiper-slide"> <img src="/518/uploads/allimg/210729/1-210H9201Z70-L.jpg" alt="幻燈片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">搜索關鍵詞：</span>
                    <div>

                        <a href='/518/car/c1/'>豪華型</a>

                        <a href='/518/car/c2/'>舒適型</a>

                        <a href='/518/car/c3/'>經濟型</a>

                        <a href='/518/car/c4/'>越野SUV</a>

                        <a href='/518/car/c5/'>客車型</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="請輸入關鍵詞" />
                    </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">車輛展示</div>
                <div class="intro wow slideInUp">給予客戶清晰完美的用車解決方案！</div>
                <div class="line wow slideInUp"></div>
            </div>
            <div class="show-nav wow slideInUp">
                <ul>
                    <li class="li-active"> <a href="/518/car/">全部車型</a> </li>

                    <li><a href="/518/car/c1/">豪華型</a></li>

                    <li><a href="/518/car/c2/">舒適型</a></li>

                    <li><a href="/518/car/c3/">經濟型</a></li>

                    <li><a href="/518/car/c4/">越野SUV</a></li>

                    <li><a href="/518/car/c5/">客車型</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="邁巴赫"> </div>
                    <div class="info">
                        <div class="name">邁巴赫</div>
                        <div class="intro">邁巴赫（德文：Maybach）與邁巴赫引擎制造廠（德文：Maybach-Motorenbau GmbH）是曾經在1921年到1940年間活躍于歐洲地區的德國超豪華汽車品牌與制造廠， 車廠創始人卡爾邁巴赫（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">查看詳細+</a>
                            <div>￥<strong>1200</strong>/天</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="寶馬7系"> </div>
                        <div class="info"> <span>寶馬7系</span>
                            <div>￥<strong>800</strong>/天</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="奔馳S級"> </div>
                        <div class="info"> <span>奔馳S級</span>
                            <div>￥<strong>800</strong>/天</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="奧迪"> </div>
                        <div class="info"> <span>奧迪</span>
                            <div>￥<strong>600</strong>/天</div>
                        </div>
                    </a>

                </div>
            </div>
        </div>
    </div>
    <div class="index-reason">
        <div class="index-Title">
            <div class="title wow slideInUp">選擇我們的 <strong style="color: #3186E0 ;">四大理由</strong></div>
            <div class="intro wow slideInUp">給予客戶清晰完美的解決方案！</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">實力雄厚</div>
                        <div class="intro">16年租車經驗</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">質高價優</div>
                        <div class="intro">合理的價格</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">完善服務</div>
                        <div class="intro">優質服務體系</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">專業售后</div>
                        <div class="intro">專業團隊保障</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">四大服務承諾</h3>
                    <div class="intro wow slideInUp">免除您的后顧之憂</div>
                    <div class="line wow slideInUp"></div>
                    <div class="seave wow slideInUp">
                        <div class="strip">
                            <div></div>
                            <span>24小時客服問題回應服務</span> </div>
                        <div class="strip">
                            <div></div>
                            <span>7*24售后熱線服務</span> </div>
                        <div class="strip">
                            <div></div>
                            <span>優質車源保證安全</span> </div>
                        <div class="strip">
                            <div></div>
                            <span>專家指導服務</span> </div>
                    </div>
                   
            <div class="wd1200">Copyright &copy; 2021 通用企業汽車租賃有限公司<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蘇ICP12345678</a> <a href="/sitemap.xml" target="_blank">XML地圖</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('請輸入您的姓名！');
                    $("#name2").focus();
                    return false;
                }
                if ($("#tel2").val() == "") {
                    alert("請輸入你的手機！");
                    $("#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("手機號碼格式不正確！");
                    $("#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;
}

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

獲取完整原始碼：

大家點贊、收藏、關注、評論啦、查看下方👇🏻👇🏻👇🏻微信公號小卡片獲取👇🏻👇🏻👇🏻

打卡文章更新 83/ 100天

專欄推薦閱讀：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/325614.html

標籤：其他

上一篇：cgb2108-day14

下一篇：JavaScript的學習日記三(for回圈+陣列)

web前端期末大作業??酷炫回應式汽車租賃網頁設計??（HTML+CSS+JavaScript）

B站視頻演示： Web前端期末大作業課程--回應式汽車租賃網頁設計.mp4

網頁實作截圖：文末獲取原始碼聯系

專案組織結構：

主要原始碼展示：

獲取完整原始碼：