我一直在网站上进行练习但是当我尝试在Wamp(目录:localhost:index.html)中打开index.html文件时,浏览器似乎没有加载除HTML文件之外的任何内容。
它与Atom在预览窗口中加载时的外观完全相同。
我已经仔细检查了index.html中-tag中CSS文件的链接。我似乎无法发现它有什么问题。还有什么可以依赖?
由于我不拥有任何域名,我将在此处发布代码,我会尽量减少空间。
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);
});
};
谢谢!
/西蒙