[10]项目实战-PC 端固定布局(10)

一．机票预定

二．代码详解

//全部代码
<form action="###">
<h2>机票预定</h2>
<div class="type">
<p>航班类型 <mark>单程</mark> 往返</p>
</div>
<div class="form left">
<p>
<label for="from_city">出发城市 </label>
<input type="text" name="from_city" id="from_city" placeholder="城市名">
</p>
<p>
<label for="to_city">返回城市 </label>
<input type="text" name="to_city" id="to_city" placeholder="城市名">
</p>
</div>
<div class="form right">
<p>
<label for="from_date">出发时间 </label>
<input type="text" name="from_date" id="from_date" placeholder="时间/日期">
</p>
<p>
<label for="to_date">返回时间 </label>
<input type="text" name="to_date" id="to_date" placeholder="时间/日期">
</p>
</div>
<div class="form button">
<p>
<button type="submit" class="submit">订票</button>
</p>
</div>
</form>
<div class="new">
<h2>最新机票</h2>
<ul>
<li>热门城市：</li>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>重庆</li>
<li>成都</li>
<li>杭州</li>
<li>南京</li>
</ul>
<table>
<thead>
<tr>
<th>路线</th>
<th>日期</th>
<th>价格</th>
<th>税费</th>
<th>餐食</th>
<th>航班</th>
<th>预定</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京-成都</td>
<td>10-15</td>
<td class="price">¥745</td>
<td>¥50</td>
<td>有</td>
<td>春秋航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-上海</td>
<td>10-15</td>
<td class="price">¥479</td>
<td>¥45</td>
<td>无</td>
<td>南方航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-深圳</td>
<td>10-15</td>
<td class="price">¥561</td>
<td>¥52</td>
<td>有</td>
<td>西部航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-杭州</td>
<td>10-15</td>
<td class="price">¥378</td>
<td>¥36</td>
<td>无</td>
<td>天津航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-广州</td>
<td>10-15</td>
<td class="price">¥612</td>
<td>¥44</td>
<td>有</td>
<td>首都航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-重庆</td>
<td>10-15</td>
<td class="price">¥428</td>
<td>¥62</td>
<td>有</td>
<td>东方航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-昆明</td>
<td>10-15</td>
<td class="price">¥509</td>
<td>¥35</td>
<td>无</td>
<td>厦门航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-厦门</td>
<td>10-15</td>
<td class="price">¥893</td>
<td>¥73</td>
<td>有</td>
<td>深圳航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
<tr>
<td>北京-长沙</td>
<td>10-15</td>
<td class="price">¥663</td>
<td>¥46</td>
<td>无</td>
<td>四川航空</td>
<td><a href="###" class="reserve">预定</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7"><a href="###" class="more">加载更多航班...</a></td>
</tr>
</tfoot>
</table>
</div>

//CSS 部分
#container .ticket {
color: #666;
}
#container .ticket h2 {
height: 40px;
line-height:40px;
font-size: 30px;
font-weight:normal;
border-bottom: 1px dashed#999;
padding: 0 015px 0;
}
#container .ticket .type {
font-size: 20px;
margin: 20px0 10px 0;
}
#container .ticket .type mark {
color: #fff;
background-color: #458B00;
padding: 5px8px;
border-radius: 4px;
margin: 0 10px 0 16px;
}
#container .ticket .form {
font-size: 20px;
}
#container .ticket .form p {
line-height:3;
}
#container .ticket .form input {
width: 250px;
height: 30px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 4px;
padding: 5px;
font-size: 18px;
color: #666;
margin: 0 0 0 16px;
}
#container .ticket .left {
width: 43%;
display: inline-block;
}
#container .ticket .right{
width: 43%;
display: inline-block;
}
#container .ticket .button {
width: 9%;
display: inline-block;
}
#container .ticket .submit {
display: inline-block;
width: 90px;
height: 90px;
line-height:90px;
border-radius: 4px;
background-color: #f60;
color: #fff;
font-size: 20px;
text-align: center;
border: none;
cursor: pointer;
position: relative;
top: -28px;
}
#container .ticket .new {
margin: 20px0 0 0;
font-size: 20px;
}
#container .ticket .new ul {
margin: 20px0 0 0;
}
#container .ticket .new li {
display: inline-block;
padding: 5px10px;
}
#container .ticket .new li:first-child {
padding-left: 0;
}
#container .ticket .new li:nth-child(2) {
background-color: #458B00;
border-radius: 4px;
color: #fff;
}
#container .ticket table {
width: 100%;
border-collapse:collapse;
margin: 20px0 0 0;
border: 1px solid #ddd;
}
#container .ticket table th {
height: 50px;
line-height:50px;
border-bottom: 1px solid #ddd;
font-weight:normal;
}
#container .ticket table td {
height: 50px;
line-height:50px;
text-align: center;
border-bottom: 1px solid #ddd;
}
#container .ticket table tr:nth-child(2n) {
background-color: #fafafa;
}
#container .ticket table tr:hover {
background-color: #eee;
}
#container .ticket .price{
color: #f60;
}
#container .ticket .more2{
text-align: center;
font-size: 18px;
margin: 0 auto;
cursor: pointer;
display: block;
color: #666;
}
#container .ticket .reserve {
display: inline-block;
width: 80px;
height: 35px;
line-height:35px;
border-radius: 4px;
background-color: #f60;
color: #fff;
font-size: 20px;
text-align: center;
}