学开发 学到期末 发现自己什么都不会了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0px;margin:0px;}
#header{width:100%;height:200px;background:url('jd_top_bg.jpg');}
#header_top{width:760px;height:150px;margin:0px auto;padding-top:50px;}
h1{color:white;}
#star{width:85px;height:50px;background:url('jd_bg_img.png');background-position:-625px -10px;margin-left:10px;margin-top:11px;}
.left{float:left;}
.right{float:right;}
#tel{width:221px;height:42px;background:url('jd_tel.png');}
.btn{cursor:pointer;width:155px;height:47px;background:url('jd_bg_img.png');background-position:-2px -67px;border:0px;color:white;font-size:20px;}
.btn:hover{background-position:-2px -124px;}
#nav{float:left;}
#nav li{width:95px;float:left;list-style-type:none;text-align:center;padding:10px 0px;}
#nav li:hover{background:#482f22;}
#nav a{color:white;text-decoration:none;}
body{background:url('bg.jpg');font-family:微软雅黑,黑体,宋体;}
#main{width:760px;height:1300px;;margin:0px auto;position:relative;left:0px;top:-30px;}
#ad{padding:5px;background:white;}
.small{padding:15px;background:white;border:1px solid #E7E7E7; margin-top:10px;width:345px;height:200px;}
.small h3{padding-bottom:10px;border-bottom:1px dashed #D8D8D5;color:#269BCD;font-size:16px;}
.small h3 a{font-size:12px;color:#269BCD;
text-decoration:none;}
#yuding{list-style-type:none;font-size:12px;}
#yuding li{margin-top:15px;}
.year_select{width:170px;margin:0px 10px;}
.day_select{width:97px;}
.small p{font-size:10px;margin-top:10px;}
#pinglun{width:728px;height:300px;}
</style>
</head>
<body>
<div id="header">
<div id="header_top">
<h1 class="left">花都大酒店</h1>
<div id="star" class="left"></div>
<button class="btn right">立即预订</button>
<div id="tel" class="right"></div>
<ul id="nav">
<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="main">
<div id="ad">
<img src="hotel.jpg" style="width:750px;"/>
</div>
<div class="small left">
<h3>酒店预订</h3>
<ul id="yuding">
<li>
<span>入住日期:</span>
<select class="year_select">
<option>2016年12月</option>
<option>2017年01月</option>
<option>2017年02月</option>
<option>2017年03月</option>
<option>2017年04月</option>
<option>2017年05月</option>
<option>2017年06月</option>
</select>
<select class="day_select">
<option>1号 周一</option>
<option>2号 周二</option>
<option>3号 周三</option>
<option>4号 周四</option>
<option>5号 周五</option>
<option>6号 周六</option>
</select>
</li>
<li>
<span>退房日期:</span>
<select class="year_select">
<option>2016年12月</option>
<option>2017年01月</option>
<option>2017年02月</option>
<option>2017年03月</option>
<option>2017年04月</option>
<option>2017年05月</option>
<option>2017年06月</option>
</select>
<select class="day_select">
<option>1号 周一</option>
<option>2号 周二</option>
<option>3号 周三</option>
<option>4号 周四</option>
<option>5号 周五</option>
<option>6号 周六</option>
<select>
</li>
<li>
<span>房 客:</span>
<select style="width:282px;margin-left:10px;">
<option>1位成人</option>
<option>2位成人</option>
<option>3位成人</option>
<option>4位成人</option>
<option>5位成人</option>
</select>
</li>
<li>
<button class="btn right">立即预订</button>
</li>
</ul>
</div>
<div class="small right">
<h3>酒店介绍
<a href="" class="right">查看全部 >></a>
</h3>
<p>这里是酒店介绍的信息</p>
<p>细腻典雅 时尚尊荣 翰品酒店桃园 全新品牌升级，富丽水晶吊灯点缀挑高七米大厅，更显气派非凡</p>
<p>细腻典雅 时尚尊荣 翰品酒店桃园 全新品牌升级，富丽水晶吊灯点缀挑高七米大厅，更显气派非凡</p>
<p>细腻典雅 时尚尊荣 翰品酒店桃园 全新品牌升级，富丽水晶吊灯点缀挑高七米大厅，更显气派非凡</p>
</div>
<div class="small left">
<h3>酒店交通
<a href="" class="right">查看全部 >></a>
</h3>
<p>这里是酒店交通的信息</p>
<p>细腻典雅 时尚尊荣 翰品酒店桃园 全新品牌升级，富丽水晶吊灯点缀挑高七米大厅，更显气派非凡</p>
<p>细腻典雅 时尚尊荣 翰品酒店桃园 全新品牌升级，富丽水晶吊灯点缀挑高七米大厅，更显气派非凡</p>
<p>细腻典雅 时尚尊荣 翰品酒店桃园 全新品牌升级，富丽水晶吊灯点缀挑高七米大厅，更显气派非凡</p>
</div>
<div class="small right">
<h3>附近景点
<a href="" class="right">查看全部 >></a>
</h3>
<p>这里是酒店附近景点的信息</p>
<p>细腻典雅 时尚尊荣 翰品酒店桃园 全新品牌升级，富丽水晶吊灯点缀挑高七米大厅，更显气派非凡</p>
<p>细腻典雅 时尚尊荣 翰品酒店桃园 全新品牌升级，富丽水晶吊灯点缀挑高七米大厅，更显气派非凡</p>
<p>细腻典雅 时尚尊荣 翰品酒店桃园 全新品牌升级，富丽水晶吊灯点缀挑高七米大厅，更显气派非凡</p>
</div>
<div class="small left" id="pinglun">
<h3>客户点评
<a href="" class="right">查看更多点评 >></a>
</h3>
</div>
</div>
</body>
</html>
qq_LeanneCai_04297694浏览 1302回答 3
3回答
-
Doit的信仰
厉害啊我看不懂 -
IT小公举
你这个排版让人看得好头痛啊
随时随地看视频慕课网APP
Html/CSS