slow-travel
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慢旅</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>
    <!-- 导航 -->
    <div class="header">
        <div class="header-c">
            <a href="index.html" class="logo">
                <img src="img/首页/logo.png">
            </a>
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="index.html" class="action">首页</a>
                    <span class="line action"></span>
                </li>
                <li class="nav-item">
                    <a href="plan.html">特别策划</a>
                    <span class="line"></span>
                </li>
                <li class="nav-item">
                    <a href="javascript:void(0);" onclick="js_method()">精品路线</a>
                    <span class="line"></span>
                    <div class="box">
                        <a href="route_group.html">定制团体游</a>
                        <a href="route_alone.html">领队自由行</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="about.html">关于我们</a>
                    <span class="line"></span>
                    <div class="box">
                        <a href="javascript:void(0);" onclick="js_method()">企业理念</a>
                        <a href="javascript:void(0);" onclick="js_method()">品牌介绍</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="contact.html">联系我们</a>
                    <span class="line"></span>
                    <div class="box">
                        <a href="javascript:void(0);" onclick="js_method()">在线咨询</a>
                        <a href="javascript:void(0);" onclick="js_method()">留言版块</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 轮播广告 -->
    <div class="banner">
        <span class="slogan">—— 让美好触手可及 ——</span>
        <div class="banner-page">
            <a href="javascript:void(0);" onclick="js_method()"></a>
            <a href="javascript:void(0);" onclick="js_method()"></a>
            <a href="javascript:void(0);" onclick="js_method()" class="mr0"></a>
        </div>
    </div>
    <!-- 特别策划 -->
    <div class="plan">
        <div class="plan-c">
            <div class="label">
                <span class="label-line"></span>
                <div class="label-name">
                    <span class="name">特别策划</span>
                    <span class="ename">ACTIVITY ROUTR</span>
                </div>
            </div>
            <ul class="plan-list clear">
                <li class="plan-item">
                    <div class="landscape left-float">
                        <img src="img/首页/云南.jpg">
                        <div class="box"></div>
                    </div>
                    <div class="landscape-info right-float">
                        <p class="title">苍山洱海旁，过一段慢时光</p>
                        <p class="subtitle">云南风花雪月之旅 （6days）</p>
                        <p class="itinerary">
                            <img src="img/首页/img1.png"><span>洱海骑行</span>
                            <img src="img/首页/img2.png"><span>手作扎染</span>
                            <img src="img/首页/img3.png"><span>泸沽湖划船</span>
                            <img src="img/首页/img4.png"><span>草海</span>
                            <img src="img/首页/img5.png"><span>束河古镇</span>
                            <img src="img/首页/img6.png"><span>拉市海</span>
                        </p>
                    </div>
                </li>
                <li class="plan-item">
                    <div class="landscape right-float">
                        <img src="img/首页/成都.jpg">
                        <div class="box left"></div>
                    </div>
                    <div class="landscape-info left-float">
                        <p class="title">苍山洱海旁，过一段慢时光</p>
                        <p class="subtitle">云南风花雪月之旅 （6days）</p>
                        <p class="itinerary">
                            <img src="img/首页/img1.png"><span>洱海骑行</span>
                            <img src="img/首页/img2.png"><span>手作扎染</span>
                            <img src="img/首页/img3.png"><span>泸沽湖划船</span>
                            <img src="img/首页/img4.png"><span>草海</span>
                            <img src="img/首页/img5.png"><span>束河古镇</span>
                            <img src="img/首页/img6.png"><span>拉市海</span>
                        </p>
                    </div>
                </li>
                <li class="plan-item">
                    <div class="landscape left-float">
                        <img src="img/首页/青海.jpg">
                        <div class="box"></div>
                    </div>
                    <div class="landscape-info right-float">
                        <p class="title">苍山洱海旁，过一段慢时光</p>
                        <p class="subtitle">云南风花雪月之旅 （6days）</p>
                        <p class="itinerary">
                            <img src="img/首页/img1.png"><span>洱海骑行</span>
                            <img src="img/首页/img2.png"><span>手作扎染</span>
                            <img src="img/首页/img3.png"><span>泸沽湖划船</span>
                            <img src="img/首页/img4.png"><span>草海</span>
                            <img src="img/首页/img5.png"><span>束河古镇</span>
                            <img src="img/首页/img6.png"><span>拉市海</span>
                        </p>
                    </div>
                </li>
            </ul>
            <a href="javascript:void(0);" onclick="js_method()" class="more">MORE</a>
        </div>
    </div>
    <!-- 关于我们 -->
    <div class="about">
        <div class="about-c">
            <div class="label">
                <span class="label-line"></span>
                <div class="label-name">
                    <span class="name">关于我们</span>
                    <span class="ename">ABOUT  US</span>
                </div>
            </div>
            <div class="introduction">
                <div class="introduce clear">
                    <div class="title">
                        <h2 class="name">介绍</h2>
                        <p class="ename">INTRODUCE</p>
                    </div>
                    <div class="content">
                        <p>
                            新旅行概念社区，在这里，你可以收货来自世界各地的友谊，为您<br>
                            提供省心、省钱、纯玩、有趣的路线随时带您出发看世界。
                        </p>
                    </div>
                </div>
                <div class="concept">
                    <div class="title">
                        <h2 class="name">理念</h2>
                        <p class="ename">CONCEPT</p>
                    </div>
                    <div class="content">
                        <p>
                            每一寸土地都承载着一个城市厚重而亲切的灵魂。<br>
                            About travel, about life, That's all.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 精品路线 -->
    <div class="route">
        <div class="route-c">
            <div class="label">
                <span class="label-line"></span>
                <div class="label-name">
                    <span class="name">精品路线</span>
                    <span class="ename">CLASSICS ROUTR</span>
                </div>
            </div>
            <ul class="route-list clear">
                <li class="route-item">
                    <a href="javascript:void(0);" onclick="js_method()">
                        <p class="title">京都岚山深度一日游</p>
                        <p class="subtitle">寻找我们的风花雪月</p>
                    </a>
                </li>
                <li class="route-item">
                    <a href="javascript:void(0);" onclick="js_method()">
                        <img src="img/首页/东极岛.jpg">
                        <div class="mask">
                            <div class="box"></div>
                        </div>
                    </a>
                </li>
                <li class="route-item">
                    <a href="javascript:void(0);" onclick="js_method()">
                        <p class="title">西北精环线自驾游</p>
                        <p class="subtitle">圆一场北方的梦</p>
                    </a>
                </li>
                <li class="route-item">
                    <a href="javascript:void(0);" onclick="js_method()">
                        <img src="img/首页/京都岚山.jpg">
                        <div class="mask">
                            <div class="box"></div>
                        </div>
                    </a>
                </li>
                <li class="route-item">
                    <a href="javascript:void(0);" onclick="js_method()">
                        <p class="title">东极岛三日游</p>
                        <p class="subtitle">后青春时代的海岛记忆</p>
                    </a>
                </li>
                <li class="route-item">
                    <a href="javascript:void(0);" onclick="js_method()">
                        <img src="img/首页/西北.jpg">
                        <div class="mask">
                            <div class="box"></div>
                        </div>
                    </a>
                </li>
            </ul>
            <a href="javascript:void(0);" onclick="js_method()" class="more">MORE</a>
        </div>
    </div>
    <!-- 定制 -->
    <div class="customize">
        <div class="customize-c clear">
            <div class="group">
                <a href="javascript:void(0);" onclick="js_method()" class="btn">定制团体游</a>
                <p class="title">独立成团&nbsp;&nbsp;&nbsp;&nbsp;专属定制</p>
                <p class="subtitle">简单几步，定制您的私人旅行</p>
                <span class="line"></span>
            </div>
            <div class="alone">
                <a href="javascript:void(0);" onclick="js_method()" class="btn">领队自由行</a>
                <p class="title">金牌领队&nbsp;&nbsp;&nbsp;&nbsp;专业跟拍</p>
                <p class="subtitle">解锁陌生，升级地道旅游体验</p>
                <span class="line"></span>
            </div>
        </div>
    </div>
    <!-- 联系我们 -->
    <div class="contact">
        <div class="contact-c">
            <div class="label">
                <span class="label-line"></span>
                <div class="label-name">
                    <span class="name">联系我们</span>
                    <span class="ename">CONTACT</span>
                </div>
            </div>
            <div class="contact-details clear">
                <div class="company-contact">
                    <dl>
                        <dt>慢旅Slow Travle工作室</dt>
                        <dd>地点：中国河南省郑州市绿地新都汇</dd>
                        <dd>邮编：1000000</dd>
                        <dd>电话：0392-23656504</dd>
                        <dd>邮箱：manlv@qq.com</dd>
                        <dd>
                            <a href="javascript:void(0);" onclick="js_method()"><img src="img/首页/QQ.png"></a>
                            <a href="javascript:void(0);" onclick="js_method()"><img src="img/首页/微信.png"></a>
                            <a href="javascript:void(0);" onclick="js_method()"><img src="img/首页/微博.png"></a>
                        </dd>
                        <dd>COPYRIGHT (©) 2018 mo004_2551 - 生活方式旅游类网站.</dd>
                    </dl>
                </div>
                <div class="user-contact clear">
                    <dl>
                        <dt>姓名</dt>
                        <dd>
                            <input type="text">
                        </dd>
                    </dl>
                    <dl>
                        <dt>邮箱</dt>
                        <dd>
                            <input type="text">
                        </dd>
                    </dl>
                    <dl>
                        <dt>电话</dt>
                        <dd>
                            <input type="text">
                        </dd>
                    </dl>
                    <p>内容</p>
                    <input type="text" class="content">
                    <a href="javascript:void(0);" onclick="js_method()" class="submit">提交</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>