index_2.html 10.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/index_2.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_u8m5zjdi1u.css">
    <script src="js/base.js"></script>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/swiper.css">
    <style>
        .icon-caidan{
            font-size: 0.5rem;
        }
        .icon-magnifier{
            color: #999999;
        }
        .icon-bofangshipin{
            font-size: 0.38rem;

        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;

            border-right: 0.1rem;
        }
        .swiper-slide img{
            width: 100%;
            height: 100%;
            border-radius: 0.1rem;
        }
        .top_dot{
            width: 0.08rem;
            height: 0.08rem;
            background:rgba(166,16,16,1);
            border:1px solid rgba(255, 255, 255, 1);
            border-radius: 50%;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<script src="js/swiper.js"></script>
<body>
<div class="container">
    <div class="top">
        <!--顶部菜单-->
        <div class="top_t">
            <!--左-->
            <div class="top_t_left">
                <!--中文字-->
                <div class="top_t_left_text">

                </div>
                <!--菜单图标-->
                <div class="iconfont icon-caidan"></div>
            </div>
            <!--中-->
            <div class="top_t_middle">
                <img src="images/peke.png">
            </div>
            <!--右-->
            <div class="top_t_right">
                <!--铃声-->
                <div class="iconfont icon-10">
                    <div class="top_dot"></div>
                </div>
                <!--头像-->
                <div class="top_t_right_pic">
                    <img src="images/1.png">
                </div>
            </div>
        </div>
        <!--底部搜索-->
        <div class="top_d">
            <div class="iconfont icon-magnifier"></div>
            <input class="top_d_input" placeholder="搜索音乐/作品/风格">
        </div>
    </div>
    <!--轮播图-->
    <div class="banner">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/banner_1.png">
                </div>
                <div class="swiper-slide">
                    <img src="images/banner_2.png">
                </div>
                <div class="swiper-slide">
                    <img src="images/banner_3.png">
                </div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!--最新-->
    <div class="new">
        <div class="new_e">
            The latest
        </div>
        <div class="new_c">
            最新
        </div>
        <!--最新小视频窗口-->
        <div class="new_video_item">
            <div class="new_video">
                <div class="new_video_top">
                    <img src="images/peke.png">
                </div>
                <div class="new_video_bottom">
                    <div class="iconfont icon-bofangshipin"></div>
                    <div class="new_video_bottom_right">

                    </div>

                    <div class="new_video_bottom_name">
                        小猪佩奇
                        小猪佩奇
                        小猪佩奇
                    </div>
                </div>
            </div>
            <div class="new_video">
                <div class="new_video_top">
                    <img src="images/peke.png">
                </div>
                <div class="new_video_bottom">
                    <div class="iconfont icon-bofangshipin"></div>
                    <div class="new_video_bottom_right">

                    </div>

                    <div class="new_video_bottom_name">
                        小猪佩奇
                        小猪佩奇
                        小猪佩奇
                    </div>
                </div>
            </div>
        </div>
        <!--最新打视频窗口-->
        <div class="new_video_big">
            <div class="new_video_big_pic">
                <img src="images/peke.png">
            </div>
            <div class="new_video_big_bottom">
                <div class="iconfont icon-bofangshipin"></div>
                <div class="new_video_bottom_right">

                </div>
                <div class="new_video_big_name_text">
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                    小猪佩奇
                </div>
            </div>
        </div>

    </div>
    <!--视频-->
    <div class="video">
        <div class="new_e">
            Video
        </div>
        <div class="new_c">
            视频
        </div>
        <div class="item_pic">
            <!--图片盒子-->
            <div class="pic_box">
                <!--图片-->
                <div class="pic_box_top">
                    <img src="images/peke.png">
                </div>
                <!--文字-->
                <div class="pic_box_bottom">
                    某某主题
                </div>
            </div>
            <div class="pic_box">
                <!--图片-->
                <div class="pic_box_top">
                    <img src="images/peke.png">
                </div>
                <!--文字-->
                <div class="pic_box_bottom">
                    某某主题
                </div>
            </div>
        </div>
        <!--更多-->
        <div class="video_more">
            MORE
        </div>
    </div>
    <!--文章-->
    <div class="title">
        <div class="new_e marin_top">
            Article
        </div>
        <div class="new_c">
            文章
        </div>
        <div class="item_pic">
            <!--图片盒子-->
            <div class="pic_box">
                <!--图片-->
                <div class="pic_box_top">
                    <img src="images/peke.png">
                </div>
                <!--文字-->
                <div class="pic_box_bottom between">
                    <p>某某主题</p>
                    <p>2019.1.12</p>
                </div>
            </div>
            <div class="pic_box">
                <!--图片-->
                <div class="pic_box_top">
                    <img src="images/peke.png">
                </div>
                <!--文字-->
                <div class="pic_box_bottom between">
                    <p>某某主题</p>
                    <p>2019.1.12</p>
                </div>
            </div>
        </div>
        <!--更多-->
        <div class="video_more">
            MORE
        </div>
    </div>
    <!--演出-->
    <div class="show">
        <div class="new_e marin_top">
            Performance
        </div>
        <div class="new_c">
            演出
        </div>
        <!--演出时间筛选-->
        <div class="show_time">
            <!--年-->
            <div class="show_time_year">

            </div>
            <!--月-->
            <div class="show_time_month">

            </div>
        </div>
        <div class="item_pic">
            <!--图片盒子-->
            <div class="pic_box">
                <!--图片-->
                <div class="pic_box_top">
                    <img src="images/peke.png">
                </div>
                <!--文字-->
                <div class="pic_box_bottom between">
                    <p>某某主题</p>
                    <p>2019.1.12</p>
                </div>
            </div>
            <div class="pic_box">
                <!--图片-->
                <div class="pic_box_top">
                    <img src="images/peke.png">
                </div>
                <!--文字-->
                <div class="pic_box_bottom between">
                    <p>某某主题</p>
                    <p>2019.1.12</p>
                </div>
            </div>
        </div>
        <!--更多-->
        <div class="video_more">
            MORE
        </div>
    </div>

    <!--动态层-->
    <div class="mask">
        <div class="pop">
            <div class="pop_text pop_color">
                精选
            </div>
            <div class="pop_text">
                动态
            </div>
            <div class="pop_text">
                百科
            </div>
        </div>
        <!--1111-->
    </div>
</div>
</body>
<script>
    var swiper = new Swiper('.swiper-container',{

        loop: true, // 循环模式选项
        // autoplay: {
        //     delay: 1000,
        //     disableOnInteraction: false,
        // },

        pagination: {
            el: '.swiper-pagination',
        },
    });
</script>
</html>