0
當我調整窗口大小到小於1150px時，頁面右下角會出現一個擴大的白色塊。我用盡了一切我能想到的，並不能找到任何工作..當小窗口白色塊右下角
這裏的HTML：
<!doctype HTML>
<html>
<head>
<title></title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Add mousewheel plugin (this is optional)
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel- 3.0.6.pack.js"></script>
-->
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="head100">
<div id="head"><a href="index.php"><img src="img/head.png" alt="" /></a></div>
</div>
<div id="nav100">
<div id="nav">
<ul id="menu">
<li class="contact"><a href="contact.php">Contact</a></li>
<li class="resume"><a href="resume.php">Resume</a></li>
<li class="development"><a href="development.php">Development</a></li>
<li class="design"><a class="selected" href="design.php">Design</a></li>
</ul>
</div>
</div>
<div id="body100">
<div id="body"> <div id="mainPic">
<div id="myCarousel" class="carousel slide carousel-fade">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="img/bodypic.jpg" alt="Carousel" /></div>
<div class="item"><img src="img/bodypic2.jpg" alt="Carousel" /></div>
<div class="item"><img src="img/bodypic3.jpg" alt="Carousel" /></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<img id="welcome" src="img/welcome.png" alt="Welcome to my portfolio!" />
<br />
<div id="welcomeunder">Take a look around and feel free to <a href="contact.php">Contact Me</a> with any questions.<br />Enjoy! <span id="smiley">☻</span></div>
</div>
</div>
<div id="amBG" class="amBG">
<div id="aboutMe">
<img src="img/me.png" id="me" alt="Me" />
<img src="img/aboHead.png" id="aboHead" alt="About Me" />
<p>
I'm a web developer/designer currently doing freelance work and seeking full time employment. Suspendisse et lacus vel lectus cursus rhoncus ac ac purus. Mauris massa ante, tempor sit amet mi eget, mattis semper arcu. Duis ipsum elit, ornare eu urna ac, faucibus aliquam quam. Etiam vel malesuada est, at vestibulum nulla. Etiam malesuada eget lorem eget lobortis. Praesent eu urna est. Aenean in magna vel arcu bibendum tristique. Cras accumsan sed purus eget facilisis. Maecenas a tempus velit. Nunc felis turpis, scelerisque rutrum mi quis, convallis fermentum ipsum. Mauris ut tristique magna, id consequat metus.
</p>
</div>
</div>
<footer>
<div id="foot">
<div id="footRight">
<fieldset><legend><img src="img/foot/quick.png" alt="Quick Contact" /></legend>
<form id="quickMail" method="post" action="quickMail.php">
<label for="email">Email:</label>
<input type="text" class="footText" name="email" />
<label for="subject">Subject:</label>
<input type="text" class="footText" name="subject" />
<label for="message">Message:</label>
<textarea rows="4" cols="25" name="message"></textarea><br />
<input type="checkbox" name="userCopy" value="userCopy" id="userCopy">Send me a copy</input><br>
<input type="submit" id="footSubmit" value=""></input>
</form>
</fieldset>
</div>
<div id="footLeft">
<img src="img/foot/footLogo.png" alt="" />
<br />
<a href="index.php">Home</a><br />
<a href="design.php">Design</a><br />
<a href="development.php">Development</a><br />
<a href="resume.php">Resume</a><br />
<a href="contact.php">Contact</a><br />
</div>
<div id="footBot">
<span id="btt"><span id="bttt">Back to top </span><a href="#" id="toTop"></a></span>
<span id="copy">Copyright © 2013 </span>•
<span id="botMid">All content on this site was made entirely by me.</span>•
<span id="resources">Resources: <a href="http://getbootstrap.com/" target="_blank">Bootstrap <a href="http://fancybox.net/" target="_blank">Fancybox</a></span>
</div>
</div>
</footer>
<script type="text/javascript">
$("#toTop").click(function() {
$("html, body").animate({scrollTop: 0}, 600);
return false;
});
$(document).ready(function() {
$(".fancybox").fancybox();
});
$(document).ready(function() {
$('.carousel').carousel({
interval: 5000
})
});
</script>
</body>
而CSS：
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
}
#head100 {
height: 100%;
background-color: #9db2b1;
}
#head {
width: 1150px;
margin: auto;
padding-top: 15px;
background-color: #9db2b1;
}
img {
border:0px;
}
a {
border: none;
}
#nav100 {
width: 100%;
background-color: #fff;
border-top: 1px solid #8C9C9A;
}
#nav {
width: 1150px;
margin: auto;
height: 52px;
}
ul#menu{margin:0; padding:0; list-style:none; clear:both;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:right;}
#menu li a{background:url('../img/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;}
/* design Button */
#menu li.design{width:108px; height:52px;}
#menu li.design a{background-position: 0 0;}
#menu li.design a:hover{background-position: 0 -52px;}
/* development Button */
#menu li.development{width:177px; height:52px;}
#menu li.development a{background-position:-108px 0;}
#menu li.development a:hover{background-position:-108px -52px;}
/* resume Button */
#menu li.resume{width:102px; height:52px;}
#menu li.resume a{background-position:-285px 0;}
#menu li.resume a:hover{background-position:-285px -52px;}
/* Contact Button */
#menu li.contact{width:126px; height:52px;}
#menu li.contact a{background-position:-387px 0;}
#menu li.contact a:hover{background-position:-387px -52px;}
#body100 {
background-color: #485c5a;
padding-bottom: 20px;
}
#body {
width: 1150px;
min-height: 350px;
margin: auto;
padding-top: 25px;
color: #fff;
background-color: #485c5a;
}
#welcome {
margin-top: 15px;
margin-left: 188px;
text-align: center;
}
#welcomeunder {
text-align: center;
font-size: 22px;
line-height: 35px;
font-variant: small-caps;
}
#welcomeunder a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
#welcomeunder a:hover {
color: #a31e39;
}
#smiley {
font-size: 30px;
}
#mainPic {
width: 1150px;
margin: auto;
height: 450px;
}
.carousel.carousel-fade .item {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
.amBG {
height: 520px;
padding-top: 25px;
padding-bottom: 25px;
background-color: #bfcfcc;
border-top: 10px solid #fff;
color: #485c5a;
}
#amBG {
height: 390px;
}
#aboutMe {
width: 1150px;
margin: auto;
}
#aboHead {
margin-top: 20px;
}
#aboutMe p {
padding-top: 60px;
}
#me {
margin-top: 35px;
float: right;
}
#desSec {
margin-bottom: 150px;
}
#desSec p {
width: 250px;
text-align: right;
margin-left: 75px;
}
#temTitle {
margin-top: 20px;
}
#dar {
width: 575px;
margin-top: 117px;
float: right;
}
#darTitle {
margin-left: 190px;
}
#bita {
width: 575px;
margin-top: 55px;
}
.temLeft {
float: left;
}
.temPic img {
width: 225px;
height: 325px;
border: 5px solid #fff;
border-radius: 3px;
float: right;
}
#ps {
width: 1150px;
margin: auto;
margin-top: -25px;
}
#ps img {
margin-top: 40px;
margin-bottom: 30px;
}
#psPics {
margin-left: 30px;
}
#tlUL{position:relative;}
#tlUL li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#tlUL li, #tlUL a{height:264px;display:block;}
#blackNight{left:0px;width:140px;}
#blackNight{background:url('../img/ps/bnPreview.png') 0 0;}
#blackNight a:hover{background: url('../img/ps/bnPreview.png') -140px 0;}
#aDesign{left:155px;width:465px;}
#aDesign{background:url('../img/ps/niPreview.png') 0 0;}
#aDesign a:hover{background: url('../img/ps/niPreview.png') -465px 0;}
#blUL{position:relative;}
#blUL li{margin:0;padding:0;list-style:none;position:absolute;top:274px;}
#blUL li, #blUL a{height:96px;display:block;}
#blast{left:0;width:306px;}
#blast{background:url('../img/ps/blPreview.png') 0 0;}
#blast a:hover{background: url('../img/ps/blPreview.png') -306px 0;}
#spiderman{left:316px;width:306px;}
#spiderman{background:url('../img/ps/smPreview.png') 0 0;}
#spiderman a:hover{background: url('../img/ps/smPreview.png') -306px 0;}
#trUL{position:relative;}
#trUL li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#trUL li, #trUL a{height:138px;display:block;}
#church{left:632px;width:467px;}
#church{background:url('../img/ps/chPreview.png') 0 0;}
#church a:hover{background: url('../img/ps/chPreview.png') -467px 0;}
#brUL{position:relative;}
#brUL li{margin:0;padding:0;list-style:none;position:absolute;top:148px;}
#brUL li, #brUL a{height:222px;display:block;}
#heavenHell{left:632px;width:465px;}
#heavenHell{background:url('../img/ps/hhPreview.png') 0 0;}
#heavenHell a:hover{background: url('../img/ps/hhPreview.png') -465px 0;}
footer {
height: 320px;
width: 100%;
background-color: #621223;
font-size: 0.9em;
}
#btt {
float: right;
margin-top: -5px;
}
#bttt {
float: left;
padding-right: 5px;
}
#toTop {
display: block;
float: right;
width: 21px;
height: 21px;
background:url('../img/toTop.png') 0 0;
}
#toTop:hover {
background:url('../img/toTop.png') -21px 0;
}
#foot {
width: 1150px;
margin: auto;
padding-top: 10px;
color: #fff;
}
#footRight {
width: 365px;
float: right;
}
fieldset {
margin-top: 10px;
float: right;
border: none;
text-align: right;
width: 265px;
}
#userCopy {
font-variant: small-caps;
}
legend {
font-weight: bold;
padding-bottom: 10px;
}
textarea {
resize: none;
width: 177px;
display: inline-block;
padding: 5px;
margin-bottom: 5px;
background-color: #fff;
color: #000;
border: 1px solid #a31e39;
border-radius: 5px;
font-size: 11px;
}
textarea:focus {
outline: none;
}
.footText {
width: 177px;
display: inline-block;
vertical-align:middle;
padding: 5px;
margin-bottom: 10px;
background-color: #fff;
color: #000;
border: 1px solid #a31e39;
border-radius: 5px;
font-size: 11px;
}
input:focus {
outline: none;
}
label {
display: inline-block;
width: 65px;
text-align: right;
float: left;
clear: both;
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
font-weight: bold;
}
#footRight ::-webkit-scrollbar {
width: 12px;
}
#footRight ::-webkit-scrollbar-track {
background-color: #000;
border-left: 1px solid #191919;
}
#footRight ::-webkit-scrollbar-thumb {
background-color: #ccc;
}
#footRight ::-webkit-scrollbar-thumb:hover {
background-color: #a2a1a1;
}
#footSubmit {
background-image: url('../img/foot/send.png');
background-position: 0 0;
background-repeat: no-repeat;
width: 80px;
height: 28px;
margin-top: 10px;
border: 0;
cursor: pointer;
}
#footSubmit:hover {
background-position: -80px 0;
}
#footBot {
width: 100%;
clear: both;
margin: auto;
font-size: 0.8em;
padding-top: 10px;
text-align: left;
border-top: 2px solid #fff;
}
#copy {
padding-right: 20px;
}
#botMid {
padding-right: 20px;
padding-left: 20px;
}
#resources {
padding-left: 20px;
margin-top: 1px;
}
#resources a {
text-decoration: none;
color: #fff;
padding-left: 10px;
target-name:new;
target-new: tab;
}
#resources a:hover {
color: #000;
}
#footLeft {
width: 365px;
float: left;
margin-bottom: 30px;
margin-top: 5px;
}
#footLeft img {
margin-bottom: -5px;
}
#footLeft a {
display: inline-block;
text-decoration: none;
color: #fff;
border-left: 2px solid #fff;
margin-top: 10px;
padding-left: 10px;
}
#footLeft a:hover {
color: #000;
border-left: 2px solid #000;
}
對不起對於混亂，第一次使用這個網站。
所以是的，任何想法將有助於..謝謝
請提供一個鏈接到您的網站，或創建一個jsfiddle。謝謝。 –
給網站的網址 – radha
我編輯了一個URL到後遺憾 – noelllll