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; }