master

分支 (1)

管理

管理

master

zhanku
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>站酷网</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../zhanku/css/style.css">
    <link rel="stylesheet" href="../zhanku/css/Animate.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="js/renme.js"></script>
    <link href="css/style.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        window.onload = function () {
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal',
                loop: true,
                autoplay: {
                    delay: 1000,
                    reverseDirection: true,

                },
                pagination: {
                    el: '.swiper-pagination',
                    type: "fraction"
                },

                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
        }
    </script>
    <style>
        .swiper-container {
            width: 1000px;
            height: 250px;
        }
    </style>
</head>

<body>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <div class="container">


        <div class="wrap">
            <!-- 顶部部分 -->
            <div class="top">
                <div class="content">
                    <div class="top_left">

                        <b><span>ZCOOL 站酷网</span></b>
                    </div>
                    <div class="top_mid">
                        <ul id="nav" class="animated fadeInLeft">
                            <li class="active"><a href="index.html"><span>首页</span></a></li>
                            <li><a href=""><span>发现</span></a></li>
                            <li><a href=""><span>职位</span></a></li>
                            <li><a href=""><span>活动</span></a></li>

                        </ul>
                    </div>
                    <div class="top_right">
                        <button>登录</button>
                        <button>注册</button>


                    </div>
                </div>
            </div>
            <!-- 返回顶部 -->
            <input type="button" id="toTop" class="toTop" value="返回顶部↑">

            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/lb1.png" alt="" width="100%"></div>
                    <div class="swiper-slide"><img src="img/lb2.png" alt="" width="100%"></div>
                    <div class="swiper-slide"><img src="img/lb3.png" alt="" width="100%"></div>
                    <div class="swiper-slide"><img src="img/lb4.png" alt="" width="100%"></div>
                    <div class="swiper-slide"><img src="img/lb5.png" alt="" width="100%"></div>
                    <!-- <div class="swiper-slide"><img src="img/6.jpg" alt="" width="600"></div> -->

                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-scrollbar"></div>

            </div>

            <div class="row">
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/P1.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/P2.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/P3.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/p4.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/p5.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/P1.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/P2.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/P3.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/p4.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="thumbnail">
                        <a href="#">
                            <img src="img/p5.jpg" alt="242*200" style="width: 270px; height: 168px;">
                        </a>

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


        </div>

    </div>


</body>

</html>