html5study
/
information.html

<!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 class="active"><a href="information.html">旅游资讯</li></a>
            <li><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">
        <div class="infor">
            <ul class="left">
                <li><a href="###">显示特价</li></a>
                <li><a href="###">热门推荐</li></a>
            </ul>
            <ul class="right">
                <li><a href="###" class="selected">推荐</a></li>
                <li><a href="###">折扣</li></a>
                <li><a href="###">价格</li></a>
            </ul>
        </div>
        <figure class="tour">
            <img src="./img/tour1.jpg" alt="曼谷-芭提雅6日游">
            <figcaption>
                <article>
                    <header>
                        <hgroup>
                            <h2>曼谷-芭提雅6日游</h2>
                            <h3>包团特惠,超丰富景点,升级1晚国五,无自费,赠送600元成人劵...</h3>
                        </hgroup>
                    </header>
                    <ol>
                        <li><mark>交通</mark>春秋航空,桂林出发,无须转机</li>
                        <li><mark>团期</mark>11/01、11/03、11/08...</li>
                    </ol>
                    <div class="buy">
                        <div class="price">$ <strong>2864</strong><s>$3980</s></div>
                        <div class="reserve"><a href="###">立即抢购</div></a>
                    </div>
                    <div class="type">国内长线</div>
                    <div class="disc"><span>4.7折</span></div>
                    <footer>本团游由桂林旅行社赞助提供，截止于 <time>>2019-04-10</time></footer>
                </article>
            </figcaption>
        </figure>
        <div class="more">加载更多。。。</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>