个人设计web前端大作业~ 酒店网页设计(HTML5+CSS3+Bootstrap)

本文链接：https://blog.csdn.net/ruan365392777/article/details/118486244

个人设计web前端大作业~ 酒店网页设计(HTML5+CSS3+Bootstrap)瑞豪国际酒店

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

文章目录

个人设计web前端大作业~ 酒店网页设计(HTML5+CSS3+Bootstrap)瑞豪国际酒店
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业作品文章
七、更多表白源码

一、作品演示

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现


<header>
      <div class="container clearfix">
        <div class="row ">
          <div class="span12">
            <!-- Logo -->
            <h1 class="brand brand_"><a href="index.html"><img src="img/logo.png" alt=""></a></h1>
            <!-- Navigation -->
            <div class="navbar navbar_">
              <div class="container">
                <!--=========== menu ===============-->
                <div class="nav-collapse nav-collapse_ collapse">
                  <ul class="nav sf-menu">
                    <li class="active sub-menu"><a href="index.html">首　页</a></li>
                    <li class="sub-menu"><a href="#">酒店简介</a>
                      <ul>
                        <li><a href="#">酒店概况</a></li>
                        <li><a href="#">总经理致辞</a></li>
                        <li><a href="#">瑞豪家园</a></li>
                        <li><a href="#">酒店要闻</a></li>
                        <li><a href="#">全景浏览</a></li>
                        <li><a href="#">地理位置</a></li>
                      </ul>
                    </li>
                    <li class="sub-menu"><a href="#">客房设施</a>
                          <ul>
                            <li><a href="#">客房介绍</a></li>
                            <li><a href="#">客房类型</a></li>
                            <li><a href="#">我要预订</a></li>
                          </ul>
                    </li>
                    <li class="sub-menu"><a href="#">服务项目</a>
                      <ul>
                        <li><a href="#">餐饮服务</a>
                        	<ul>
                            <li><a href="#">瑞景园</a></li>
                            <li><a href="#">食神锅奉行</a></li>
                            <li><a href="#">阿拉丁餐厅</a></li>
                            <li><a href="#">威尼斯西餐厅</a></li>
                            
                          </ul>
                        </li>
                        <li><a href="#">宴会服务</a></li>
                        <li><a href="#">婚宴服务</a></li>
                                             </ul>
                    </li>
                    <li class="sub-menu"><a href="#">娱乐会所</a>
                      <ul>
                        <li><a href="#">罗兰大堂吧</a></li>
                        <li><a href="#">国际会员俱乐部</a></li>
                        <li><a href="#">棋牌室</a></li>
                        <li><a href="#">健身房</a></li>
                        <li><a href="#">KTV</a></li>
                        <li><a href="#">桑拿中心</a></li>
                      </ul>
                    </li>
                    <li><a href="contact.html">联系我们 </a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
        <div class="fullwidthbanner-container">
    <div class="shadowdrop"></div>
    <div class="fullwidthabnner">
      <ul>
        <!-- THE 1 SLIDE -->
        <li data-transition="slidehorizontal" data-slotamount="7" data-masterspeed="300" data-delay="9500" > <img src="img/rs-slider/slides/bg/1.jpg" >
          <div class="tp-caption lfb"  
					 data-x="0" 
					 data-y="22" 
					 data-speed="1000" 
					 data-start="500" 
					 data-easing="easeInOutElastic"  ><img src="img/rs-slider/slides/lap.png" alt="Image 1"></div>
          
          <div class="tp-caption medium_whitebg sfb"  
					 data-x="125" 
					 data-y="252" 
					 data-speed="1000" 
					 data-start="1000" 
					 data-easing="easeInExpo"  >西部首家五星级主题酒店！</div>
          <div class="tp-caption medium_whitebg sft"  
					 data-x="610" 
					 data-y="100" 
					 data-speed="500" 
					 data-start="2000" 
					 data-easing="easeOutExpo"  >意大利风情</div>
          <div class="tp-caption big_colorbg sfr"  
					 data-x="610" 
					 data-y="139" 
					 data-speed="500" 
					 data-start="2500" 
					 data-easing="easeOutExpo"  >双塔建筑结构 浓郁欧式风情</div>
          <div class="tp-caption medium_whitebg sft"  
					 data-x="610" 
					 data-y="215" 
					 data-speed="500" 
					 data-start="3000" 
					 data-easing="easeOutExpo"  >罗马文化主题</div>
          <div class="tp-caption big_colorbg sfr"  
					 data-x="610" 
					 data-y="255" 
					 data-speed="500" 
					 data-start="3500" 
					 data-easing="easeOutExpo"  >我们是为绅士和淑女服务的快乐天使</div>
        </li>
        <!-- THE 2 SLIDE -->
        <li data-transition="papercut" data-slotamount="10"> <img src="img/rs-slider/slides/bg/2.jpg">
          <div class="caption lft" data-x="-70" data-y="-30" data-speed="900" data-start="900" data-easing="easeOutExpo"><img src="img/rs-slider/slides/glare.png"></div>
          <div class="caption lfl" data-x="-60" data-y="10" data-speed="900" data-start="1300" data-easing="easeOutBack"><img src="img/rs-slider/slides/man4.png"></div>
          <div class="tp-caption customfont_color lfr start"  data-x="470" data-y="47" data-speed="400" data-start="1700" data-easing="easeOutExpo">魏华江</div>
          <div class="tp-caption medium_whitebg sfr start"  data-x="470" data-y="117" data-speed="400" data-start="1900" data-easing="easeOutExpo"><span style="font-weight:normal;">国家级</span><em>旅游饭店星评员！</em></div>
          <div class="caption sfl" data-x="510" data-y="180" data-speed="300" data-start="2600" data-easing="easeOutExpo"><img src="img/rs-slider/slides/check.png"></div>
          <div class="caption lfr small_text"  data-x="560" data-y="190" data-speed="300" data-start="2900" data-easing="easeOutExpo">新疆旅游饭店业协会会长</div>
          <div class="caption sfl" data-x="510" data-y="230" data-speed="300" data-start="2900" data-easing="easeOutExpo"><img src="img/rs-slider/slides/check.png"></div>
          <div class="caption lfr small_text"  data-x="560" data-y="240" data-speed="300" data-start="2600" data-easing="easeOutExpo">新疆瑞豪国际酒店有限责任公司董事长</div>
          <div class="caption sfl" data-x="510" data-y="280" data-speed="300" data-start="3200" data-easing="easeOutExpo"><img src="img/rs-slider/slides/check.png"></div>
          <div class="caption lfr small_text"  data-x="560" data-y="290" data-speed="300" data-start="3200" data-easing="easeOutExpo">瑞豪国际酒店总经理</div>
        </li>
        <!-- THE 3 SLIDE -->
        <li data-transition="fade" data-slotamount="7" data-masterspeed="300" > <img src="img/rs-slider/slides/bg/3.jpg" alt="bgslider-blue" data-fullwidthcentering="true">
          <div class="tp-caption sfl"  
					 data-x="-1" 
					 data-y="30" 
					 data-speed="300" 
					 data-start="700" 
					 data-easing="easeOutBack"  ><img src="img/rs-slider/slides/slideimg1.png" alt="Image 1"></div>
          <div class="tp-caption fade"  
					 data-x="551" 
					 data-y="167" 
					 data-speed="300" 
					 data-start="1100" 
					 data-easing="easeOutBack"  ><img src="img/rs-slider/slides/success.png" alt="Image 2"></div>
          <div class="tp-caption sfr"  
					 data-x="495" 
					 data-y="120" 
					 data-speed="300" 
					 data-start="1300" 
					 data-easing="easeOutBack"  ><img src="img/rs-slider/slides/inclined.png" alt="Image 3"></div>
          <div class="tp-caption bold_red_text sft"  
					 data-x="287" 
					 data-y="110" 
					 data-speed="300" 
					 data-start="1500" 
					 data-easing="easeOutBack"  >客房服务</div>
          <div class="tp-caption bold_red_text sft"  
					 data-x="276" 
					 data-y="182" 
					 data-speed="300" 
					 data-start="1900" 
					 data-easing="easeOutBack"  >餐饮服务</div>
          <div class="tp-caption sfr"  
					 data-x="454" 
					 data-y="189" 
					 data-speed="300" 
					 data-start="1700" 
					 data-easing="easeOutBack"  ><img src="img/rs-slider/slides/horizontal.png" alt="Image 6"></div>
          <div class="tp-caption sfr"  
					 data-x="720" 
					 data-y="240" 
					 data-speed="300" 
					 data-start="2800" 
					 data-easing="easeOutBack"  ><img src="img/rs-slider/slides/rightalign.png" alt="Image 7"></div>
          <div class="tp-caption sfr"  
					 data-x="721" 
					 data-y="115" 
					 data-speed="300" 
					 data-start="4000" 
					 data-easing="easeOutBack"  ><img src="img/rs-slider/slides/rightupperalign.png" alt="Image 8"></div>
          <div class="tp-caption sfr"  
					 data-x="519" 
					 data-y="242" 
					 data-speed="300" 
					 data-start="2200" 
					 data-easing="easeOutBack"  ><img src="img/rs-slider/slides/leftloweralign.png" alt="Image 9"></div>
          <div class="tp-caption bold_red_text sft"  
					 data-x="330" 
					 data-y="268" 
					 data-speed="300" 
					 data-start="2500" 
					 data-easing="easeOutBack"  >宴会服务</div>
          <div class="tp-caption bold_red_text sft"  
					 data-x="767" 
					 data-y="270" 
					 data-speed="300" 
					 data-start="3100" 
					 data-easing="easeOutBack"  >婚宴服务</div>
          <div class="tp-caption bold_red_text sft"  
					 data-x="763" 
					 data-y="102" 
					 data-speed="300" 
					 data-start="4300" 
					 data-easing="easeOutBack"  >娱乐会所</div>
          <div class="tp-caption sft"  
					 data-x="739" 
					 data-y="185" 
					 data-speed="300" 
					 data-start="3400" 
					 data-easing="easeOutBack"  ><img src="img/rs-slider/slides/horizontal2.png" alt="Image 13"></div>
          <div class="tp-caption bold_red_text sft"  
					 data-x="841" 
					 data-y="179" 
					 data-speed="300" 
					 data-start="3700" 
					 data-easing="easeOutBack"  >罗兰大堂吧</div>
        </li>
        <!-- THE 4 SLIDE -->
        <li data-transition="fade" data-slotamount="7" data-masterspeed="300" > <img src="img/rs-slider/slides/bg/4.jpg" alt="bgslider-blue2" data-fullwidthcentering="true">
          <div class="tp-caption sfl"  
					 data-x="27" 
					 data-y="17" 
					 data-speed="300" 
					 data-start="500" 
					 data-easing="easeOutExpo"  ><img src="img/rs-slider/slides/girl2.png" alt="Image 2"></div>
          <div class="tp-caption big_colorbg sfr"  
					 data-x="437" 
					 data-y="97" 
					 data-speed="300" 
					 data-start="800" 
					 data-easing="easeOutExpo"  >网上在线预订</div>
          <div class="tp-caption medium_whitebg sfr"  
					 data-x="438" 
					 data-y="141" 
					 data-speed="300" 
					 data-start="1100" 
					 data-easing="easeOutExpo"  >网上预订方便快捷 <a href="#">马上预订</a></div>
          <div class="tp-caption sfb"  
					 data-x="441" 
					 data-y="210" 
					 data-speed="900" 
					 data-start="1400" 
					 data-easing="easeOutElastic"  ><img src="img/rs-slider/slides/futon_bed.png" alt="Image 5"></div>
          <div class="tp-caption sfb"  
					 data-x="610" 
					 data-y="210" 
					 data-speed="900" 
					 data-start="1700" 
					 data-easing="easeOutElastic"  ><img src="img/rs-slider/slides/food.png" alt="Image 6"></div>
          <div class="tp-caption sfb"  
					 data-x="774" 
					 data-y="206" 
					 data-speed="900" 
					 data-start="2000" 
					 data-easing="easeOutElastic"  ><img src="img/rs-slider/slides/mazda.png" alt="Image 7"></div>
        </li>
        <!-- THE 5 SLIDE -->
        <li data-transition="papercut" data-slotamount="7" data-masterspeed="300" > <img src="img/rs-slider/slides/bg/5.jpg" alt="bgslider-blue" data-fullwidthcentering="true">
          <div class="tp-caption sfb"  
					 data-x="58" 
					 data-y="85" 
					 data-speed="900" 
					 data-start="500" 
					 data-easing="easeInOutElastic"  ><img src="img/rs-slider/slides/orange.png" alt="Image 1"></div>
          <div class="tp-caption sfb"  
					 data-x="272" 
					 data-y="196" 
					 data-speed="1900" 
					 data-start="800" 
					 data-easing="easeInOutElastic"  ><img src="img/rs-slider/slides/blue.png" alt="Image 3"></div>
          <div class="tp-caption sfb"  
					 data-x="116" 
					 data-y="211" 
					 data-speed="300" 
					 data-start="1100" 
					 data-easing="easeInOutElastic"  ><img src="img/rs-slider/slides/green.png" alt="Image 2"></div>
          <div class="tp-caption sft"  
					 data-x="242" 
					 data-y="14" 
					 data-speed="300" 
					 data-start="1400" 
					 data-easing="easeInExpo"  ><img src="img/rs-slider/slides/tooltip-60.png" alt="Image 4"></div>
          <div class="tp-caption lft"  
					 data-x="251" 
					 data-y="164" 
					 data-speed="600" 
					 data-start="1700" 
					 data-easing="easeInBounce"  ><img src="img/rs-slider/slides/tooltip-30.png" alt="Image 5"></div>
          <div class="tp-caption lft"  
					 data-x="407" 
					 data-y="142" 
					 data-speed="600" 
					 data-start="2000" 
					 data-easing="easeInBounce"  ><img src="img/rs-slider/slides/tooltip-10.png" alt="Image 6"></div>
          <div class="tp-caption customfont_color lfr"  
					 data-x="516" 
					 data-y="56" 
					 data-speed="300" 
					 data-start="2300" 
					 data-easing="easeOutExpo"  >LEADERS</div>
          <div class="tp-caption medium_whitebg lfr"  
					 data-x="517" 
					 data-y="128" 
					 data-speed="300" 
					 data-start="2600" 
					 data-easing="easeOutExpo"  >乌鲁木齐国际酒店的领导者</div>
          <div class="tp-caption medium_text_brightgrey sfr"  
					 data-x="519" 
					 data-y="186" 
					 data-speed="300" 
					 data-start="2900" 
					 data-easing="easeOutExpo"  >新疆瑞豪国际酒店是由乌鲁木齐铁路局投资打造的一座具有国际五星级标准的酒店，<br/>
                     也是国内首家以意大利风情导入罗马文化的主题酒店。</div>
          <div class="tp-caption medium_text_brightgrey lfr"  
					 data-x="526" 
					 data-y="262" 
					 data-speed="300" 
					 data-start="3200" 
					 data-easing="easeInElastic"  ><a href="#" class="btn btn-large btn-success"><i class="icon-star icon-white"></i> 进入瑞豪人才库</a></div>
        </li>
        <!-- THE 6 SLIDE -->
        <li data-transition="fade" data-slotamount="7" data-masterspeed="300" > <img src="img/rs-slider/slides/bg/6.jpg" alt="bgslider-blue2" data-fullwidthcentering="true">
          <div class="tp-caption sfb"  
					 data-x="0" 
					 data-y="65" 
					 data-speed="1300" 
					 data-start="500" 
					 data-easing="easeOutExpo"  >
            <img src="img/rs-slider/slides/night.jpg" alt="瑞豪酒店">
          </div>
          <div class="tp-caption big_colorbg sfr"  
					 data-x="537" 
					 data-y="97" 
					 data-speed="300" 
					 data-start="800" 
					 data-easing="easeOutExpo"  >国际酒店会员俱乐部</div>
          <div class="tp-caption medium_whitebg sfr"  
					 data-x="538" 
					 data-y="141" 
					 data-speed="300" 
					 data-start="1100" 
					 data-easing="easeOutExpo"  >购卡咨询电话0991-7810060</div>
          <div class="tp-caption sfb"  
					 data-x="541" 
					 data-y="210" 
					 data-speed="900" 
					 data-start="1400" 
					 data-easing="easeOutElastic"  ><img src="img/rs-slider/slides/vip.jpg" alt="Image 5"></div>
                 </li>
      </ul>
      <div class="tp-bannertimer"></div>
    </div>
  </div>
    </header>