24.html 14.6 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>搜索</title>
    <link rel="stylesheet" href="css/vendor.css">
    <link rel="stylesheet" href="js/plugins/vis/vis.min.css">
    <link rel="stylesheet" href="css/h5.css">
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">
                    <img src="images/logo.png">
                </a>
            </div>
            <div class="navbar-collapse">
                <form class="navbar-form clearfix">
                    <div class="form-group input-group-lg">
                        <input class="form-control" type="text" placeholder="辞海云">
                        <button class="btn navbar-search-camera" type="button">
                            <div class="icon icon-camera"></div>
                        </button>
                        <button class="btn navbar-search-microphone" type="button">
                            <div class="icon icon-microphone"></div>
                        </button>
                    </div>
                    <button class="btn btn-inverse btn-lg" type="button">进入词条</button>
                    <button class="btn btn-default btn-lg" type="button">搜索词条</button>
                    <a class="btn btn-link btn-lg" type="button">搜索助手
                        <span class="icon icon-help"></span>
                    </a>
                    <div class="navbar-main-list">
                        <span class="icon icon-search-tag"></span>
                        <a href="#">语词</a>
                        <a href="#">哲学</a>
                        <a href="#">社会</a>
                        <a href="#">民族</a>
                        <a href="#">历史</a>
                        <a href="#">地理</a>
                        <a href="#">文学</a>
                        <a href="#">艺术</a>
                        <a href="#">生命</a>
                        <a href="#">农业</a>
                        <a href="#">医学</a>
                        <a href="#">科技</a>
                    </div>
                </form>
            </div>
        </div>
    </nav>
    <div class="encyclopedia" style="background-image:url(images/word-bg-01.jpg)">
        <div class="container">
            <div class="content">
                <div class="row">
                    <div class="col-xs-17">
                        <ul class="tab-nav">
                            <li class="tab-nav-item active">
                                <a href="2-3字-百科义.html">百科</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-17">
                        <main class="main">
                            <div class="word-detail">
                                <div class="head-intro clearfix">
                                    <div class="word pull-left"></div>
                                    <div class="voice-box pull-left">
                                        <div class="voice clearfix">
                                            <div class="pull-left py">【xiàng】</div>
                                            <div class="icon" style="background-image:url(icons/voice.png)"></div>
                                        </div>
                                        <div class="sub-name">长鼻目象科哺乳动物</div>
                                    </div>
                                </div>
                                <div class="intro-box clearfix">
                                    <div class="intro-item col-xs-8 clearfix">
                                        <div class="name pull-left">中文学名:</div>
                                        <div class="txt pull-left"></div>
                                    </div>
                                    <div class="intro-item col-xs-16 clearfix">
                                        <div class="name pull-left">亚纲:</div>
                                        <div class="txt pull-left">真兽亚纲</div>
                                    </div>
                                    <div class="intro-item col-xs-8 clearfix">
                                        <div class="name pull-left">拉丁学名:</div>
                                        <div class="txt pull-left">Elephantidae</div>
                                    </div>
                                    <div class="intro-item col-xs-16 clearfix">
                                        <div class="name pull-left">目:</div>
                                        <div class="txt pull-left">长鼻目</div>
                                    </div>
                                    <div class="intro-item col-xs-8 clearfix">
                                        <div class="name pull-left">别称:</div>
                                        <div class="txt pull-left">大象</div>
                                    </div>
                                    <div class="intro-item col-xs-16 clearfix">
                                        <div class="name pull-left">科:</div>
                                        <div class="txt pull-left">象科</div>
                                    </div>
                                    <div class="intro-item col-xs-8 clearfix">
                                        <div class="name pull-left">界:</div>
                                        <div class="txt pull-left">动物界</div>
                                    </div>
                                    <div class="intro-item col-xs-16 clearfix">
                                        <div class="name pull-left">属:</div>
                                        <div class="txt pull-left">亚洲象属、非洲象属</div>
                                    </div>
                                    <div class="intro-item col-xs-8 clearfix">
                                        <div class="name pull-left">门:</div>
                                        <div class="txt pull-left">脊索动物门</div>
                                    </div>
                                    <div class="intro-item col-xs-16 clearfix">
                                        <div class="name pull-left">种:</div>
                                        <div class="txt pull-left">普通非洲象,非洲森林象,亚洲象</div>
                                    </div>
                                    <div class="intro-item col-xs-8 clearfix">
                                        <div class="name pull-left">亚门:</div>
                                        <div class="txt pull-left">脊椎动物亚门</div>
                                    </div>
                                    <div class="intro-item col-xs-16 clearfix">
                                        <div class="name pull-left">分布区域:</div>
                                        <div class="txt pull-left">非洲撒哈拉沙漠以南和南亚及东南亚以及中国南部边</div>
                                    </div>
                                    <div class="intro-item col-xs-8 clearfix">
                                        <div class="name pull-left">纲:</div>
                                        <div class="txt pull-left">哺乳纲</div>
                                    </div>
                                </div>
                                <div class="album-box js-album">
                                    <div class="album">
                                        <div class="pic" style="background-image:url(images/album-01.jpg)"></div>
                                    </div>
                                    <div class="sub-tip">象图册(5)</div>
                                </div>
                            </div>
                            <div class="main__bd main-bakeyi">
                                <ul class="main-tab js-tab clearfix">
                                    <li class="main-tab-item active">
                                        <a href="#tab1">释义</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tab1">
                                        <div class="st-wrap">
                                            <img src="./images/24.jpg" alt="">
                                            <div class="st-links">
                                                <div class="st-row">
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""> </a>
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""> </a>
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""></a>
                                                </div>
                                                <div class="st-row">
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""> </a>
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""> </a>
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""></a>
                                                </div>
                                                <div class="st-row">
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""> </a>
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""> </a>
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""></a>
                                                </div>
                                                <div class="st-row">
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""> </a>
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""> </a>
                                                    <a class="st-link" href=""></a>
                                                    <a class="st-link" href=""></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="js-top"></div>
                        </main>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="album-alert">
        <div class="album-swiper swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/ele-01.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="images/ele-01.jpg">
                </div>
                <div class="swiper-slide">
                    <img src="images/ele-01.jpg">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <footer class="footer-main">
        <div class="container">
            <p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
                <a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
            </p>
        </div>
    </footer>
    <script src="js/plugins/jquery.min.js"></script>
    <script src="js/vendor.js" merge="true"></script>
    <script src="js/plugins/vis/vis.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(function() {
            $('.js-album').click(function() {
                layer.open({
                    type: 1,
                    title: false,
                    shadeClose: true,
                    shade: 0.6,
                    closeBtn: false,
                    area: false,
                    content: $('.album-alert')
                });
                var mySwiper = new Swiper('.album-swiper', {
                    loop: true,
                    pagination: '.swiper-pagination',
                    paginationClickable: true
                });
            });

            // tab选项卡
            $(".js-tab a").click(function(e) {
                e.preventDefault()
                $(this).tab('show')
            })
            // 显示起源
            $(".js-origin").click(function() {
                $(this).toggleClass("active").siblings().removeClass("active")
                $("#collapse").slideToggle()
            })
            // layer
            $(".js-calligraphy").click(function() {
                $(this).toggleClass("active").siblings().removeClass("active")
                if ($("#collapse").is(":visible")) $("#collapse").slideUp()
                layer.open({
                    type: 1,
                    content: $("#calligraphy"),
                    area: ['900px'],
                    title: false,
                    btn: [],
                    cancel: function() {
                        $(".js-calligraphy").removeClass("active")
                    }
                })
            })
            // 复制
            var clipboard = new Clipboard(".js-copy")
            $(".js-copy").click(function(e) {
                e.preventDefault()
                var parent = $(this).parents(".js-sec")
                var text = parent.find(".paraphrase-title").text() + "\n" + parent.find(".paraphrase-p").text()
                $(this).attr('data-clipboard-text', text)
            })

        });
    </script>
</body>
</html>