额，这只是一个练习，根据课后习题写的，仅供参考 有点丑 哈哈哈
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>旅游网首页</title>
<style type="text/css">
body{
margin:0;
padding:0;
line-height:1.5em;
background:url(picture/012.jpg) repeat-x;
font-size:11px;
font-family:宋体;
overflow-x:hidden;
}
a:alink a:visited a:active a:hover{
color:#621c03;
text-decoration:none;
font-weight:bold;
}
h1{
font-size:18px;
color:#782609;
font-weight:bold;
height:27px;
padding-top:40px;
padding-left:70px;
}
h2{
font-size:13px;
color:#FFFFFF;
font-weight:bold;
background:url(picture/kele.jpg) no-repeat;
height:22px;
padding-top:3px;
padding-left:5px;
}
#temp_main{
width:1358px;
margin:0 auto;
float:left;
}
#temp_top{
background:url(picture/015.jpg) repeat-x;
height:180px;
}
#temp_title{
margin:0;
padding-top:88px;
padding-left:50px;
color:#FFFFFF;
font-size:35px;
font-family:Arial;
font-weight:bold;
}
#temp_left_column{
float:left;
}
.temp_menu{
width:250px;
margin-top:40px;
}
.temp_menu li{
list-style:none;
display:block;//使得a链接对象的显示方式有一段文本改为一个块状对象
height:50px;
background:url(picture/011.jpg) no-repeat;
font-weight:bold;
font-size:14px;
padding-left:70px;
padding-top:9px;
}
.temp_menu a{
color:#FFFFFF;
text-decoration:none;
}
.temp_menu a:hover{
color:#F08661;
}
#temp_contact{
width:180px;
height:180px;
padding-left:37px;
padding-top:45px;
font-family:宋体;
}
#temp_right_column{
float:right;
width:800px;
padding-right:230px;
}
.introduce{
margin:40px;
margin-top:0;
margin-bottom:10px;
text-align:justify;
border-bottom:dotted 1px #782609;
}
#temp_dest{
float:left;
padding:10px 10px 0px 40px;
width:350px;
border-right:dotted 1px #782609;
}
#temp_search{
float:right;
padding:0px 70px 0px 0px;
width:265px;
}
.order_ro{
width:247px;
background:url(picture/040.jpg) no-repeat;
}
caption{
font-size:17px;
font-family:宋体;
font-weight:bold;
}
footer{
position: fixed;
color: #FFF;
bottom: 0;
left: 0;
right: 0;
text-align: center;
height: 20px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="temp_main">
<div id="temp_top">
<div id="temp_title">星星度假村旅游</div>
</div>
<div id="temp_left_column">
<div id="temp_menu_top"></div>
<div class="temp_menu">
<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>
<li><a href="#">出游指南</a></li>
<li><a href="#">网上预订</a></li>
<li><a href="#">行车路线</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div id="temp_contact">
<strong>联系我们</strong></br>
Tel:023-88888888</br>
Fax:002-11111111</br>
Email:[email protected]</br>
</div>
</div>
<div id="temp_right_column">
<div class="introduce">
<h1>公司介绍</h1>
<p>该度假村占地1万多亩，预计总投资2亿多元人民币。其总体规划主题突出绿色旅游和生态保健，结合绿色生态环境和道家“天、地、人三和合”的养生理论，按一年春、夏、秋、冬四季轮回的概念兴建“春晖园、夏晓园、秋实园、冬融园”四大功能景区，各景区配套系列度假及娱乐设施。 各景区已建立的旅游设施主要有：酒店、山庄别墅、茶艺馆、滑草场、旅游池、童趣园、娱乐城、绿岛广场、紫烟瀑布、梅池、银湖庵、网球、羽毛球场、台球馆、玫瑰园、马车驿站、几十处亭台榭阁景点和配套服务设施，还将兴建跑马场、儿童乐园、森林公园、狩猎场等。</br>
</p>
</div>
<div id="temp_dest">
<h2>图片展示</h2>
<p>
<img src="picture/019.jpg" alt="xxx.com" width="110" hight="110">
<img src="picture/022.jpg" alt="xxx.com" width="110" hight="110">
<img src="picture/023.jpg" alt="xxx.com" width="110" hight="110">
</p>
<h2>新闻动态</h2>
<p>风光国际摄影大赛征稿启事</br>
国务院批准"5·19"为"中国旅游日"</br>
旅游大惠民大酬宾活动景区门票优惠表</br>
宾馆大惠民大酬宾优惠政策</br>
</p>
</div>
<div id="temp_search">
<form name="search" id="search" method="post" action="">
<table class="order_ro">
<caption>酒店预订</caption>
<tr>
<td width="64px"><input type="radio" name="sex" value="radio" id="search_0">
<strong>男</strong></td>
<td width="171px"><input type="radio" name="sex" value="radio" id="search_1">
<strong>女</strong></td></tr>
<tr>
<td><strong>姓名</strong></td>
<td><input type="text" ></td></tr></br>
<tr>
<td><strong>电话</strong></td>
<td><input type="text" ></td></tr></br>
<tr>
<td><strong>入住日期</strong></td>
<td><input type="text" value="2018-4-7" size="8" ><td></tr></br>
<tr>
<td><strong>离开日期</strong></td>
<td><input type="text" value="2018-4-9" size="8"></td></tr></br>
<tr>
<td><input type="reset" value="取消"></td>
<td><input type="submit" value="确定"></td>
</tr>
</table>
</form>
</div>
</div>
<footer>Copyright (C) Home_Travlling 2018-2060, All Rights Reserved TCPICP֤04118</footer>
</body>
</html>