暑期学习1-复习HTML的相关知识

这周复习了HTML的相关知识,对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/swiper.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 顶部------->
    <div class='header'>
        <div class='container'>
            <a href="index.html" class='active'>首页</a>
            <a href="movement.html">乐章</a>
        </div>
    </div>
    <!-- /顶部------->

    <!-- 轮播 ------>
    <div class="banner">
        <div class="swiper-container bannerSwiper" id='bannerSwiper'>
            <div class="swiper-wrapper">
                <!-- <div class="swiper-slide">
                    <img src="images/banner1.jpg" alt="">
                    <div class="wrapper" data-swiper-parallax="-1600" data-swiper-parallax-duration="1000">
                        <h3>标题:</h3>
                        <p>呢多付或多付或或多付或付过或付过或过或过或过或或或或或过或过或过过或过或所所绿绿绿无无绿</p>
                    </div>
                </div> -->

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

    </div>
    <!-- /轮播 ----->

    <!-- 乐章 ----->
    <div class='container'>
        <div class='movement'>
            <p class='title'>乐章</p>
            <!-- swiper-contianer -->
            <div class="swiper-container movementSwiper">
                <div class="swiper-wrapper">
                    <!-- 
                    <div class="swiper-slide">
                        <ul class="list">
                            <li>
                                <img src="images/dog.jpg" alt="">
                                <div class='content'>
                                    <div class='name'>标题</div>
                                    <div class='info'>决胜巅峰哈哈哈收到货地方好地方回复回复还大结局分和导航</div>                                 
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                 -->
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>

        </div>

    </div>


    <!-- /乐章 ----->
    <!-- 乐趣 ----->
    <div class='container'>
        <div class='movement yuequ'>
            <p class='title'>乐趣</p>
            <!-- swiper-contianer -->

        </div>      

    </div>
    <!-- /乐趣  ----->






    <script src='js/jquery.min.js'></script>
    <script src='js/swiper.min.js'></script>
    <script src='js/index.js'> </script>

</body>

</html>

 

posted @ 2021-07-10 15:36  yasai  阅读(39)  评论(0编辑  收藏  举报