Question

我正在使用其路径

时，我的HTML文件工作正常

@media (orientation: portrait) { .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; width:100%; height:auto; } } @media (orientation: landscape) { .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; width:100%; height:96vh; } }运行它，但我正在通过localhost

运行它

file:///C:/xampp/htdocs/resume/dashboard/ads.html 来自同一地点，它的一些功能如：

（模态滚动和js代码）不起作用。

请帮忙！

ads.html

http://localhost/resume/dashboard/ads.html

bootstrap.min.css

   <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
    <link rel="icon" type="image/png" sizes="96x96" href="../img/logo/kk.png">
    <link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>Ads</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />


    <!-- Bootstrap core CSS     -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Animation library for notifications   -->
    <link href="assets/css/animate.min.css" rel="stylesheet"/>

    <!--  Paper Dashboard core CSS    -->
    <link href="assets/css/paper-dashboard.css" rel="stylesheet"/>


    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="assets/css/demo.css" rel="stylesheet" />


    <!--  Fonts and icons     -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
    <link href="assets/css/themify-icons.css" rel="stylesheet">

</head>
<body>



<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-1">
  Launch Modal 1
</button>  

<div class="modal fade" id="modal-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Modal 1</p>

  <a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next ></a>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->  



  <!-- #modal 2 -->
<div class="modal fade" id="modal-2">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">

  <a href="#modal-1" data-toggle="modal" data-dismiss="modal">< Previous</a>
        <p>Modal .Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla..2</p>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->  




</body>
    <script></script>
    <!--   Core JS Files   -->
    <script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>

    <!--  Checkbox, Radio & Switch Plugins -->
    <script src="assets/js/bootstrap-checkbox-radio.js"></script>

    <!--  Charts Plugin -->
    <script src="assets/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="assets/js/bootstrap-notify.js"></script>

    <!--  Google Maps Plugin    -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

    <!-- Paper Dashboard Core javascript and methods for Demo purpose -->
    <script src="assets/js/paper-dashboard.js"></script>

    <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
    <script src="assets/js/demo.js"></script>



</html>

在这部分代码中，第二个模态不是滚动。

Answer 1

最可能的问题是您使用的路径不正确。当您从基于文件移动到基于http的根/文件夹是您的webroot时，当使用file：// approach时，根文件夹是托管文件的驱动器的根目录。

Answer 2

当网站以一种形式而非另一种形式工作时，通常是由于以下两种情况之一：

指向各种资源的路径是固定的，而不是相对的。例如：也许你的HTML在一个名为C：/xampp/htdocs/resume/dashboard/javascript/myjs.js的路径中寻找一个Java Script文件，而不是像./javascript/myjs.js那样的相对路径，或许你是已经使用相对路径，但相对路径的起始目录已关闭。通常，您会注意到未显示的图像或未加载的Java Script文件。
当您作为localhost运行时，您位于localhost域中，如果您向其他域发出请求，可能是出于安全原因而被停止。如果您在浏览器中打开开发人员控制台，您会发现这些类型的错误，您会看到错误，说明出于安全原因不允许加载资源或阻止跨域请求。

如果只有一些Java脚本无法正常工作，那么我要看看这些javascript共享的属性...如果他们共享路径需要特别注意验证这些，或者如果他们需要jQuery那么你可能需要从Web加载JQuery而不是在本地加载它。

要开始诊断，我建议您在浏览器中打开开发者控制台（Chrome：右键单击页面并选择＆＃34;检查＆＃34;然后查看在控制台选项卡中）查看它显示的错误。（通常是一个黄色的三角形或红色停止符号后跟一个半描述错误）它应该告诉你什么没有加载，为什么从那里开始向后工作。

如果您的路径准确且仍然卡住，您可以查看C：\ xampp \ apache \ conf \ httpd.conf中的DocumentRoot设置，并确保将其设置为正确的起始目录，但在改变配置之前先检查你的错误。改变配置应该是最后的手段......如果你改变它们，请备份原件！

Answer 3

有时，只有CSS文件被缓存，对于新的Web开发人员来说这是一个非常常见的问题。因此，要摆脱它，只需从Web浏览器中清除缓存，或者只需按cmd + shift + R.如果您认为自己编写了正确的CSS，但在Web浏览器中看不到它。

我的网站的一些功能不适用于localhost

3 个答案: