移动端小案例（黑马面面）

最新推荐文章于 2025-03-08 10:00:00 发布

小白在哪呢

最新推荐文章于 2025-03-08 10:00:00 发布

阅读量367

点赞数

分类专栏： Vue 文章标签：面试前端职场和发展

本文链接：https://blog.youkuaiyun.com/qq_41473691/article/details/124727510

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

</section>
<div class="content">
    <div class="hd">
        <h1 class="left">就业指导</h1>
        <a href="" class="right">更多>></a>
    </div>
    <div class="bd">
        <!-- Swiper -->
        <div class="swiper-container get_job_fo">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#"> <img src="./image/ldh.jpg"></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="./image/2.jpg">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="./image/3.jpg">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#"> <img src="./image/pic.png">
                        <p>老师教你面试技巧</p>
                    </a>

                </div>
            </div>
            <!-- Add Arrows -->
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="cd">
        <div class="hd">
            <h1 class="left">充电学习</h1>
            <a href="" class="right">更多>></a>
        </div>
        <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href=""><img src="./image/pic1.png">
                        <p>说地道英语，告别中式英语</p>
                        <span>156</span>人学习
                    </a>

                </div>
                <div class="swiper-slide">
                    <a href=""><img src="./image/pic1.png">
                        <p>说地道英语，告别中式英语</p>
                        <span>156</span>人学习
                    </a>

                </div>
                <div class="swiper-slide">
                    <a href=""><img src="./image/pic1.png">
                        <p>说地道英语，告别中式英语</p>
                        <span>156</span>人学习
                    </a>

                </div>
                <div class="swiper-slide">
                    <a href=""><img src="./image/pic1.png">
                        <p>说地道英语，告别中式英语</p>
                        <span>156</span>人学习
                    </a>

                </div>
                <div class="swiper-slide">
                    <a href=""><img src="./image/pic1.png">
                        <p>说地道英语，告别中式英语</p>
                        <span>156</span>人学习
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_img">
            <span class="fo_img"> </span>
            首页
        </div>
        <div class="footer_img">
            <span class="fo_img"> </span>
            首页
        </div>
        <div class="footer_img">
            <span class="fo_img"> </span>
            首页
        </div>
        <div class="footer_img">
            <span class="fo_img"> </span>
            首页
        </div>
    </div>

    <script href="js/flexible.js"></script>
    <!-- Swiper JS -->
    <script src="./js/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        (function () {
            var swiper = new Swiper('.swiper-container', {
                // 个数
                slidesPerView: 3,
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        })();

        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 2,
            spaceBetween: 10,
        });
    </script>

素材获取：黑马前端