【发布时间】：2017-05-14 07:05:46
【问题描述】：
首先我想告诉你们，我对网页设计非常陌生，所以我正在试验，我真的很想学习如何在页面加载之前创建一个带有 gif 的预加载器。我试过了，但每次它要么不断显示预加载器而不是实际站点，要么根本不显示预加载器。我不确定我是否没有下载某些东西，或者它是我正在使用的记事本++的程序，但我不知道我做错了什么。我按照每个示例进行操作，但没有任何效果。这是我的html文件
<html>
<head>
<meta charset = "uft-8">
<title>Tester</title>
<link href =" test.css" type = "text/css" rel = "stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type = "text/javascript"></script>
<script>
$(document).ready(function() {
$(window).load(function() {
preloaderFadeOutTime = 500;
function hidepreloader() {
var preloader = $('.tester');
preloader.fadeOut(preloaderFadeOutTime);
}
hidepreloader();
});
});
</script>
</head>
<body>
<div class = "tester"></div>
<div class = "overlay"></div>
</div>
<div class = "wrapper">
<div class = "heading">
<h1> My page</h1>
</div>
<div class = "navigation">navigation</div>
<div class = " content">main content</div>
<div class = "sidebar">addition</div>
<div class = "footer">this is an experiment</div>
</div>
</body>
</html>
这是我的 CSS 文件
#tester {
height: 100%;
width: 100%;
background: rgba(0,0,0,.8);
position: fixed;
left: 0;
top: 0;
}
#overlay {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../downloads/Giphy.gif) 50% 50% no-repeat rgb(249,249,249);
}
.wrapper {
background: #000000;
width: 600px;
margin: 0 auto 0 auto;
}
.heading {
height: 100px;
background: green;
text-align:center;
padding: 20px;
}
.navigation {
height: 50px;
background: lightgreen;
}
.content {
min-height: 400px;
background-image: url(../downloads/test.jpg);
width: 400px;
float: left;
}
.sidebar {
width: 200px;
float: right;
background:lightblue;
min-height: 400px;
}
.footer {
clear: both;
background: black;
height: 40px;
color: white;
text-align: center;
padding: 10px;
}
h1 {
text-align: center;
font-family: "times new roman"
font: 24pt;
color: #ff3819;
}
【问题讨论】：
-
你应该删除单个“”