HTML期末作业-旅游景区模板6个页面(HTML+CSS+JavaScript)

时间:2022-01-07 来源:未知网络 作者:996建站网

HTML期末作业-旅游景区模板(HTML+CSS+JavaScript)

HTML5响应式旅游景区网站模板,自适应分辨率,兼容PC端和移动端,全套模板,包括简介、文化历史、住宿、子州美食、景区公告、联系我们等HTML网站模板页面。

效果演示

HTML期末作业-旅游景区模板6个页面(HTML+CSS+JavaScript)插图

HTML期末作业-旅游景区模板6个页面(HTML+CSS+JavaScript)插图

HTML期末作业-旅游景区模板6个页面(HTML+CSS+JavaScript)插图

HTML期末作业-旅游景区模板6个页面(HTML+CSS+JavaScript)插图

代码实现

<!DOCTYPE HTML>
<html>
<head>
<title>住宿</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Transit Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />  
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.1.min.js"> </script>    
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".scroll").click(function(event){     
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
        });
    });
</script>       
</head>
<body>
    <!-- banner -->
    <div class="banner a-banner">
        <!-- container -->
        <div class="container">
            <div class="header">
                <div class="logo">
                    <a href="index.html">榆林子州</a>
                </div>
                <div class="icons">
                    <ul>
                        <li><a href="#" class="facebook"> </a></li>
                        <li><a href="#" class="facebook twitter"> </a></li>
                        <li><a href="#" class="facebook chrome"> </a></li>
                        <li><a href="#" class="facebook dribbble"> </a></li>
                    </ul>
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="top-nav">
                    <span class="menu">菜单</span>
                    <ul class="nav1">
                        <li><a href="index.html">子州简介</a></li>
                        <li><a href="history.html" >文化历史</a></li>
                        <li><a href="accomdation.html" class="active">住宿</a></li>
                        <li><a href="food.html">子州美食</a></li>
                        <li><a href="tell.html">景区公告</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                    <!-- script-for-menu -->
                        <script>
                             $( "span.menu" ).click(function() {
                            $( "ul.nav1" ).slideToggle( 300, function() {
                            // Animation complete.
                                });
                                });
                        </script>
                    <!-- /script-for-menu -->
            </div>
        </div>
        <!-- //container -->
    </div>  
    <!-- //banner -->
    <!-- about -->
    <!-- about-top -->
    <div class="about-top">
        <!-- container -->
        <div class="container">
            <div class="about-info">
                <h3>子州民宿</h3>
                <p>子州民宿沿西栅市河蜿蜒而布,由乌镇具有百年历史的民居改建而成。</p>
            </div>
            <div class="about-top-grids">
                <div class="col-md-8 about-top-grid">
                    <h4>子州民宿位于西栅景区西市河南北两岸,或面水或临街</h4>
                    <p>规模:&nbsp;490间(套)的客房形式多样,总共房型72种,每间客房都配有现代化的生活设施,统一规范经营,房东亲情服务,在古老的砖木瓦房中尽享现代生活的安逸<br/>房型:&nbsp;标准双人房、大床房、三人间、家庭房、自助房<br/>设施:&nbsp;内部配套设施:独立卫浴、分体式空调、24小时热水、卫浴用品、电话、直饮水、保险箱、磁卡门锁、数字电视、Wifi网络、免费瓶装水;<br/>价位:¥320/间&nbsp;</p>
                </div>
                <div class="col-md-4 about-top-grid">
                    <img src="images/su1.PNG"   alt="" />
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <!-- //container -->
    </div>
    <!-- //about-top -->
    <!-- about-team -->
    <div class="about-team">
            <!-- container -->
            <div class="container">
                <h4>精品酒店</h4>
                <div class="team-grids">
                    <div class="col-md-3 team-grid">
                        <img src="images/su2.PNG" alt="">
                        <h6>宜园精品酒店</h6>
                        <p>高级标间、园林大床、高级大床、豪华大床、双人浪漫套房、行政套房、双人浪漫豪华套房</p>
                    </div>
                    <div class="col-md-3 team-grid">
                        <img src="images/su3.PNG" alt="">
                        <h6>锦堂行馆</h6>
                        <p>高级大床房、豪华大床房、豪华套房、中央套房</p>
                    </div>
                    <div class="col-md-3 team-grid">
                        <img src="images/su4.PNG" alt="">
                        <h6>望津里精品酒店</h6>
                        <p>高级标间、大床房、浪漫双人套房</p>
                    </div>
                    <div class="col-md-3 team-grid">
                        <img src="images/su5.PNG" alt="">
                        <h6>枕水度假酒店</h6>
                        <p>标准间、大床房、套房、民宿二房套A、民宿二房套B、民宿三房套A、民宿标间、民宿四房套、民宿大床、总统套房、司陪标间</p>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
            <!-- //container -->
    </div>
    <!-- //about-team -->
    <!-- footer -->
    <div class="footer">
        <!-- container -->
        <div class="container">
            <div class="col-md-6 footer-left">
                <h3>联系我们</h3>
                <form>
                    <input type="text" placeholder="电子邮件,[email protected]" required="">
                    <input type="submit" value="提交">
                </form>
            </div>
            <div class="col-md-3 footer-middle">
                <h3>地址</h3>
                <div class="address">
                    <p>陕北黄土高原丘陵沟壑区腹地
                        <span>榆林市南缘</span>
                    </p>
                </div>
                <div class="phone">
                    <p>0573-88731088</p>
                </div>
            </div>   
            <div class="col-md-3 footer-right">
                <div class="f-logo">
                    <a href="index.html">榆林子州</a>
                </div>
                <p>陕北黄土高原丘陵沟壑区腹地,榆林市南缘</p>
            </div>
            <div class="clearfix"> </div>   
        </div>
        <!-- //container -->
    </div>
    <!-- //footer -->
    <!-- copyright -->
    <div class="copyright">
        <!-- container -->
        <div class="container">
            <div class="copyright-left">

            </div>
        </div>
        <!-- //container -->
    </div>
    <!-- copyright -->
</body>
</html>

HTML期末作业-旅游景区模板6个页面(HTML+CSS+JavaScript)插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序