网页设计期末作业使用HTML+CSS+JS静态页面项目

Hello,小伙伴们这是博主写的期末网页作业是一个酒店的官网这里使用了bootstrap组件，一共是6个页面，供小伙伴们参考（图片来源于网络，如有侵权，请给我联系删除）。这是我截取网站首页部分图片：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>网站首页&

小小怪砸

8231人浏览 · 2021-12-25 16:15:46

小小怪砸 · 2021-12-25 16:15:46 发布

Hello,小伙伴们这是博主写的期末网页作业是一个酒店的官网这里使用了bootstrap组件，一共是6个页面，供小伙伴们参考（图片来源于网络，如有侵权，请给我联系删除）。

这是我截取网站首页部分图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <script src="js/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div>
    <div class="ddiv">
        <li class="ali"><img src="image/忆梦logo.png" class="size"></li>
        <div class="dddiv">
            <ul class="nav nav-pills size_1">
                <li role="presentation" class="active"><a href="#">网站首页</a></li>
                <li role="presentation"><a href="Hotel_room.html">酒店房间</a></li>
                <li role="presentation"><a href="Hotel_Catering.html">酒店餐饮</a></li>
                <li role="presentation"><a href="About_us.html">关于我们</a></li>
                <li role="presentation"><a href="Login_register.html">登录/注册</a></li>
            </ul>
        </div>
    </div>
    <div>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="image/1.jpg" alt="...">
                    <div class="carousel-caption">
                        它以浓烈的伊斯兰风格，极尽奢华的装饰，高科技手段，及最新建筑材料的完美结合，成为当今世界最著名的建筑之一！
                    </div>
                </div>
                <div class="item">
                    <img src="image/2.jpg" alt="...">
                    <div class="carousel-caption">
                        酒店内的“天井式”设计，让人从大堂可仰望一层层往上走的弧形状楼层，配以巧妙的由蓝色，绿色，到黄色的色彩渐变，象征从深海到天空的转换。楼梯式喷水池也很精巧，喷出的水柱远看像一个个银环。
                    </div>
                </div>
                <div class="item">
                    <img src="image/3.jpg" alt="...">
                    <div class="carousel-caption">
                        帆船酒店这个皇冠上明珠，无疑是雄霸25楼的皇家套房。酒店共有两个皇家套房，一左一右。面积各达780平方米！其内部装饰登峰造极，完全按皇宫气派设计，顶级装修，典雅辉煌，摆放着来自世界各地的装饰艺术品。
                    </div>
                </div>
                <div class="item">
                <img src="image/4.jpg" alt="...">
                <div class="carousel-caption">
                    空中餐厅 Al Muntaha 在阿拉伯语中是‘终极’的意思。从外面看，它像一片平板插在帆船的顶部，非常特别。从里面看，它有一长条大玻璃窗，使坐在这里用餐的客人们都能饱览壮丽的海边景观
                </div>
            </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
     <div class="second_div hotel">
         <div>
             <ul>
         <li><span class="glyphicon glyphicon-film color1"></span></li>
         <li><span><a href="#">酒店观影</a></span></li>
             </ul>
         </div>
         <div>
             <ul>
                 <li><span class="glyphicon glyphicon-th color2"></span></li>
                 <li><span><a href="#">酒店布局</a></span></li>
             </ul>
         </div>
         <div>
             <ul>
                 <li><span class="glyphicon glyphicon-camera color3"></span></li>
                 <li><span><a href="#">酒店摄影</a></span></li>
             </ul>

         </div>
         <div>
             <ul>
                 <li><span class="glyphicon glyphicon-map-marker color4"></span></li>
                 <li><span><a href="#">酒店位置</a></span></li>
             </ul>

         </div>
     </div>
    <div class="second_div">
        <div class="pic">
            <div>
                <h3>忆梦酒店，伴你入梦</h3>
                <p>
                    忆梦酒店集团(Recalling dreams Hotels Corporation)总部位于深圳，是一家知名的酒店集团，
                    在行业中品牌优越，秉承殷勤款客的传统，致力于为客人提供宾至如归的服务。忆梦集团50多年的传统历史，
                    都贯彻以客为先的服务精神。数以万计的员工以热诚亲切的服务，每天为宾客增添一份超越平凡的生活姿彩。
                    除了提供完善的食宿外，还设有咖啡室、会议室、宴会厅、游泳池、购物中心、银行、花店、服装店等一套完整的服务机构和设施。客房分为单人房、双人房、套房和豪华套房。
                    餐厅也有高级餐厅和方便的快餐厅。所有的房间都有空调设备、室内设备、
                    液晶电视，调节灯光、三层窗帘，无极室内空调温度和风速设置等应有尽有，使到忆梦酒店寄宿的客人真正有一种“宾至如归”的感觉。</p>
            </div>
        </div>
        <div class="pac">
            <img src="image/home.jpg" alt="...">
        </div>
    </div>
    <div class="footer_div">
    <table class="tab">
        <tr>
            <td></td>
            <td><a href="#">品牌形象</a></td>
            <td><a href="#">酒店加盟</a></td>
            <td><a href="#">员工信息</a></td>
            <td><a href="#">疫情防控</a></td>
            <td id="ta"> 酒店加盟热线：100-279-999</td>
        </tr>
    </table>
    <p class="footer_p">
    <p/>
    </div>
</div>
</body>
</html>

如果有同学需要博主源码的私信我，同时如果有同学希望让博主帮写一些期末作业页面的私信我。