效果图，图片自己换，
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>泰国</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="box">
<div class="titles">泰国</div>
<div class="img-box">
<img class="auto-img" src="images/a001.jpg"/>
</div>
<div class="text-box">
<div class="text-box-a">
<a href="#">曼谷、芭提雅(珊瑚岛、金沙岛)5晚7天</a>
</div>
<div class="text-box-a">
东航直飞曼谷客机，入住1晚曼谷国际5星+4晚泰式5星酒店,芭提雅双岛(珊瑚岛+金沙岛)清...
</div>
<div class="text-box-a">
出发日期：星期一,星期二,星期三,星期四,星期五
</div>
</div>
<div class="bottom ovf">
<div class="fl text-a1">
班期：每周发团
</div>
<div class="fr">
<div class="price">￥ 4549</div>
<div class="rush-to-buy">立即抢购</div>
</div>
</div>
</div>
</body>
</html>
css样式：
html,body{
padding:0
margin:20px 0 0
}
a{
text-decoration:none
}
.fl{
float:left
}
.fr{
float:right
}
.ovf{
overflow: hidden
}
.box{
width:50%
margin:0 auto
border:1px dashed #000000
padding:4px
}
.titles{
width:100%
text-align: center
color:#ffffff
background-color: #ff0000
}
.img-box{
width:100%
margin-top: 4px
}
.auto-img{
display: block
width:100%
}
.text-box{
width:100%
}
.text-box-a{
width:100%
font-size: 14px
line-height: 20px
letter-spacing: 1px
}
.text-box-a>a{
color:#0089ff
}
.bottom{
margin-top: 30px
}
.text-a1{
font-size: 18px
font-style: italic
font-style:oblique/*为保证斜体效果加一个*/
}
.price{
font-size: 16px
color:#8B3E2F
}
.rush-to-buy{
width:80px
text-align: center
background-color: #ff0000
font-size: 16px
}
您好，这个需要搭配数据库进行 *** 作（数据库按照房间号-价格已经设计好了的），实现原理大致为：客户点击某个房间的时候，ajax自动向后端API接口请求这个房间的价格将其返回到前端并显示出来。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>新疆行知书</title>
<link href="20.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner"><img src="banner.jpg"></div>
<div id="globallink">
<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>
<br>
</div>
<div id="left">
<div id="weather">
<h3><span>天气查询</span></h3>
<ul>
<li>乌鲁木齐 雷阵雨 20℃-31℃</li>
<li>吐鲁番 多云转阴 20℃-28℃</li>
<li>喀什 阵雨转多云 25℃-32℃</li>
<li>库尔勒 阵雨转阴 21℃-28℃</li>
<li>克拉马依 雷阵雨 26℃-30℃</li>
</ul>
<br>
</div>
<div id="today">
<h3><span>今日推荐</span></h3>
<ul>
<li><a href="#"><img src="tuijian1.jpg"></a></li>
<li><a href="#">喀纳斯河</a></li>
<li><a href="#"><img src="tuijian2.jpg"></a></li>
<li><a href="#">布尔津</a></li>
<li><a href="#"><img src="tuijian3.jpg"></a></li>
<li><a href="#">天山之路</a></li>
</ul>
<br>
</div>
</div>
<div id="middle">
<div id="ghost"><a href="#" title="魔鬼城探秘"><img src="ghost.jpg" border="0"></a></div>
<div id="beauty">
<h3><span>美景寻踪</span></h3>
<ul>
<li><a href="#"><img src="beauty1.jpg"></a></li>
<li><a href="#"><img src="beauty2.jpg"></a></li>
<li><a href="#"><img src="beauty3.jpg"></a></li>
<li><a href="#"><img src="beauty4.jpg"></a></li>
</ul>
<br>
</div>
<div id="route">
<h3><span>线路精选</span></h3>
<ul>
<li><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
<li><a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a></li>
<li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
<li><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
</ul>
<br>
</div>
</div>
<div id="right">
<div id="map">
<h3><span>新疆风光</span></h3>
<p><a href="#" title="点击看大图"><img src="map1.jpg"></a></p>
<p><a href="#" title="点击看大图"><img src="map2.jpg"></a></p>
</div>
<div id="food">
<h3><span>小吃推荐</span></h3>
<ul>
<li><a href="#">17号抓饭</a></li>
<li><a href="#">大盘鸡</a></li>
<li><a href="#">五一夜市</a></li>
<li><a href="#">水果</a></li>
</ul>
<br>
</div>
<div id="life">
<h3><span>宾馆酒店</span></h3>
<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>
</ul>
<br>
</div>
</div>
<div id="footer">
<p>艾萨克 ©版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>
</div>
</div>
</body>
</html>
css为：
body{
background-color:#2286c6
margin: 0px
padding:0px
text-align:center
font-size:12px
font-family:Arial, Helvetica, sans-serif
}
#container{
position:relative
margin:0px auto 0px auto
width:780px
text-align:left
}
div br{
display:none
}
#globallink{
margin:0pxpadding:0px
}
#globallink ul{
list-style:none
padding:0pxmargin:0px
}
#globallink li{
float:left
text-align:center
width:78px
}
#globallink a{
display:block
padding:9px 6px 11px 6px
background:url(button1.jpg) no-repeat
margin:0px
}
#globallink a:link, #globallink a:visited{
color:#004a87
text-decoration:underline
}
#globallink a:hover{
color:#FFFFFF
text-decoration:underline
background:url(button1_bg.jpg) no-repeat
}
#left{
float:left
width:200px
background-color:#FFFFFF
margin:0px
padding:0px 0px 5px 0px
color:#d8ecff
}
#left div{
background-color:#5ea6eb
margin:0px 5px 0px 5px
}
#weather{
background:url(weather.jpg) no-repeat -5px 0px
margin:0px 5px 0px 5px
background-color:#5ea6eb
}
div#left #weather h3{
font-size:12px
padding:24px 0px 0px 74px
color:#FFFFFF
background:none
margin:0px
}
div#weather ul{
margin:8px 5px 0px 5px
padding:10px 0px 8px 5px
list-style:none
}
#weather ul li{
background:url(icon1.gif) no-repeat 0px 6px
padding:1px 0px 0px 10px
}
#left div h3{
font-size:12px
padding:4px 0px 2px 15px
color:#003973
margin:0px 0px 5px 0px
background:#bbddff url(icon2.gif) no-repeat 5px 7px
}
#today{
padding:0px 0px 10px 0px
}
#today ul{
list-style:none
margin:-5px 0px 0px 0px
padding:0px
}
#today ul li{
text-align:center
}
#today ul li img{
border:1px solid #FFFFFF
margin:8px 0px 0px 0px
}
#today ul li a:link, #today ul li a:visited{
color:#d8ecff
text-decoration:none
}
#today ul li a:hover{
color:#FFFF00
text-decoration:underline
}
#middle{
background-color:#FFFFFF
margin:0px 0px 0px 2px
padding:5px 0px 0px 0px
width:400pxfloat:left
}
#middle div{
margin-left:5px
margin-right:5px
position:relative
}
#middle h3{
margin:0pxpadding:0px
height:41px
}
#middle h3 span{
display:none /* 文字去掉，换成图片 */
}
#beauty{
margin:15px 0px 0px 0px
padding:0px
}
#beauty h3{
background:url(picture_h1.gif) no-repeat
}
#beauty ul, #route ul{
list-style:none
margin:8px 1px 0px 1px
padding:0px
}
#beauty ul li{
float:left
width:97px
text-align:center
}
#beauty ul li img{
border:1px solid #4ab0ff
}
#route{
clear:bothmargin:0px
padding:5px 0px 15px 0px
}
#route h3{
background:url(route_h1.gif) no-repeat
}
#route ul li{
padding:3px 0px 0px 30px
background:url(icon1.gif) no-repeat 20px 7px
}
#route ul li a:link, #route ul li a:visited{
color:#004e8a
text-decoration:none
}
#route ul li a:hover{
color:#000000
text-decoration:underline
}
#right{
float:left
margin:0px 0px 1px 2px
width:176px
background-color:#FFFFFF
color:#d8ecff
}
#right div{
position:relative
margin-left:5px
margin-right:5px
background-color:#5ea6eb
}
#right div h3{
font-size:12px
padding:4px 0px 2px 15px
color:#003973
margin:0px 0px 5px 0px
background:#bbddff url(icon2.gif) no-repeat 5px 7px
}
#map{
margin-top:5px
}
#map p{
text-align:center
margin:0px
padding:2px 0px 5px 0px
}
#map p img{
border:1px solid #FFFFFF
}
#food{
padding-top:10px
}
#food ul, #life ul{
list-style:none
padding:0px 0px 10px 0px
margin:10px 10px 0px 10px
}
#food ul li, #life ul li{
background:url(icon1.gif) no-repeat 3px 9px
padding:3px 0px 3px 12px
border-bottom:1px dashed #EEEEEE
}
#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{
color:#d8ecff
text-decoration:none
}
#food ul li a:hover, #life ul li a:hover{
color:#000000
text-decoration:none
}
#life{
padding-top:10px
padding-bottom:5px
margin-bottom:5px
}
#footer{
background-color:#FFFFFF
margin:1px 0px 0px 0px
clear:both
position:relative
padding:1px 0px 1px 0px
}
#footer p{
text-align:center
padding:0px
margin:4px 5px 4px 5px
background-color:#5ea6eb
}
#footer p a{
color:#FFFFFF
text-decoration:none
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）