master

分支 (1)

管理

管理

master

photoShow
/
index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
    <link href="./css/Nti视频.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <script src="./jQuery/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script>
        $('.carousel').carousel({
            interval: 2000
        })
    </script>
    <title>Document</title>
</head>

<body>
    <div class="contianer">
        <div class="row nav">
            <div class="col-lg-3 col-md-2 col-xs-1 col-sm-2 logo">
                <img src="./images/logo.png" alt="">
            </div>
            <div class="col-lg-6 col-md-8 col-xs-10 col-sm-8 nav-content">
                <div class="content-detail">
                    <ul>
                        <li>
                            <a href="#">首页</a>
                        </li>
                        <li>
                            <a href="#">Nti视频</a>
                        </li>
                        <li>
                            <a href="#">Nti文章</a>
                        </li>
                        <li>
                            <a href="#">春卷专栏</a>
                        </li>
                        <li>
                            <a href="#">KOL专栏</a>
                        </li>
                        <li>
                            <a href="#">论坛</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-2 col-xs-1 col-sm-2 icons">
                <a href="#"><img src="./images/wx-icon.png" alt="" class="icon"></a>
                <a href="#"><img src="./images/wb-icon.png" alt="" class="icon"></a>
                <a href="#"><img src="./images/dy-icon.png" alt="" class="icon"></a>
                </ul>
            </div>

        </div>
        <!-- <div class="post">
            <img src="./images/t-post.png" alt="">
        </div> -->
        <div id="myCarousel" class="post carousel slide">
            <!--设置轮播器区域样式，设置轮播器滚动样式-->
            <ol class="carousel-indicators">
                <!--设置轮播器列表区域样式，就是小圆点区域样式-->

                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <!--设置当前列表首选-->
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>

            <div class="carousel-inner">
                <!--设置轮播器图片区域-->
                <div class="item active tp1">
                    <!--设置轮播器图片样式-->
                    <a href="#"><img src="./images/t-post.png" alt="第一张"></a>
                </div>
                <div class="item tp2">
                    <a href="#"><img src="./images/post1.png" alt="第二张"></a>
                </div>
                <div class="item tp3">
                    <a href="#"><img src="./images/t-post.png" alt="第三张"></a>
                </div>
                <div class="item tp4">
                    <a href="#"><img src="./images/post1.png" alt="第三张"></a>
                </div>
            </div>

            <!--设置轮播器箭头区域-->
            <a href="#myCarousel" data-slide="prev" class="carousel-control left">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>

            <a href="#myCarousel" data-slide="next" class="carousel-control right">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

        </div>
        <div class="nti-wz">
            <div class="ntiwz-title">
                <img src="./images/NTI.png" alt=""><span>文章</span>
                <a href=""><img src="./images/btn-vm.png" alt="" class="vm"></a>
            </div>
            <div class="ntiwz-content">
                <ul>
                    <li>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>访谈|沉睡的森林与Instagram风格</p>
                                </div>
                            </div>
                        </a>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic2.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>星芒小科普</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic2.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>星芒小科普</p>
                                </div>
                            </div>
                        </a>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>访谈|沉睡的森林与Instagram风格</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>访谈|沉睡的森林与Instagram风格</p>
                                </div>
                            </div>
                        </a>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic2.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>星芒小科普</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic2.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>星芒小科普</p>
                                </div>
                            </div>
                        </a>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>访谈|沉睡的森林与Instagram风格</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>访谈|沉睡的森林与Instagram风格</p>
                                </div>
                            </div>
                        </a>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic2.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>星芒小科普</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic2.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>星芒小科普</p>
                                </div>
                            </div>
                        </a>
                        <a href="#">
                            <div class="ntiwz-priview-img">
                                <img src="./images/pic.png" alt="">
                                <div class="ntiwz-priview-title">
                                    <p>访谈|沉睡的森林与Instagram风格</p>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="post">
                <img src="./images/post1.png" alt="">
            </div>
        </div>
        <div class="nti-sp">
            <div class="ntisp-title">
                <img src="./images/NTI.png" alt=""><span>视频</span>
                <a href=""><img src="./images/btn-vm.png" alt="" class="vm"></a>
            </div>
            <div class="ntisp-content">
                <div class="ntisp-detail">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic5.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>尼康Z 系列微单2.0固件 “AE跟随” 性能实测</p>
                            </a>
                        </li>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="b-post">
                <img src="./images/post1.png" alt="">
            </div>
        </div>
        <div class="Cj">
            <div class="Cj-title">
                <img src="./images/Cj.png" alt=""><span>春卷专栏</span>
            </div>
            <div class="Cj-content">
                <div class="Cj-sptitle">
                    <div class="Cj-sptitle-content">
                        <span>视频</span>
                    </div>
                </div>
                <div class="sp-content">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic3.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>春卷带你看 CP+2019 (之三)</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic3.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>春卷带你看 CP+2019 (之三)</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic3.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>春卷带你看 CP+2019 (之三)</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="Ntisp-img">
                                    <img src="./images/pic3.png" alt="">
                                    <img src="./images/Nti视频/play.png" alt="" class="play-btn">
                                </div>
                                <p>春卷带你看 CP+2019 (之三)</p>
                            </a>
                        </li>
                    </ul>
                    <div class="Cj-vm">
                        <a href=""><img src="./images/btn-vm.png" alt=""></a>
                    </div>
                </div>
                <div class="Cj-wztitile">
                    <div class="Cj-wztitile-content">
                        <span>文章</span>
                    </div>
                </div>
                <div class="wz-content">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="./images/pic6.png" alt="">
                                <div class="Cj-wz-title">
                                    <p>你以为富士instax miniLipaly只是增加了一个 “ 声音 ” 而已吗？</p>
                                </div>
                                <div class="Cj-wz-detail">
                                    <p>今天下午，富士中国在杭州嘉里中心举行了一次发布会，推出“数模”一次成像相机instax mini LiPlay。</p>
                                    <span>2019.06.21</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/pic6.png" alt="">
                                <div class="Cj-wz-title">
                                    <p>你以为富士instax miniLipaly只是增加了一个 “ 声音 ” 而已吗？</p>
                                </div>
                                <div class="Cj-wz-detail">
                                    <p>今天下午，富士中国在杭州嘉里中心举行了一次发布会，推出“数模”一次成像相机instax mini LiPlay。</p>
                                    <span>2019.06.21</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/pic6.png" alt="">
                                <div class="Cj-wz-title">
                                    <p>你以为富士instax miniLipaly只是增加了一个 “ 声音 ” 而已吗？</p>
                                </div>
                                <div class="Cj-wz-detail">
                                    <p>今天下午，富士中国在杭州嘉里中心举行了一次发布会，推出“数模”一次成像相机instax mini LiPlay。</p>
                                    <span>2019.06.21</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/pic6.png" alt="">
                                <div class="Cj-wz-title">
                                    <p>你以为富士instax miniLipaly只是增加了一个 “ 声音 ” 而已吗？</p>
                                </div>
                                <div class="Cj-wz-detail">
                                    <p>今天下午，富士中国在杭州嘉里中心举行了一次发布会，推出“数模”一次成像相机instax mini LiPlay。</p>
                                    <span>2019.06.21</span>
                                </div>
                            </a>
                        </li>
                    </ul>

                </div>
                <div class="Cj-vm white">
                    <a href=""><img src="./images/btn-vm.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>

    <div class="foot">
        <div class="foot-logo">
            <img src="./images/b-logo.png" alt="">
            <p>影像新势力</p>
        </div>

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

</html>