效果图：
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:[email protected]</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">男
<input type="radio" name="a">女
<br>姓名 <input type="text" >
<br>电话 <input type="text" >
<br>入住日期 <input type="date" min="2021-12-12" max="2021-12-31">
<br>离开日期 <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);
}
.word{
color: white;
font-size: 12px;
margin-left: 25px;
/* padding-top: 20px; */
line-height: 7px;
padding: 0;
}
#right{
float:left;
width:614px ;
height: 100px;
margin-left: 60px;
}
#right_h1{
height: 150px;
margin-left: 35px;
margin-top: -10px;
background-image: url(./images/templatemo_h1.jpg) ;
background-repeat: no-repeat;
}
#right_h1 h1{
padding: 25px 0 0 70px;
color: rgb(160, 71, 12);
}
#right_h1 p{
text-indent: 2em;
padding-bottom: 4px;
border-bottom: dotted rgb(126, 51, 1);
}
#right_h2{
float: left;
width: 270px;
margin-left: 35px;
margin-top: -10px;
border-right: dotted rgb(126, 51, 1);
}
.top ,.bottom{
padding-left: 10px;
color: white;
width:250px;
background-image: url(./images/templatemo_h2.jpg);
}
.top p{
margin-bottom: 0px;
}
.bottom{
margin-top: -10px;
}
#dongtai{
margin-top: -10px;
}
.dongtai{
margin: 0;
/* margin-top: -15px; */
}
#seach{
float: left;
width: 262px;
height: 76px;
background-image: url(./images/templatemo_search.jpg);
}
#form{
float: left;
width: 262px;
height: 100px;
background-image: url(./images/templatemo_form-bg.jpg);
}
#bb{
padding-top: 5px;
padding-left: 60px;
}
#footer{
float: left;
text-align: center;
margin-top: -15px;
width: 877px;
height: 46px;
background-image: url(./images/templatemo_footer_bg.jpg);
}
#footer p{
margin-top: 5px;
padding-top: 15px;
color: white;
}