2
내 코드에 스크립트를 추가했는데 내 문서의 다른 곳에서 서식을 엉망으로 만들고 있습니다. 아마도 내가 포함하고있는 곳과 관련이 있다고 생각했는데 this answer을 읽고 비동기 또는 지연을 추가하려고 시도했지만 차이는 없었습니다. 특히, 그것은 내 "aboutus5"div의 오른쪽에 공간 블록을 추가하고 내 꼬리말은 모두 왼쪽으로 찌그러 뜨 렸습니다. 코드를 제거하면 바로 포맷이 정상적으로 돌아갑니다. 그래서 나는 그것이 코드의 배치인지 또는 다른 곳에있는 단지 나쁜 코드가 여전히 영향을 받고 있는지 확실하지 않습니다.자바 스크립트가 다른 곳에서 서식을 엉망으로 만들었습니다.
모든 의견을 보내 주시면 감사하겠습니다.
여기까지 일을 속이고있어 특정 코드입니다 :
<!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>
<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>
그리고 여기에 모든 코드입니다 (나는 정말 나쁜 알을 ...이 웹 사이트를 구축에서 처음으로 이동입니다)
사용자 정의 CSS에 다음을 포함 할 수 있습니다 당신은 귀하의 코드를 단순화하고 불필요한 HTML/CSS를 제거하십시오. –
귀하의 공동체의 [JSFiddle] (http://jsfiddle.net)을 입력하면 질문에 대한 답변을 얻는 것이 더 나을 것입니다. 드. 그렇게하면 모든 것을 건설적인 방식으로 포함시킬 수 있습니다. –
'내 코드에 스크립트를 추가했는데 내 문서의 다른 곳에서 서식을 엉망으로 만들었습니다'게시 한 코드에 자바 스크립트가 없습니다 - 외부 자바 스크립트와 CSS가 포함되어있어 페이지를 엉망으로 만들 수 있습니다. 개발자 도구 요소 검사기를 사용하여 부트 스트랩 CSS가 자신의 CSS에 방해가되는 것을 확인하십시오 –