Bootstrap CSS菜单样式和css样式不参与索引以外的页面

时间：2016-07-27 03:07:42

标签： html css twitter-bootstrap

在索引上所有FONT STYLE和COLOR以及“FLIPPING”菜单工作正常，但是在页面文件夹中的7775.html上，菜单没有翻转，字体颜色没有被选中，但它在几周前工作了。

我很困惑为什么这个工作在index.html上，而不是在我的其他页面上。

如果有人能够发现我正在做的事情，我会非常感激，因为我已经看了太长时间了...提前谢谢你。

INDEX.HTML：

    <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml">

          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1">

          <link title="no title" type="text/css"     href="css/main.css"rel="stylesheet" media="screen" charset="utf-8">
          <link title="no title" type="text/css" href="css/cssmenu.css" rel="stylesheet" media="screen" charset="utf-8">
          <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
          <script type="text/javascript" src="js/cssmenu.js"></script>
          <script type="text/javascript" src="js/main.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>

          <!-- Latest compiled and minified CSS -->
          <link rel="stylesheet" h    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

          <!-- Optional theme -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
          <!--custom.css -->
          <link rel="stylesheet" type="text/css" href="css/custom.css">

          <!-- Latest compiled and minified JavaScript -->
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

          <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Cormorant+Garamond">
          <style>
          body {
            font-family: 'Cormorant+Garamond', serif;
            font-size: 48px;
              }
        </style>


        </head>

        <body>

        <div class="container">
        <div class="jumbotron">
`        <div class="col-sm-8">
           <h2>Works Great in blue as I want</h2>
           <h4>Showing the way I want it with blue font</h4>  
        </div>
       </div>
      </div>

     <div class="container">
       <div id="cssmenu" class="dropdown">
        <ul>
         <li class="active"><a href="/index.html">Home</a></li>
         <li><a href="http://www.fabulousprofessional.com">Northern Virginia Property Search</a></li>
         <li><a href="pages\7775.html">Featured Properties</a></li>
         <li><a href="pages\buyerssellers.html">Buyer and Seller Info</a>    </li>
       </ul>
      </div>
     </div>

**** ON文件../pages/7775.html：不在标题元素和菜单中选择颜色仅显示为有序列表而不是在文本背景的样式和颜色中翻转（3D）希望在index.html中。困惑，因为它最近工作**** 

<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml">

    

<link title="no title" type="text/css" href="css/main.css" rel="stylesheet" media="screen" charset="utf-8">
<link title="no title" type="text/css" href="css/cssmenu.css" rel="stylesheet" media="screen" charset="utf-8">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/cssmenu.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">   </script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  <!--custom.css -->
  <link rel="stylesheet" type="text/css" href="css/custom.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

  <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Cormorant+Garamond">

  <style>
    body {
      font-family: 'Cormorant+Garamond', serif;
      font-size: 14px;
       }
  </style>
</head>

<body>

<div class="container">
  <div class="jumbotron">
   <div class="col-sm-8">
    <h2>NOT PICKING UP COLOR</h2>
    <h4>NOT PICKING UP COLOR</h4>
   </div>   
 </div>
</div>

  <div class="container">
     <div id="cssmenu" class="dropdown">
       <ul>
        <li class="active"><a href="/index.html">Home</a></li>
    <li><a href="http://www.eblockhomes.com">Northern Virginia Property Search</a></li>
    <li><a href="pages\7775.html">Featured Properties</a></li>
   <li><a href="pages\buyerssellers.html">Buyer and Seller Info</a></li>
  </ul>
</div>

的＆GT; CSSStyleSHeets - main.css如下 

.jumbotron {
  overflow: auto;
  margin-bottom: 0px !important;
  color: inherit;
 }
.jumbotron .row img {
  border: 0 none;
  display: inline-block;
  vertical-align: middle;
}

.jumbotron #name {
  width: 100%;
  height: 145px;
  background-color: #ffffff;
}


@media screen and (max-width: 768px) {
  .jumbotron #name {
    width: 100%;
    height: 245px;
    padding-top: 60px;
    padding-bottom: 30px;
    padding-right: 40px;
    padding-left: 40px;
}

.button #singlebutton.btn.btn-primary{
  background-image: #E9ECEF;
}

.item.active {
  max-height: 600px;
  overflow: hidden;
}

.item .active img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

ul {
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.form-horizontal{
  float: right !important;
  margin-top: 10px;
}

.lead{
  margin-top: 5px;
}
@media screen and (min-width: 790px) {
  ul {
   display: inline-flex !important;
  }

.link {
  color:#ffffff;
}

h2 {
  color: #4d79ff;
}

div {
  color: #4d79ff;
}
body {
    margin-top: 200px;
}
p {
  color: black;
  font-size: 12pt;
}

custom.css如下： 

.jumbotron {
  background-color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
}
.page-header {
  height: 35px;
  width: 100%;
  background-color: #337ab7;
  padding-left: 40px;
  padding-top: 1px;
}
.col-sm-8 {
  top: 0;
  bottom: 0;
  left: 120px;
  right: 0;
}
 .col-sm-4 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0px;
}
.jumbotron.container {
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 0px;
}
.row {
  margin-left: 0;
  margin-right: 0;
}

.css-selector {
  font-family: 'Cormorant Garamond', serif;
}

img {
    float: right;
    margin: 0 0 10px 10px;
}

cssmenu.css如下： 

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu {
  width: auto;
  font-family: sans-serif;
  line-height: 1;

}

#cssmenu > ul {
  background: #4d79ff;
}

#cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}

#cssmenu.align-right > ul > li {
  float: right;
}

#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #4d79ff;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#cssmenu > ul > li.active > a {
  color: #dff2fa;
}

#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #1c799c;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}

#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #1c799c;
  background: #19799f;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}

#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #4d79ff;
}

   #cssmenu.small-screen {
      width: 100%;
    }
    #cssmenu.small-screen > ul,
    #cssmenu.small-screen.align-center > ul {
      width: 100%;
      text-align: left;
    }

#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}

#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}

#cssmenu.small-screen > ul > li > a::before {
  display: none;
}

#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #4d79ff;
}

#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}

    #cssmenu.small-screen #menu-button.menu-opened:after {
      border-top: 2px solid #81D9FB;
      border-bottom: 2px solid #81D9FB;
    }

    #cssmenu.small-screen #menu-button:before {
      content: "";
      position: absolute;
      right: 20px;
      top: 27px;
       display: block;
      width: 22px;
      height: 2px;
      background: #ffffff;
    }

    #cssmenu.small-screen #menu-button.menu-opened:before {
      background: #81D9FB;
    }

#cssmenu.button.btn.btn-sm {
  border-top: 2px solid #45a7cc;
  border-bottom: 2px solid #45a7cc;
}

现在这里是菜单的JAVASCRIPT：

function($) {

  $.fn.menumaker = function(options) {

    var cssmenu = $(this),
  settings = $.extend({
    title: "Menu",
    format: "dropdown",
    breakpoint: 768,
    sticky: false
  }, options);

return this.each(function() {
  cssmenu.find('li ul').parent().addClass('has-sub');
  if (settings.format != 'select') {
    cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
    $(this).find("#menu-button").on('click', function() {
      $(this).toggleClass('menu-opened');
      var mainmenu = $(this).next('ul');
      if (mainmenu.hasClass('open')) {
        mainmenu.hide().removeClass('open');
      } else {
        mainmenu.show().addClass('open');
        if (settings.format === "dropdown") {
          mainmenu.find('ul').show();
        }
      }
    });

    multiTg = function() {
      cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
      cssmenu.find('.submenu-button').on('click', function() {
        $(this).toggleClass('submenu-opened');
        if ($(this).siblings('ul').hasClass('open')) {
          $(this).siblings('ul').removeClass('open').hide();
        } else {
          $(this).siblings('ul').addClass('open').show();
        }
      });
    };

    if (settings.format === 'multitoggle') multiTg();
    else cssmenu.addClass('dropdown');
  } else if (settings.format === 'select') {
    cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
    var selectList = cssmenu.find('select');
    selectList.append('<option>' + settings.title + '</option>', {
      "selected": "selected",
      "value": ""
    });
    cssmenu.find('a').each(function() {
      var element = $(this),
        indentation = "";
      for (i = 1; i < element.parents('ul').length; i++) {
        indentation += '-';
      }
      selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
    });
    selectList.on('change', function() {
      window.location = $(this).find("option:selected").val();
    });
  }

  if (settings.sticky === true) cssmenu.css('position', 'fixed');

  resizeFix = function() {
    if ($(window).width() > settings.breakpoint) {
      cssmenu.find('ul').show();
      cssmenu.removeClass('small-screen');
      if (settings.format === 'select') {
        cssmenu.find('select').hide();
      } else {
        cssmenu.find("#menu-button").removeClass("menu-opened");
      }
    }

    if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
      cssmenu.find('ul').hide().removeClass('open');
      cssmenu.addClass('small-screen');
      if (settings.format === 'select') {
        cssmenu.find('select').show();
      }
    }
  };
  resizeFix();
  return $(window).on('resize', resizeFix);

});


};
})(jQuery);

(function($) {
  $(document).ready(function() {
$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });

  $("#cssmenu a").each(function() {
    var linkTitle = $(this).text();
    $(this).attr('data-title', linkTitle);
  });
});

  });
})(jQuery);

1 个答案:

答案 0 :(得分：1)

如果我正确理解您的文件结构，它看起来像这样

/
index.html
css/ FOLDER
    main.css
    cssmenu.css
js/ FOLDER
    cssmenu.js
    main.js
pages/ FOLDER
    7775.html

在这种情况下，index.html文件可以找到您的CSS和JavaScript文件，因为您的文件路径为css/main.css和js/cssmenu.js等。

但是，因为您的7775.html文件位于pages文件夹中且文件路径相同，所以它实际上要查找的是pages文件夹中的JS和CSS文件夹

要使7775.html页面正常工作，您只需先将../添加到文件路径，即可查看父目录。

此：

<link type="text/css" href="css/main.css" rel="stylesheet">

成为这个：

<link type="text/css" href="../css/main.css" rel="stylesheet">

而且：

<script type="text/javascript" src="js/cssmenu.js"></script>

成为这个：

<script type="text/javascript" src="../js/cssmenu.js"></script>

等等......

（主引导样式的链接等仍然有效，因为这些链接有一个以http://开头的“绝对”文件路径）

相关问题
最新问题