ticket.html:
<div class="list ticket">
<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_time">出发时间</label>
<input type="text" name="from_time" id="from_time" placeholder="时间/日期">
</p>
<p>
<label for="to_time">返回时间</label>
<input type="text" name="to_time" id="to_time" 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>
<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">¥555</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">¥555</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">¥555</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">¥555</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">¥555</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">¥555</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">¥555</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">¥555</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">¥555</td>
<td>¥50</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>
</div>
column.css:
#container .ticket{
color:#666;
}
#container .ticket h2{
height: 40px;
line-height: 40px;
border-bottom: 1px dashed #999;
font-size: 30px;
font-weight: normal;
padding:0 0 15px 0;
}
#container .ticket .type{
font-size: 20px;
margin:20px 0 10px 0;
}
#container .ticket .type mark{
color: #fff;
background: #458b00;
padding: 5px 8px;
border-radius: 4px;
margin:0 10px 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{
}
#container .ticket .form input{
width: 250px;
height: 30px;
border:1px solid #ccc;
background: #fff;
border-radius: 4px;
padding: 5px;
font-size: 18px;
color: #666;
margin:0 0 0 16px;
}
#container .ticket .form{
line-height: 3;
}
#container .ticket .submit{
display: 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:20px 0 0 0;
font-size: 20px;
}
#container .ticket .new ul{
margin: 20px 0 0 0 ;
}
#container .ticket .new li{
display: inline-block;
padding:5px 10px;
}
#container .ticket .new li:first-child{
padding-left: 0;
}
#container .ticket .new li:nth-child(2){
background-color: #458b00;
color:#fff;
border-radius: 4px;
}
#container .ticket table{
margin:20px 0 0 0 ;
width: 100%;
border:1px solid #ddd;
border-collapse: collapse;
}
#container .ticket th{
border-bottom:1px solid #ddd;
height: 50px;
line-height: 50px;
}
#container .ticket td{
height: 50px;
line-height: 50px;
border:1px solid #ddd;
text-align: center;
border-bottom:1px solid #ddd;
}
#container .ticket tr:nth-child(2n){
background-color: #fafafa;
}
#container .ticket tr:hover{
background-color: #eee;
}
#container .ticket .price{
color:#f60;
}
#container .ticket .more{
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;
}