2 Star 2 Fork 27

lpz2/html5study

forked from Fernando/html5study 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
booking.html 10.14 KB
一键复制 编辑 原始数据 按行查看 历史
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" href="column.css">
<title>PC端网页布局</title>
</head>
<body>
<header id="header">
<div class="center">
<h1 class="logo">桂林旅行社</h1>
<nav class="link">
<h1 class="none">网站导航</h1>
<ul>
<li><a href="index.html">首页</li></a>
<li><a href="information.html">旅游资讯</li></a>
<li class="active"><a href="booking.html">机票订购</li></a>
<li><a href="#">风景欣赏</li></a>
<li><a href="#">公司简介</li></a>
</ul>
</nav>
</div>
</header>
<div id="headline">
<div class="center">
<hgroup>
<h2>旅游资讯</h2>
<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
</hgroup>
</div>
</div>
<div id="container">
<aside class="sidebar">
<div class="sidebox">
<h2>景点推荐</h2>
<div class="tag">
<ul>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
<li><a href="###">曼谷(12)</a></li>
</ul>
</div>
</div>
<div class="sidebox hot">
<h2>热卖旅游</h2>
<div class="figure">
<figure>
<img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="./img/hot2.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="./img/hot3.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="./img/hot4.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="./img/hot5.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="./img/hot6.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="./img/hot7.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
<figure>
<img src="./img/hot8.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游</figcaption>
</figure>
</div>
</div>
<div class="sidebox">
<h2>旅游百宝箱</h2>
<div class="box">
<a href="###" class="trea1">天气预报</a>
<a href="###" class="trea2">火车票查询</a>
<a href="###" class="trea3">航空查询</a>
<a href="###" class="trea4">地铁线路查询</a>
</div>
</div>
</aside>
<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_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">¥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">¥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">¥745</td>
<td>¥50</td>
<td></td>
<td>春秋航空</td>
<td><a href="###" class="reserve">预订</a></td>
</tr>
</tbody>
<tfoot>
<td colspan="7"><a href="###" class="more2">加载更多航班...</a></td>
</tfoot>
</table>
</div>
</div>
</div>
<footer id="footer">
<div class="top">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅行社</li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li>旅游合同签订有哪些?</li>
<li>儿童票有半价优惠吗?</li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li>微博: weibo.com/zzz</li>
<li>邮件: lpz2@163.com</li>
<li>地址: 广西桂林</li>
</ul>
</div>
</div>
<div class="bottom">Copyright © 桂林旅行社|桂ICP备19011111号|旅行社许可证:xxxxxxx</div>
</footer>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/lpz2/html5study.git
git@gitee.com:lpz2/html5study.git
lpz2
html5study
html5study
fixed_layout_project

搜索帮助