Question

我的首页上有一个倒计时时钟，当我离线查看html文件但在我的服务器上它无法正常显示时，它显示正常。在服务器上，它将时钟显示为分散在页面上的随机数。这是我的index.html。时钟是名为dw_clock的div。在英雄部分，我尝试更改标题中样式表的位置。我也尝试将CSS放入html代码中，但我仍有问题。我制作了一个只有两个样式表的文件，看看Google Chrome是否会检查元素＆＃39;甚至可以看到Flipclock.css，但它似乎甚至看不到它，只是正常的style.css。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />


        <!--
        =================================
        STYLESHEETS
        =================================
        -->

        <!-- BOOTSTRAP -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />

        <!-- WEB FONTS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" />

        <!-- ICON FONTS -->
        <link rel="stylesheet" href="css/font-awesome.min.css" />
        <link rel="stylesheet" href="css/simple-line-icons.min.css" />



        <!-- OTHER STYLES -->
        <link rel="stylesheet" href="css/animate.min.css" />
        <link rel="stylesheet" href="css/owl.carousel.min.css" />
        <link rel="stylesheet" href="css/nivo-lightbox.min.css" />
        <link rel="stylesheet" href="css/nivo-lightbox/default.min.css" />

        <!-- MAIN STYLES -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/FlipClock.css">
        <!--[if lt IE 9]> 



    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 



        <![endif]-->  


        <!-- COLORS -->
        <link id="color-css" rel="stylesheet" href="css/colors/green.css" />
        <!-- <link id="color-css" rel="stylesheet" href="css/colors/turquoise.css" /> -->
        <!-- <link id="color-css" rel="stylesheet" href="css/colors/blue.css" /> -->
        <!-- <link id="color-css" rel="stylesheet" href="css/colors/purple.css" /> -->
        <!-- <link id="color-css" rel="stylesheet" href="css/colors/pink.css" /> -->
        <!-- <link id="color-css" rel="stylesheet" href="css/colors/red.css" /> -->
        <!-- <link id="color-css" rel="stylesheet" href="css/colors/orange.css" /> -->
        <!-- <link id="color-css" rel="stylesheet" href="css/colors/yellow.css" /> -->

        <!-- JQUERY -->
        <script src="js/jquery-1.11.1.min.js"></script>

    </head>

    <body class="with-preloader">

        <!--
        =================================
        PRELOADER
        =================================
        -->
        <div id="preloader" class="preloader">
            <div class="preloader-inner">
                <span class="preloader-logo">
                    <img src="images/logos/preloader-logo.png" alt="EOS" />
                    <strong>Loading</strong>
                </span>
            </div>
        </div>

        <div id="document" class="document">


            <!--
            =================================
            HERO SECTION
            =================================
            -->
            <section id="home" class="hero-section hero-layout-2 section parallax-background" data-stellar-background-ratio="0.4">

                <!-- BACKGROUND OVERLAY -->
                <div class="black-background-overlay"></div>

                <div class="container">

                    <div class="hero-content">

                        <!-- HERO TEXT -->
                        <div class="hero-text">

                            <!-- LOGO -->
                            <div class="hero-logo wow fadeIn" data-wow-duration="1s">
                                <img src="images/logos/hero-logo.png" alt="EOS - App Landing Page Template" />
                            </div>

                            <!-- TAGLINE -->
                            <h1 class="hero-title wow fadeInUp" data-wow-duration="1s">COMING SOON</h1>



                    <div class="dw_clock wow fadeInUp" data-wow-duration="1s"></div> 











                            <!-- WATCH THE VIDEO -->
                            <a href="#subscribe" class="hero-watch-video-link anchor-link wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s"><i class="fa fa-plus"></i>Notify Me When Rhevon Is Released</a>

                        </div>
                    </div>

                </div>
            </section>





            <!--
            =================================
            FOOTER SECTION
            =================================
            -->
            <footer class="footer-section section" section id="contactus">



                    <!-- COPYRIGHT -->
                    <div class="copyright">Copyright &copy;   . All rights reserved</div>
                </div>
            </footer>

        </div>

        <!--
        =================================
        JAVASCRIPTS
        =================================
        -->
            <script src="js/Flipclock.min.js"></script>

        <script src="js/bootstrap.min.js"></script>
        <script src="js/retina.min.js"></script>
        <script src="js/smoothscroll.min.js"></script>
        <script src="js/wow.min.js"></script>
        <script src="js/jquery.nav.min.js"></script>
        <script src="js/nivo-lightbox.min.js"></script>
        <script src="js/jquery.stellar.min.js"></script>
        <script src="js/owl.carousel.min.js"></script>
        <script src="js/script.js"></script>

    </body>

</html>

有人可以请帮助我，如果需要我可以上传style.css文件和Flipclock.css文件（即提供时钟所需的所有样式的文件）我已经取出了大部分网站代码由于stackoverflow不允许我发布，因为我有太多的代码，我也删除了标题，因为我不认为问题来自那里，我也没有包括元数据，页面标题或favicon < / p>

Answer 1

它是一个文件框。

将文件名更改为http://www.rhevon.com/css/Flipclock.css

这将有效。

正如我所提到的，Linux上的文件名区分大小写，这就是您在本地Windows环境中使用它的原因。您的文件名是＆＃39; Flipclock.css＆＃39;不是＆＃39; FlipClock.css＆＃39;。

如果有帮助，请不要忘记将其标记为有效答案。

倒计时时钟可以正常离线工作但不能在线工作

1 个答案: