yuejing
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yuejing</title>

    <link rel="stylesheet" href="css/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>
    <!-- header start -->
    <header>
        <div class="container head">
            <div class="logo">
                <img src="images/header/logo.png" alt="">
            </div>
            <div class="header_btn">
                <ul>
                    <li><a href="index.html"> 首页 </a></li>
                    <li>|</li>
                    <li><a href="page/location.html"> 旅游城市 </a></li>
                    <li>|</li>
                    <li><a href="page/type.html"> 各色美景 </a></li>
                    <li>|</li>
                    <li><a href="page/card.html"> 打卡胜地 </a></li>
                    <li>|</li>
                    <li><a href="https://www.amap.com/" target="_blank"> 高德导航 </a></li>
                </ul>
            </div>
            <div class="header_icon">
                <ul>
                    <li class="qq">
                        <a href="" class="fa fa-qq"></a>
                        <div class="code">
                            <img src="images/header/code.jpg" alt="">
                        </div>
                    </li>
                    <li>|</li>
                    <li class="weixin">
                        <a href="" class="fa fa-weixin"></a>
                        <div class="code">
                            <img src="images/header/code.jpg" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <!-- banner start -->
    <div class="banner margin-bottom">
        <div class="banner_wrap">
            <img src="images/index/banner_1.jpg" alt="">
            <img src="images/index/banner_2.jpg" alt="">
            <img src="images/index/banner_3.jpg" alt="">
            <img src="images/index/banner_1.jpg" alt="">
        </div>
        <div class="title text-center">
            <h1>世界那么大，你想去看看</h1>
            <p>
                一个人的旅行<br>
                在路上遇见最真实的自己<br>
                学会随遇而安，淡然一点，走走停停<br>
                把心放开，做一次彻底的心灵深呼吸
            </p>
        </div>
    </div>

    <!-- hot-area start -->
    <div class="hot-area margin-bottom">
        <div class="container">
            <h2 class="padding-20 text-center">热门景区</h2>
            <div class="row hot-area-item">
                <div class="col-sm-4 col-xs-6 margin-bottom">
                    <div class="bg-white padding-10">
                        <div class="img img1">
                            <div class="mask">
                                <h4 class="padding-10">湖南张家界</h4>
                                <p class="ell">张家界森林公园、天门山、张家界大峡谷和凤凰古城，玻璃栈道</p>
                            </div>
                        </div>
                        <div class="items">
                            <p class="ell"><span>评价：</span>AAAAA</p>
                            <div class="line"></div>
                            <p class="ell"><span>游客随笔：</span>雾霭飘渺，如幻如梦，笼罩着三千巍峨雄峰，缠绕着森林的茂密苍翠。人在酣睡，山在酣睡，雾却醒着，弥漫行走于山峦之间，赶在太阳升起之前，迷蒙山之空灵，浸润森林之苍翠，陡添山林之神秘。</p>
                            <span style="color: gray; text-align: right;"><span class="fa fa-heart" style="color: red;"></span>  999+</span>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4 col-xs-6 margin-bottom">
                    <div class="bg-white padding-10">
                        <div class="img img2">
                            <div class="mask">
                                <h4 class="padding-10">黄山</h4>
                                <p class="ell">世界文化与自然双重遗产，世界地质公园，国家AAAAA级旅游景区，国家级风景名胜区，全国文明风景旅游区示范点，中华十大名山，天下第一奇山。</p>
                            </div>
                        </div>
                        <div class="items">
                            <p class="ell"><span>评价：</span>AAAAA</p>
                            <div class="line"></div>
                            <p class="ell"><span>游客随笔：</span> 山，好似让众人拥戴的伟人，仁厚是他的本色，静立，献出了唐古拉山的皑皑白雪，献出了黄山的温泉、云海、迎客松;山，相信沉默是金，他无语、无怨、无悔、无去、无从。然而冥冥之中，却永不停息地为世人演绎着动人的神话，最美的风景。</p>
                            <span style="color: gray; text-align: right;"><span class="fa fa-heart" style="color: red;"></span>  999+</span>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4 col-xs-6 margin-bottom">
                    <div class="bg-white padding-10">
                        <div class="img img3">
                            <div class="mask">
                                <h4 class="padding-10">杭州西湖</h4>
                                <p class="ell">三秋桂子、六桥烟柳、九里云松、十里荷花景观、有“西湖十景”、“新西湖十景”、“三评西湖十景”</p>
                            </div>
                        </div>
                        <div class="items">
                            <p class="ell"><span>评价：</span>AAAAA</p>
                            <div class="line"></div>
                            <p class="ell"><span>游客随笔：</span>立于断桥之上展望，阳光撒在湖面上边碧波闪闪，金光万道。水鸟时而掠过蓝天白云，时而轻拂水面，真是风景如画的人间仙境啊！此景美不胜收。</p>
                            <span style="color: gray; text-align: right;"><span class="fa fa-heart" style="color: red;"></span>  999+</span>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4 col-xs-6 margin-bottom">
                    <div class="bg-white padding-10">
                        <div class="img img4">
                            <div class="mask">
                                <h4 class="padding-10">九寨沟</h4>
                                <p class="ell">九寨归来不看水，长海、剑岩、诺日朗、树正、扎如、黑海六大景观，呈“Y”字形分布。翠海、叠瀑、彩林、雪峰、藏情、蓝冰，被称为“六绝”。</p>
                            </div>
                        </div>
                        <div class="items">
                            <p class="ell"><span>评价：</span>AAAAA</p>
                            <div class="line"></div>
                            <p class="ell"><span>游客随笔：</span>九寨沟的五彩池满bai湖弥望是湛蓝色的，秀美多du彩，近处湖水是浅蓝色，清澈见底，能看见池底岩石的纹路，也能看见软软的轮藻在水里摇曳，慵懒的小鱼儿悬浮在水中，间或尾部一摆，在摇曳的水草里游动，转眼便不见了。</p>
                            <span style="color: gray; text-align: right;"><span class="fa fa-heart" style="color: red;"></span>  999+</span>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4 col-xs-6 margin-bottom">
                    <div class="bg-white padding-10">
                        <div class="img img5">
                            <div class="mask">
                                <h4 class="padding-10">凤凰古镇</h4>
                                <p class="ell">朝阳宫、古城博物馆、杨家祠堂、沈从文故居、熊希龄故居、天王庙、大成殿、万寿宫等建筑</p>
                            </div>
                        </div>
                        <div class="items">
                            <p class="ell"><span>评价：</span>AAAA</p>
                            <div class="line"></div>
                            <p class="ell"><span>游客随笔：</span>傍晚，徜徉在光可鉴人的凤凰古城石板街道上，摩肩接踵的游客没有惯常闹市中的喧嚣，而是全都悄言细语地感受这古朴民居的无限韵致，你会觉得古城有一种超然人寰的宁静，是另一种美丽画卷。</p>
                            <span style="color: gray; text-align: right;"><span class="fa fa-heart" style="color: red;"></span>  999+</span>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4 col-xs-6 margin-bottom">
                    <div class="bg-white padding-10">
                        <div class="img img6">
                            <div class="mask">
                                <h4 class="padding-10">上里古镇</h4>
                                <p class="ell">韩家银子（官商钱多）、杨家顶子（官宦世家）、陈家谷子（屯粮大户）、张家棍子（骨科习武）、许家女子（漂亮勤劳），其中的故事耐人寻味。</p>
                            </div>
                        </div>
                        <div class="items">
                            <p class="ell"><span>评价：</span>AAAA</p>
                            <div class="line"></div>
                            <p class="ell"><span>游客随笔：</span>上里镇还是原来的上里镇，依旧淳朴；如果此时你去那里，可以看到很多人家的屋檐挂着玉米，虽经历了一冬，仍金灿灿耀眼。门前有老人坐在石墩上晒太阳，脸上洋溢着淡淡的笑意。</p>
                            <span style="color: gray; text-align: right;"><span class="fa fa-heart" style="color: red;"></span>  999+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- recommend start -->
    <div class="recommend margin-bottom">
        <div class="container">
        <h2 class="padding-20 text-center">今日推荐</h2>
        <div class="row">
            <div class="bg-white clearfix recommend-items">
                <div class="col-xs-12 col-sm-6 recommend-item">
                    <img src="images/index/recommend_1.jpg" alt="">
                </div>

                <div class="col-xs-12 col-sm-6 recommend-item">
                    <div class="cont">
                        <h3>简介</h3>
                        <p class="ell">泸沽湖是一个美丽的梦。平静的湖面上，游动着朵朵白云，倒映着巍巍青山。分不清哪里是天，哪里是岸；微风轻轻抚过湖面，眼前的湖水，如同一串晃动的珍珠，泛着如银的波光，勾起阵阵涟漪，轻摇着湖中小舟。湖水轻轻荡漾，将白云、蓝天、绿水的倒影相互渲染，幻化着色彩，涂抹出诗般的写意。</p>
                        <a href="page/recommend.html">查看更多</a>
                    </div>
                </div>
            </div>

            <div class="bg-white clearfix recommend-items">
                <div class="col-xs-12 col-sm-6 recommend-item">
                        <div class="cont">
                            <h3>简介</h3>
                            <p class="ell">秋天的稻城亚丁，五彩bai斑斓，du野花、青稞、红草地和谐地搭配zhi在一起，充满了热情、期望和绚丽，构成了秋季稻城亚丁最独特的美丽。多姿多彩的景色，丰富灿烂的色彩、迷人的红色枫叶…..一切的一切你不希望拥抱它感受它吗？</p>
                            <a href="page/recommend.html">查看更多</a>
                        </div>
                </div>

                <div class="col-xs-12 col-sm-6 recommend-item">
                    <img src="images/index/recommend_2.jpg" alt="">
                </div>
            </div>

            <div class="bg-white clearfix recommend-items">
                <div class="col-xs-12 col-sm-6 recommend-item">
                    <img src="images/index/recommend_1.jpg" alt="">
                </div>

                <div class="col-xs-12 col-sm-6 recommend-item">
                    <div class="cont">
                        <h3>简介</h3>
                        <p class="ell">风，那么轻柔，带动着小树、小草一起翩翩起舞，当一阵清风飘来，如同母亲的手轻轻抚摸自己的脸庞，我喜欢那种感觉，带有丝丝凉意，让人心旷神怡。享受生活...</p>
                        <a href="page/recommend.html">查看更多</a>
                    </div>
                </div>
            </div>

        </div>
        </div>
    </div>

    <!-- preview start -->
    <div class="preview margin-bottom">
        <div class="container">
            <h2 class="padding-20 text-center">风景预览</h2>
            <div class="row">
                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_1.jpg" alt="">
                    <p>桂林山水甲天下</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_4.jpg" alt="">
                    <p>唯有门前镜湖水</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_7.jpg" alt="">
                    <p>朱家流水天然景</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_10.jpg" alt="">
                    <p>上海明珠耀一方</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_2.jpg" alt="">
                    <p>梵净诱人履岳情</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_5.jpg" alt="">
                    <p>错木昂拉仁波湖</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_8.jpg" alt="">
                    <p>月明乌镇桥边夜</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_11.jpg" alt="">
                    <p>满城梧桐是南京</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_3.jpg" alt="">
                    <p>云蒸蔚霞紫云山</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_6.jpg" alt="">
                    <p>天空之镜为盐湖</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_9.jpg" alt="">
                    <p>青龙古镇盘太原</p>
                </div>

                <div class="col-sm-3 col-xs-6 preview-item">
                    <img src="images/index/preview_12.jpg" alt="">
                    <p>富饶宝岛在香港</p>
                </div>
            </div>
        </div>
    </div>

    <!-- footer start -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="footer_btn col-xs-12 margin-bottom">
                    <ul class="col-xs-12 padding-t-10">
                        <li class="col-xs-3"><a href="index.html"> 首页 </a></li>
                        <li class="col-xs-3"><a href="page/location.html"> 旅游城市 </a></li>
                        <li class="col-xs-3"><a href="page/type.html"> 各色美景 </a></li>
                        <li class="col-xs-3"><a href="page/card.html"> 打卡胜地 </a></li>
                    </ul>
                </div>

                <div class="cont">
                    <div class="col-sm-4">
                        <img src="images/header/logo.png" alt="">
                        <h4>你说的都队</h4>
                    </div>
                    <div class="col-sm-4" style="font-size: 10px;">
                        <p>扫码关注官方微信公众号</p>
                        <p>带你感受中国的美</p>
                        <img src="images/header/code.jpg" alt="" style="width: 20%;height: 20%;padding: 5px;background-color: white;">
                    </div>
                    <div class="col-sm-4" style="font-size: 30px;">
                        <p class="fa fa-home"><span style="font-size: 12px;">&nbsp&nbsp成都市xxx区xxx广场xxx号楼</span></p>
                        <p class="fa fa-envelope-o"><span style="font-size: 12px;">&nbsp&nbsp0000000000@qq.com</span></p>
                        <p class="fa fa-phone"><span style="font-size: 12px;">&nbsp&nbsp888-888-888</span></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>