我页面顶部的HTML空白区

时间:2015-12-09 04:13:32

标签: html

尝试10分钟后,我无法找到帮助修复代码的解决方案。我页面顶部有一个神秘的白色空间。我不知道为什么它在那里,起初我以为它是~FS~图像但是在移动它距离顶部20个像素之后白色条保持不变。 请帮忙 :) 这是我的代码:



<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en" class="no-js"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en" class="no-js"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en" class="no-js"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<title>Loading Screen By Steven</title>	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="description" content="Parallax HTML One-Page Template for Agency and Personal">
	<meta name="author" content="The Develovers">

	<!-- Styles 
		font-family: 'Lobster', cursive;
		font-family: 'Pacifico', cursive;
		font-family: 'Kaushan Script', cursive;
		font-family: 'PT Sans', sans-serif;
	-->	
	<link href="assets/css/bootstrap.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Lobster|Pacifico|Kaushan+Script|PT+Sans' rel='stylesheet' type='text/css'>
	<!--<link href="assets/css/main.css" rel="stylesheet">-->
	<link href="assets/css/glyphicons.css" rel="stylesheet">
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<link href="assets/css/animate.css" rel="stylesheet">
	<link href="assets/css/global-style.css" rel="stylesheet">
	
	<!-- JAVASCRIPT -->
	<script src="assets/js/jquery-2.1.0.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<style>
		td {
			padding:5px!important;
			color:#FFF;
		} 
		.no-padding {
			padding:0px!important;
		}
		.no-margin {
			margin:0px!important;
		}
		.workshopItemPreviewImage {
			max-width:100%;
			text-align: right;
			border:2px solid #FFF;
		}
		.workshopItemTitle {
			color:#FFF!important;
			font-size:15pt!important;
			text-align:left;
			font-family: 'Kaushan Script', cursive;
			margin-bottom:0px!important;
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
		}
		.workshopItemShortDesc {
			display:none;
		}
		.fileRating {
			display:none;
		}
		.workshopItemAuthor {
			padding-left:10px!important;
			color:#fff!important;
		}
		.workshopItemAuthorName {
			color:#fff!important;
		}
		.workshopItemAuthorName a {
			background-color:#fff!important;
			border-radius:5px!important;
			padding-left:3px!important;
			padding-right:3px!important;
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
		}
		.workshopItemAuthor, workshopItemAuthorName, workshopItemAuthorName a {
			font-size:10pt!important;
			text-align:left;
			font-family: 'Lobster', cursive;
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
		}
		.circular img {
			width: 100px;
			height: 50px;
			border-radius: 75px;
			-webkit-border-radius: 75px;
			-moz-border-radius: 75px;
			/*background: url(http://i.ytimg.com/vi/fYZM1SdO9Qc/maxresdefault.jpg) no-repeat;*/
		}
		.text-white {
			color:#FFF;
		}
		.hdr, .hdr span {
			font-family: 'Lobster', cursive!important;
			font-size: 22pt;
		}
		.hdr2, .hdr2 span {
			font-family: 'Kaushan Script', cursive;
			font-size: 18pt!important;
		}
		.hdl {
			font-family: 'Pacifico', cursive;
			font-size: 16pt!important;
		}
		.reg tr td {
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
		}
		.text-left {
			text-align: left;
		}
		.txt-shadow, .txt-shadow span, .txt-shadow i, .txt-shadow strong, .txt-shadow p {
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
		}
		.infobox {
			background: rgba(144,144,144,0.4);    /* 40% opaque red */  
			-webkit-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6);
			-moz-box-shadow:    inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6);
			box-shadow:         inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6);
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		
		.loadbarfx {
			-webkit-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6);
			-moz-box-shadow:    inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6);
			box-shadow:         inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6);
                .header h1 {
                        color: white;
                        margin: 0;
		}
	</style>
</head>

<body id="top" class="no-margin no-padding">
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe src="//www.youtube.com/embed/FkKjZz2vpy4?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1" frameborder="0" style="height:1px;width:1px;overflow:hidden;"></iframe>
<iframe frameborder="0" height="100%" width="100%" src="http://i.ytimg.com/vi/fYZM1SdO9Qc/maxresdefault.jpg"></iframe>
</div>
<div class="col-xs-13" style="position:absolute;top:20px;left:0;position:absolute;overflow:hidden!important;">
	<div class="col-xs-13 text-center">
		<img src="http://i.imgur.com/PqsZnHK.png?1" style="max-width:20%;"/></br>
	</div>
	<div class="col-xs-4 infobox">
		<table style="width:100%;" class="reg">
			<tr><td colspan=2 class="text-center hdr"><i class="" style="color:#1F6FD1!important;"></i> Rules<td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-bed"></i></td><td><center>No Foul Language/Profanity</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-tachometer"></i></td><td><center>No disrespecting players or staff</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-university"></i></td><td><center>No Trolling</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-microphone-slash"></i></td><td><center>No Mic Spamming</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-heartbeat"></i></td><td><center>No cheating/hacking what so ever</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-frown-o"></i></td><td><center>No Griefing</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-meh-o"></i></td><td><center>No using any exploits</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-chain-broken"></i></td><td><center>No advertising</center></td></tr>
			<tr><td colspan=2 class="text-white text-center hdr"><i class="fa fa-map-code" style="color:#1F6FD1!important;"></i> Encouraged<td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-cogs"></i></td><td><center>Helping players</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-code"></i></td><td><center>Enforcing the rules</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-bug"></i></td><td><center>Reporting rulebreakers to staff</center></td></tr>
			<tr><td class="text-white text-center"><i class="fa fa-question-circle"></i></td><td><center>Keep a nice and happy attitude!</center></td></tr>
		</table>
	</div>
	<div class="col-xs-4">
		<div class="col-xs-12">
			<table style="width:100%;" class="reg">
				<tr><td class="text-white hdr"><i class="fa fa-map-marker" style="color:#D12112!important;"></i> Server Location: <span style="color:#1F6FD1!important;">Los Angeles, CA</span></td></tr>
				<tr><td class="text-white hdl" colspan=2><center>Note: This is a family friendly server, therefore foul language will not be tolerated.</center></td></tr>
				<tr><td class="text-white hdl" colspan=2><center>Creator of Loading Screen: Steven (Yes I'm alive. Hello JMZ)</center></td></tr>
				<tr>
					<td class="text-white" colspan=2>
						<p><strong><center><span style="color:#FF0000!important;">Updates/Information</span></center>:</strong></p>
						<p><center>New loading screen created by Steven!<center></p>
						<p><center>Servers are still being updated from time to time, report any unannounced to the forums via chatbox</center></p>
						<p><center>Website: fsclan.org</center></p>
						<br>
						<br>
						<p><strong><center>This loading screen is licensed under a Creative Commons Attribution 4.0 International License by Steven</center></strong></p>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div class="col-xs-4">
		<div class="col-xs-12 infobox">
			<table style="width:100%;" class="reg">
				<tr><td colspan=3 class="text-white text-center hdr"><i class="" style="color:#1F6FD1!important;"></i> Staff/Honorable Mentions<td></tr>
				<tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="http://fc02.deviantart.net/fs70/f/2014/341/1/2/simple_crown_bullet_by_slush_bee-d892v68.png"</td><td>Kalika (Erin)</td><td>Head-Supervisor/Leadership Team Member</td></tr>
				<tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="http://fc02.deviantart.net/fs70/f/2014/341/1/2/simple_crown_bullet_by_slush_bee-d892v68.png"></img></td><td>Steven</td><td>Former Head-Supervisor/Developer (Resigned)</td></tr>
				<tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="https://forums.alliedmods.net/images/smilies/bee.png"></img></td><td>Daniel</td><td>Supervisor</td></tr>
				<tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="http://img4.wikia.nocookie.net/__cb20120430113153/clubpenguin/images/b/bb/Moderator_badge_15px.png"></img></td><td>JMZ</td><td>Supervisor</td></tr>
			</table>
					<div class="col-xs-12" style="border-top:1px dotted #CCC;">
				<span class="hdr2 text-white txt-shadow"><i class="fa fa-download" style="color:#FFF!important;"></i> <span id="loadingHdr" style="color:#FFF!important;">Validating Workshop Collection ...</span></span>
				<div class="progress progress-sm progress-striped active">
					<div id="progressbar" class="progress-bar progress-bar-striped txt-shadow" style="width: 0%"></div>
				</div>
				<span id="subtext1" class="text-white" style="color:#FFF!important;"></span>
				<span id="subtext2" class="text-white" style="color:#FFF!important;"></span>
				<span id="subtext3" class="text-white" style="color:#FFF!important;"></span>
			</div>
		</div>
		<div class="col-xs-12 infobox" style="margin-top:10px!important;">
			<p class="text-white hdr txt-shadow" style="padding:5px;"><i class="" style="color:#1F6FD1!important;"></i> How to become a Member</p>
			<span class="text-white txt-shadow" style="padding:5px;">Apply on our forums: fsclan.org Keep a POSITIVE and mature attitude! Help players and staff! Report rulebreakers, enforce the rules! And most of all, BE ACTIVE and read our requirements on the forums!</span>
		</div>
		<div class="col-xs-12 infobox" style="margin-top:15px!important;">
			<p class="text-white hdr txt-shadow" style="padding:15px!important;"><i class="" style="color:#1F6FD1!important;"></i> About The Server</p>
			<span class="text-white txt-shadow" style="padding:15px!important;">This is a family friendly server! That means profanity/foul language will not be tolerated! Keep all names, profile pictures, and words used on the server PG13!</span>
		</div>
			</div>
	</div>
</div>
	<script>
		var totalfilez
		//Gets initial total files needed.
		function SetFilesTotal(total) {
			totalfilez = total;
			window.totalfiles = total;
			$('#subtext3').empty().append(total+' files found.');
		}
		//Update Progress Bar
		function SetFilesNeeded(needed) {
			window.filesleft = needed;
			$('#subtext2').empty().append(needed+' files needed.');
			if(needed < 1) {
				var neededz = window.totalfiles;
			} else {
				var neededz = needed;
			}
			var percent = Math.ceil((((window.totalfiles-neededz)/2)/(window.totalfiles/2))*100);
			if(!isNan(percent)) {
				$('#progressbar').css({ "width" : percent+"%"});
				$('#progressbar').empty().append(percent+"%");
			}
		}
		//Update loading header text.
		function SetStatusChanged( status ) {
			$('#loadingHdr').empty().append(status);
			/*
			Retrieving server info...
			Getting addon info for #------
			Found '--'
			Mounting Addons
			Workshop Complete
			Sending client info...
			*/
			if(status == 'Retrieving server info...') {
				$('#progressbar').css({ "width" : "10%"});
				$('#progressbar').empty().append("Initializing ...");
			}
			if(status == 'Mounting Addons') {
				$('#progressbar').css({ "width" : "55%"});
				$('#progressbar').empty().append("55%");
			}
			if(status == 'Workshop Complete') {
				$('#progressbar').css({ "width" : "89%"});
				$('#progressbar').empty().append("89%");
			}
			if(status == 'Sending client info...') {
				$('#progressbar').css({"width" : "100%"}, 15000);
				$('#progressbar').empty().append('Finalizing ...');
			}
		}
		//Downloading file event.
		function DownloadingFile(fileName) {
			$('#subtext1').empty().append('Obtaining '+fileName+'.</br><b>'+window.filesleft+'</b> out of <b>'+window.totalfiles+'</b>');
		}
	</script>
        <style type="text/css">
        body {
        overflow: scroll;
        overflow-x: hidden;
        }
::-webkit-scrollbar{
  width:0px;   // here actuall it exist but width is 0 so no one can see it 
  background:transparent;
} //end of the code here
// this code for further customization of thumbs
::-webkit-scrollbar-thumb{
   background-color: rgba(0,0,0,0);

}
        </style>
	</div>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

没关系,通过删除

修复它

&#13;
&#13;
<iframe src="//www.youtube.com/embed/FkKjZz2vpy4?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1" frameborder="0" style="height:1px;width:1px;overflow:hidden;"></iframe>
&#13;
&#13;
&#13;