HTML实验：金色时光度假村_html度假村案例-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84152928/article/details/138737733

HTML代码：


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>金色时光度假村</title>

    <link rel="stylesheet" href="Golden Time Resort.css">

</head>

<body>

    <div id="entirety">

        <div id="header">

            

            <ul>

                <li class="you"><a href="#">公司新闻</a></li>

                <li><a href="#">企业介绍</a></li>

                <li class="zuo"><a href="#">首页</a></li>

            </ul>

            <p class="bigword">金色时光度假村</p>

        </div>

       <div id="content">

            <div id="left">

                <ul>

                    <br>

                    <li class="menu1"><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>

                    <li><a href="">联系我们</a></li>

                </ul>

                <div id="contact">

                    <div class="word">

                        <br>

                        <p>快速联系我们</p>

                        <p>Tel:000-000000</p>

                        <p>Fax:000-000000</p>

                        <p>Email:webmaster@xxxxx.com</p>

                    </div>

                </div>

            </div>

            

            <div id="right">

                <div id="right_h1">

                    <h1>公司介绍</h1>

                    <p>度假村占地300亩,拥有30余个风格、功能各异、极富养生特色的温泉浴池;度假酒店拥有8类豪华客房210余间,多功能会展中心、不同风味的餐厅、商务中心、购物商场、美容美发中心、康体楼等配套设施。先后荣获中国最佳温泉酒店、国家AAAA级景区,世界珍惜温泉、空姐集训基地和香港小姐培训基地等美誉。森林海,养生泉,期待您光临!</p>

                </div>

                <div id="right_h2">

                    <div class="top">

                        <p>图片展示</p>

                    </div>

                    <img src="./images/templatemo_photo1.jpg" alt="">

                    <img src="./images/templatemo_photo2.jpg" alt="">

                    <img src="./images/templatemo_photo3.jpg" alt="">

                    <div class="bottom">

                        <p>新闻动态</p>

                    </div>

                    <div id="dongtai">

                    <p class="dongtai">该酒店最大的特色就是服务好</p>

                    <p class="dongtai">热情有礼,细致入微</p>

                    <p class="dongtai">《亲情服务五字经》节选</p>

                    <p class="dongtai">对碧水湾的特别热爱是无比正确</p>

                    <p class="dongtai">花茶加果汁 降火暖人心</p>

                    <p class="dongtai">山水美,温泉美,人心更美</p>

                    </div>

                </div> 

                <div id="seach"></div>

                    <div id="form">

                        <form action="">

                            <input type="radio" name="a">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <input type="radio" name="a">女

                            <br>姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" >

                            <br>电话&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" >

                            <br>入住日期&nbsp;&nbsp;<input type="date" min="2021-12-12" max="2021-12-31">

                            <br>离开日期&nbsp;&nbsp;<input type="date" min="2021-12-12" max="2021-12-31">

                            <br><input id="bb" type="image" src="./images/templatemo_search_button.jpg" alt="">

                        </form>

                    

                </div> 

            </div> 

            

                <img src="./images/templatemo_footer.jpg" alt="">

            <div id="footer">

                <p>Copyright 金色时光度假村</p>

            </div>

        </div>

        

    </div>

    

</body>

CSS代码：


 body{

    font-size: 12px;

    margin: 0;

    padding: 0;

    background-image: url(./images/templatemo_body_bg.jpg);

}



#entirety{

    padding-top: -150px;

    width:877px;

    height: 720px;

    margin: 0 auto;

}



#header{

    height: 283px;

    background-image: url(./images/templatemo_header.jpg);

}

.bigword{

    margin: 0px;

    color: yellow;

    font-size: 300%;

    font-family: 宋体;

    padding-top: 135px;

    padding-left: 40px;

}

#header ul{

    

    margin-right: 30px;



}

#header li{

    font-weight: 700;

    margin-top: 220px;

    padding: 20px;

    padding-top: 0;

    padding-bottom: 15px;

    float: right;

    list-style: none;

    color: yellow;

    border: 1px solid white;

    border-top: none;

    height: 3px;

}

#header .you{

    border-right: none;

}

#header .zuo{

    border-left: none;

}

#header a{

    text-decoration: none;

    color: yellow;

}

#content{

    width: 877px;

    /* margin-top:-16px; */

    height: 385px;

    background-image: url(./images/templatemo_content_bg.jpg);

}

#left{

    

    float: left;

    width: 163px;

}



#left li{

    

    margin-left: -40px;

    list-style: none;

    height: 36px;

    background-image: url(./images/templatemo_menu_bg.jpg);

}

#left a{

    font-weight: 700;

    /* padding-top: 30px; */

    padding-left: 35px;

    color: yellow;

    text-decoration: none;

}

#contact{

    margin-top: -14px;

    width: 229px;

    height: 101px;

    background-image: url(./images/templatemo_contact.jpg);

}
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/5ec9eb010bfde2d59729574c79a22737.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/15637bf2efaf3ef4056b026b51c4124a.png)

![](https://img-blog.csdnimg.cn/img_convert/16041525237a42366c9f0acb7e93c3d8.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.youkuaiyun.com/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
5453749696)]

[外链图片转存中...(img-5PEsull7-1715453749697)]

[外链图片转存中...(img-ZYQclaKz-1715453749697)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.youkuaiyun.com/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**