我在代码中添加了一些脚本，但它弄乱了文档中其他地方的格式。我想这可能与我将其包含在内的位置有关，我读到 this answer并尝试添加异步或延迟，但没有什么区别。具体来说，它在我的“aboutus5”div 的右侧添加了一 block 空间，然后我的页脚全部被压到了左边。一旦我删除代码，格式就会恢复正常。所以我仍然不确定是否是代码的位置，或者可能只是我在其他地方的错误代码现在才受到影响。
如有任何建议，我们将不胜感激!!
这是搞砸事情的具体代码:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
这是所有代码(我知道这真的很糟糕......这是我第一次尝试构建网站):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Budget Line of Business</title>
<style>
h1 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 100px; color:#FF3B3F; font-weight: bold; margin: 0 }
h2 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 52px; color: #FF3B3F; font-weight: bold; margin: 0 }
h3 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 42px; color: #FF3B3F; font-weight: bold; margin: 0}
h4 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 32px; color: #FF3B3F; font-weight: bold; margin: 0}
h5 {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: bold; margin: 0}
h6 {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: bold; margin: 0}
p {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: none; margin: 0}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: none;
}
li {
float: right;
}
li a {
display: block;
color: #062f4f;
font-family: "Footlight MT Light";
font-size:28px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #FF3B3F;
color: #ffffff;
}
#aboutus1{
background-color:#CAEBF2;
width: 100%;
margin: 0;
}
#aboutus2{
background-color:#EFEFEF;
width: 100%;
margin: 0;
}
.aboutus3{
background-color:#CAEBF2;
width: 100%;
margin: 0;
}
.aboutus3 h{
background-color:#CAEBF2;
width: 100%;
margin: 0;
}
.aboutus3 h1 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 100px; color: #062f4f; font-weight: bold; margin: 0 }
.aboutus3 h2 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 52px; color: #062f4f; font-weight: bold; margin: 0 }
.aboutus3 h3 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 42px; color: #FF3B3F; font-weight: bold; margin: 0}
.aboutus3 h4 {font-family: 'Footlight MT Light', 'Garamond';
font-size: 32px; color: #FF3B3F; font-weight: bold; margin: 0}
.aboutus3 h5 {font-family: 'Georgia', 'Garamond';
font-size: 22px; color: #062f4f; font-weight: bold; margin: 0}
.aboutus3 h6 {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: bold; margin: 0}
.aboutus3 p {font-family: 'Georgia', 'Garamond';
font-size: 18px; color: #062f4f; font-weight: none; margin: 0}
#aboutus4{
background-color:#EFEFEF;
width: 100%;
margin: 0;
}
#aboutus5{
width: 100%;
margin: 0;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 37%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
white-space: nowrap;
}
}
.footer{
width: 100%;
height: 25vh;
background-color: #ffffff;
}
.footer a {
color: #FC4A1A;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.footer p {
font-size: 14px; padding: 2px; color: #062f4f;
}
#footercolumn1 {
float: left; margin: 0; width: 200px; padding: 15px 280px 0 5px;
}
#footercolumn2 {
float: left; margin: 0; width: 200px; padding: 15px 280px 0 0px;
}
#footercolumn3 {
float: left; margin: 0; width: 200px; padding: 15px 0px 0 0px;
}
button {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
background: #062f4f;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
button:hover {
background: #FF3B3F;
text-decoration: none;
}
#ideascolumn {
float: left; margin: 0; width: 48%; height: 300px; background-color:#CAEBF2; padding: 0 0 0 2%;
}
#casestudiescolumn {
float: left; margin: 0; width: 48%; height: 300px; background-color:#062f4f; padding: 0 0 0 2%;"
}
#avatar1hover {
padding: 0px;
display: none;
text-align: center;
}
#pmhover:hover + #avatar1hover {
display: block;
}
#avatar2hover {
padding: 0px;
display: none;
text-align: center;
}
#awhover:hover + #avatar2hover {
display: block;
}
#avatar3hover {
padding: 0px;
display: none;
text-align: center;
}
#drhover:hover + #avatar3hover {
display: block;
}
#avatar4hover {
padding: 0px;
display: none;
text-align: center;
}
#mdhover:hover + #avatar4hover {
display: block;
}
#avatar5hover {
padding: 0px;
display: none;
text-align: left;
}
#rkhover:hover + #avatar5hover {
display: block;
}
#avatar6hover {
padding: 0px;
display: none;
text-align: left;
}
#mwhover:hover + #avatar6hover {
display: block;
}
#avatar7hover {
padding: 0px;
display: none;
text-align: left;
}
#lrhover:hover + #avatar7hover {
display: block;
}
#avatar8hover {
padding: 0px;
display: none;
text-align: left;
}
#ahhover:hover + #avatar8hover {
display: block;
}
span:hover + div {
display:block;
}
</style>
</head>
<body>
<div id="aboutus1">
<a href="*"><img src="images/Logo1.png" alt="Budget Line of Business Logo"
style="float:left;width:220px;height:237px;padding:10px 0px 0px 15px;"/></a>
<ul><strong>
<li><a href="#contact">Contact</a></li>
<li><a href="#ideas">Ideas</a></li>
<li><a href="*">Our Work</a></li>
<li><a href="*">About Us</a></li>
<li><a href="*">Home</a></li>
</strong>
</ul>
<br>
<br>
<br>
<br>
<br>
<br><br><br>
<br>
<br>
<h1><center>Illuminators & Inventors</center></h1><br>
<h5 style="text-align: center; padding:0px 100px;">We're a creative team of problem-solving consultants bringing fresh ideas and innovation to budget communities across the federal government.<br>Find out what we can do for you.</h5>
<br><br>
<center><a href="*"><button>SEE OUR WORK</button></a></center>
<br><br>
</div>
<div id="aboutus2">
<br><br><br>
<div class="container"><center>
<h3>What can we do for you?</h3>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo"><b>+</b></button>
<div id="demo" class="collapse">
<h5>
Onboarding<br>
Portals<br>
Workflows<br>
Data Collection<br>
Data Analytics<br>
Project Management<br>
Budget Trainings<br>
Career Development</center>
</h5>
</div>
<br>
<div id="avatartable1">
<table style="table-layout:fixed; width:100%">
<tr>
<td id="avatar4"><center>
<span id="staffmdhover"><img src="images/avatarmd.png" alt="The Mastermind Avatar"
style="width:170px;height:150px"/></span>
<div id="avatar4hover"><p>I can connect you with an agency who is working through the exact same questions.</p></div>
</center></td>
<td id="avatar1"><center>
<span id="pmhover"><img src="images/avatarpm.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar1hover"><p>I am building tools behind the scenes to make your life easier.</p></div>
</center></td>
<td id="avatar2"><center>
<span id="awhover"><img src="images/avataraw.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar2hover"><p>I can help you become a MAX guru.</p></div>
</center></td>
<td id="avatar3"><center>
<span id="drhover"><img src="images/avatardr.png" alt="The Mastermind Avatar"
style="width:200px;height:150px"/></span>
<div id="avatar3hover"><p>I can help you build a workflow using Collect Forms.</p></div>
</center></td>
</tr>
</table>
</div>
<br><br>
<div id="avatartable2">
<table style="table-layout:fixed; width:100%">
<tr>
<td id="avatar5">
<span id="rkhover"><img src="images/avatarrk.png" alt="The Mastermind Avatar"
style="width:200px;height:150px"/></span>
<div id="avatar5hover"><p>I can teach you how to master Excel.</p></div>
</td>
<td id="avatar6">
<span id="mwhover"><img src="images/avatarmw.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar6hover"><p>I can brainstorm with you about how to streamline your budget processes.</p></div>
</td>
<td id="avatar7">
<span id="lrhover"><img src="images/avatarlr.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar7hover"><p>I can point you in the direction of career development resources.</p></div>
<td id="avatar8">
<span id="ahhover"> <img src="images/avatarah.png" alt="The Mastermind Avatar"
style="width:180px;height:150px"/></span>
<div id="avatar8hover"><p>I can help you create a one-stop shop budget portal for your office.</p></div>
</td>
</tr>
</table>
</div>
<br><br>
</div>
<div class="aboutus3" style="color: #062f4f">
<br><br><br>
<center>
<h3>Our Vision</h3>
<h6 style="text-align: center; width: 60%;">Developing modern, adaptable, cost effective and optimized process, technology, and human capital solutions supporting all phases of the formulation and execution of the Federal Budget.</h6>
</center>
<br><br>
<div>
<table style="table-layout:fixed; width:100%">
<tr>
<td id="goal1">
<center><img src="images/goal1.png" alt="Goal 1: Process Picture"
style="width:425px;height:425px"/>
<h4 style="text-align: center;">Process</h4><br>
<p style="text-align: center; width: 450px;"><b>Goal 1:</b> Improve the efficiency and effectiveness of agency and central processes for forumulating and executing the Federal Budget.</p>
</center>
</td>
<td id="goal2">
<center><img src="images/goal2.png" alt="Goal 2: Technology Picture"
style="width:425px;height:425px"/>
<h4 style="text-align: center;">Technology</h4><br>
<p style="text-align: center;width: 450px;"><b>Goal 2:</b> Improve capabilities for analyzing and presenting budget, execution, planning, and financial information in support of decision making.</p></center>
</td>
<td id="goal3">
<center><img src="images/goal3.png" alt="Goal 3: Human Capital Picture"
style="width:425px;height:425px"/>
<h4 style="text-align: center;">Human Capital</h4><br>
<p style="text-align: center;width: 450px;"><b>Goal 3:</b> Enhance the effectiveness of the Federal budgeting workforce.</p></center>
</td>
</tr>
</table>
</div>
<br><br><br>
</div>
<div id="aboutus4">
<center>
<br><br><br>
<h3>Transforming budget offices since 2006</h3><br><br>
<img src="images/timeline.png" alt="Budget Line of Business Timeline"
style="width: 1100px;height:850px"/>
<br><br>
</center>
</div>
<div id="aboutus5">
<div id="ideascolumn">
<br><br><br><br>
<table style="table-layout:fixed; width:100%">
<tr>
<td id="ideaspic" style="width:20%">
<img src="images/groupavatar.png" alt="Group of Avatars"
style="width:150px;height:150px"/><br>
</td>
<td id="ideasdescription" style="width:60%">
<h3 style="text-align: left; width: 80%;">Send us a challenge</h3></center>
<br><h6 style="text-align: left; width: 70%;">If you've got a specific business challenge, we’d love to help you tackle it. Please get in touch with us.</h6></center>
<br><h6 style="text-align: left; width: 70%;"><a href="mailto:*" style="color: #FF3B3F;font-size: 18px;font-weight: bold; text-decoration: none;">*</a></h6></center>
</td>
</tr>
</table>
<br><br><br>
</div>
<div id="casestudiescolumn">
<br><br><br><br>
<table style="table-layout:fixed; width:100%">
<tr>
<td id="ideaspic" style="width:20%">
<img src="images/atwork.png" alt="At Work Graphic"
style="width:150px;height:150px"/><br>
</td>
<td id="ideasdescription" style="width:60%">
<h3 style="text-align: left; width: 90%;">View our work</h3></center>
<br><h6 style="text-align: left; width: 70%; color:white">Check out some of the cool things we're working on right now.</h6></center>
<br><a href="*"><button>SEE OUR WORK</button></a>
</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<div id="footercolumn1">
<h5 style="color: #062f4f;">Sign up at MAX.gov</h5><br>
<p>Have a .gov email address?<br><br> Sign up for MAX.gov <a href="max.gov">here</a> and then email us to access all of our budget resources.</p>
</div>
<div id="footercolumn2">
<h5 style="color: #062f4f;">Send us your ideas</h5><br>
<p>If you have a specific challenge for us, fill out <a href="link to form page">this form</a> with all of your details.</p></div>
<div id="footercolumn3">
<h5 style="color: #062f4f;">Get in touch
</h5><br>
<p>*<p>
<a href="mailto:*">Text</a>
<br><br>
<div>
<a href="[full link to your Twitter]">
<img title="Twitter" alt="Twitter" src="https://socialmediawidgets.files.wordpress.com/2014/03/01_twitter1.png" width="35" height="35" />
</a>
<a href="[full link to your LinkedIn]">
<img title="LinkedIn" alt="LinkedIn" src="https://socialmediawidgets.files.wordpress.com/2014/03/07_linkedin1.png" width="35" height="35" />
</a>
<a href="[full link to your Facebook page]">
<img title="Facebook" alt="Facebook" src="https://socialmediawidgets.files.wordpress.com/2014/03/02_facebook1.png" width="35" height="35" />
</a>
<a href="pinterestaddress">
<img title="Pinterest" alt="Pinterest" src="https://socialmediawidgets.files.wordpress.com/2014/03/13_pinterest1.png" width="35" height="35" />
</a>
</div>
</div>
</div>
</body>
</html>
最佳答案
这不是 JS问题。这是因为您包括 Bootstrap css在
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
这与您自己的 CSS 冲突。乍一看，我可以看到这里冲突的属性是 box-sizing
Standard solution:
重写您的自定义 CSS，使其不会与 boostrap 冲突。
Hack Solution (Not encouraged.. Just to show you where you're wrong):
只需在您的自定义 CSS 中包含以下内容
* { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
关于html - Javascript 搞乱了其他地方的格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41154224/