<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>船票网</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 网页头部开始 -->
<div id="header">
<img src="images/logo.gif" alt="船票网logo">
<span>
<a href="#"><img src="images/loginbg.gif" alt="登录图标">登录</a>
<i>|</i>
<a href="#">注册</a>
<i>|</i>
<a href="#">客户服务</a>
</span>
</div>
<!-- 网页头部结束 -->
<!-- 网页内容部分开始 -->
<div id="main">
<!-- 标题开始 -->
<div class="biaoti">
<a href="#">预定船票</a>
<span> > 订单填写</span>
<div class="luxian">
<ul>
<li>
大连 — 烟台
( 4月18日 周六 <span class="highlight">15:30</span> 开船 )
</li>
<li>地点:大连港</li>
<li>船名:龙兴岛</li>
</ul>
</div>
</div>
<!-- 标题结束 -->
<!-- 票价信息开始 -->
<div class="piaojia">
<h4>票价信息</h4>
<div class="piaojialan">
<p>单次预定限5张</p>
<ul>
<!--
<li>普通<span class="highlight">¥315(280+20+15)</span></li>
<li>学生<span class="highlight">¥300(280+20+15)</span></li>
<li>军人<span class="highlight">¥270(280+20+15)</span></li>
<li>儿童<span class="highlight">¥100(280+20+15)</span></li>
-->
<li><a href="#">[说明]</a></li>
</ul>
</div>
</div>
<!-- 票价信息结束 -->
<!-- 乘船人信息开始 -->
<div class="chengchuan">
<h4>乘船人信息</h4>
<div class="chengchuanlan">
<!-- 常用乘船人开始 -->
<div class="always" id="allPassenger">
<span><b>常用乘船人</b></span>
<!-- 默认乘船人开始 -->
<span id="defaultPassenger">
<!--
<label>
<input type="checkbox" checked>王大川
</label>
-->
</span>
<!-- 默认乘船人结束 -->
<!-- 其他乘船人开始 -->
<span id="passengerBlock" style="display:none;">
<!--
<label>
<input type="checkbox">张三
</label>
<label>
<input type="checkbox">李四
</label>
<label>
<input type="checkbox">王五
</label>
<label>
<input type="checkbox">赵六
</label>
-->
</span>
<!-- 其他乘船人结束 -->
<a href="javascript:void(0);" id="moreBtn">更多>></a>
</div>
<!-- 常用乘船人结束 -->
<!-- 乘船人订单列表开始 -->
<div id="passengerList">
<!--
<ul>
<li>
<select name="price">
<option value="315">普通 ¥315</option>
<option value="300">学生 ¥300</option>
<option value="270">军人 ¥270</option>
<option value="100">儿童 ¥100</option>
</select>
</li>
<li>
姓名:
<input type="text" value="王大川" size="8" readonly>
</li>
<li>
<select name="certType">
<option value="1">身份证</option>
</select>
<input type="text" value="2202045678951">
</li>
<li>
电话号码:
<input type="text" value="13012345678" readonly>
</li>
<li>
<input type="button" value="删除当前" class="delBtn">
</li>
</ul>
-->
</div>
<!-- 乘船人订单列表结束 -->
<a href="javascript:;">
<img src="images/regbtn9.gif" alt="增加按钮" id="addPassBtn">
</a>
</div>
</div>
<!-- 乘船人信息结束 -->
<!-- 取票人信息开始 -->
<div class="qupiao">
<h4>取票人信息</h4>
<div class="qupiaolan">
<div class="qupiaoren">
<span><b>取票人:王大川</b></span>
</div>
<div>
<ul>
<li>王大川</li>
<li>身份证</li>
<li>1234567890</li>
<li>13012345678</li>
</ul>
</div>
</div>
</div>
<!-- 取票人信息结束 -->
<!-- 提交订单开始 -->
<div class="submit">
<div class="wrapper">
<span>共<span id="ticketCountTxt" class="highlight"></span>张票</span>
<span>
订单总额:¥<span id="totalPriceTxt" class="highlight" style="font-size:18px;"></span>
</span>
<a href="javascript:;">
<img src="images/regbtn10.gif" alt="提交订单" id="submitBtn">
</a>
</div>
</div>
<!-- 提交订单结束 -->
</div>
<!-- 网页内容部分结束 -->
<!-- footer开始 -->
<div id="footer">
<p>
<span>关于我们</span>
<i>|</i>
<span>联系我们</span>
<i>|</i>
<span>投诉建议</span>
<i>|</i>
<span>广告服务</span>
<i>|</i>
<span>免责声明</span>
</p>
<p>大连XX有限公司,售票业务经营许可证编号:1111111</p>
<p>
Copyright © 2014船票网 www.xxx.com | 营业执照 | ICP证:辽XX-2000000
</p>
</div>
<!-- footer结束 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>