Wamp没有加载CSS或JS(?)

时间:2015-07-20 17:40:17

标签: javascript jquery html css

我一直在网站上进行练习但是当我尝试在Wamp(目录:localhost:index.html)中打开index.html文件时,浏览器似乎没有加载除HTML文件之外的任何内容。

它与Atom在预览窗口中加载时的外观完全相同。

我已经仔细检查了index.html中-tag中CSS文件的链接。我似乎无法发现它有什么问题。还有什么可以依赖?

由于我不拥有任何域名,我将在此处发布代码,我会尽量减少空间。

JS FIDDLE

HTML:

<div class="menu">

  <!--Close icon for Menu-->
  <div class"icon-close">
  Close
  </div>
<!--Menu-->
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">123</a></li>
  </ul>
</div>
<!--Main Body-->
<div class="container">

 <!--Icon Menu-->
  <div class="icon-menu">
  Menu
  </div>
</div>

CSS:

/*Initial Body*/
body {
  left: 0;
  right: 0;
  overflow: hidden;
  position: relative;
}
/*Basic Styling*/
.container {
  background-image: url('http://s3.amazonaws.com/
  codecademy-content/courses/ltp2/img/uber/bg.png');
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/*Menu Elements Styling*/
.menu {
  background-color: #987;
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
}
.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin:  0;
  padding: 0;
}
.menu li {
  border-bottom: 1px solid #636366;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left:  20px;
  padding-top: 3px;
}
.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
 text-transform: uppercase;
}
.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}
.icon-menu {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}
/*Not added "icon-menu i" properties*/

JS:

var main = function() {
  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);
    $('.body').animate({
      left: "285px"
    }, 200);
    });
    $('.icon-close').click(function() {
      $('.menu')animate({
        left: "-285px"
      }, 200);
      $('.body').animate({
        left: "0px"
      }, 200);
      });
};

谢谢!

/西蒙

0 个答案:

没有答案