index.html 6.28 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="css/index.css">
</head>
<body>
    <div class="wrapper-index">
        <a class="logo" href="index.html">
            <img src="images/logo.png">
        </a>
        <a class="calendar" href="历史上的今天.html">
            <img src="images/calendar2.png" alt="历史上的今天" title="历史上的今天">
        </a>
        <div class="container-fluid search-main">
            <form class="navbar-form clearfix">
                <div class="logo-search">
                    <img class="img-responsive" src="images/logo-search2.png">
                </div>
                <div class="search-main-input-wrapper">
                    <img class="search-main-input-img" src="images/bg-dog.png" alt="">
                    <div class="search-main-input-inner clearfix">
                        <div class="form-group input-group-lg">
                            <input class="form-control" type="text">
                            <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-search btn-lg" type="button"></button>
                    </div>
                </div>
            </form>
            <div class="navbar-links navbar-form">
                <a href="万国志.html">万国志</a>
                <a href="地方志.html">地方志</a>
                <a href="人物志.html">人物志</a>
            </div>
        </div>
        <div class="push-main">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-11 col-lg-push-6 col-xs-24">
                        <div class="card">
                            <div class="card-title">每日一字</div>
                            <div class="card-title">推荐词条</div>
                            <div class="card-main">
                                <div class="card-col card-character">
                                    <div class="card-character-main">
                                        <a href="javascript:;"></a>
                                        <div class="card-character-voice">
                                            <div class="icon icon-horn"></div>
                                        </div>
                                    </div>
                                    <div class="card-character-date">2018/01/2</div>
                                </div>
                                <div class="card-col card-word">
                                    <div class="card-word-value">春节</div>
                                    <div class="card-word-content">
                                        <div class="card-word-desc">中国民间最隆重的传统节日。
                                            <br>时间在每年夏历元旦,即正月初一。</div>
                                        <div class="card-word-metas">对联 / 福 / 中秋节 / 团圆节</div>
                                    </div>
                                    <div class="card-word-share">
                                        <div class="icon icon-share"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-lg-pull-11 col-xs-12">
                        <div class="card">
                            <div class="card-title">知识专题</div>
                            <div class="card-main">
                                <div class="theme clearfix">
                                    <a class="theme-cell" href="javascript:;">中国特色社会主义</a>
                                    <a class="theme-cell" href="javascript:;">心脏</a>
                                    <a class="theme-cell" href="javascript:;">一般天文数据</a>
                                    <a class="theme-cell" href="javascript:;">中国历史朝代</a>
                                    <a class="theme-refresh" href="javascript:;">
                                        <div class="icon icon-refresh"></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-xs-12">
                        <div class="card">
                            <div class="card-title">词云</div>
                            <div class="card-main">
                                <div class="word"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <footer class="footer-main">
                    <div class="qr">
                        <a href="#">
                            <span class="icon icon-qr"></span>
                        </a>
                    </div>
                    <p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
                        <a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
                    </p>
                </footer>
            </div>
        </div>
    </div>
    <script src="js/plugins/jquery.min.js"></script>
    <script src="js/vendor.js" merge="true"></script>
    <script>
        var ciyun = ['ciyun', 'ciyun2', 'ciyun3']

        function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
        }
        var ran = getRandomInt(0, 3)
        $(".word").css({
            "background-image": "url(./images/" + ciyun[ran] + ".png)"
        })
    </script>
</body>
</html>