以下 html 代码适用于并发 CSS 文件，但“部分”看起来不正确，并且版权未显示在白色部分中。我订阅了 PLuralsight，因为我必须等待学术资助，但我已经学会了如何通过 youtube 和其他场所(如 codepen)做作业(顺便说一句，喜欢这个程序和 Notepad++)。
“主”部分 ID 应位于边框内并居中，“辅助”部分 ID 应看起来没有边框，并且白色应一直延伸到页眉边缘并越过页脚，其中版权应该显示在整体的白色部分。基本上，我很困惑他们需要什么才能让它看起来像他们想要的那样。 ID 优先于类，如果您有两个部分，如何使一个部分接管整个事物，而第二个部分看起来像一个盒子？
/* site2.css */
header,
footer {
background-color: lightgray;
border: solid 1px black;
/*font-family: 'Times New Roman', serif;*/
}
footer {
padding: 10px;
border-radius: 3px;
}
body {
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: darkgreen;
}
a {
color: green;
}
html,
body {
padding: 0;
margin: 0;
}
.bordered-image {
border: solid 1px #444;
border-radius: 2px;
}
#main {
border: solid 1px #ccc;
border-radius: 5px;
background-color: white;
color: #202020;
margin: 20px;
padding: 5px;
}
#secondary {
border: 0;
border-radius: 5px;
background-color: white;
color: #FF0000;
margin: 20px;
padding: 5px;
display: align-top;
}
#results {
padding: 2px;
width: 600px;
display: inline-block;
vertical-align: top;
}
.simple-form {
padding: 2px;
width: 300px;
display: inline-block;
vertical-align: top;
/* position: absolute;
bottom: 5px;
right: 5px;
*/
}
.simple-form label {
font-weight: bold;
}
.simple-form input[type=text],
.simple-form select,
.simple-form input[type=password],
.simple-form textarea {
width: 150px;
}
.simple-form input[type=submit] {
background-color: green;
color: white;
border-radius: 15px;
padding: 3px;
margin-top: 5px;
}
.container {
width: 989px;
margin: 0 auto;
background-color: white;
padding: 5px;
}
h3 {
color: #0066ff;
letter-spacing: 7px;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
header nav {
float: right;
margin-right: 5px;
}
header nav li {
display: inline;
font-size: 12px;
}<!--index2.html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/site2.css">
<title>Github Hub</title>
</head>
<body>
<class="container">
<header>
<div>
<img src="img/logo.gif" class="bordered-image" />
</div>
<div>This is a site to search Github for interesting projects.</div>
</header>
<section id="main">
<p>In this
<em>sample site</em>, we'll show a list of <a href="http://github.com">Github</a> projects
<span>and the data</span> about
<strong>those projects</strong>.
</p>
<form action="http://wilder.azurewebsites.net/echo" method="POST" class="bordered-image simple-form" id="gitHubSearchForm">
<label for="searchPhrase">Search Phrase:</label>
<input type="text" name="searchPhrase" id="searchPhrase" />
<br/>
<input type="checkbox" name="useStars" id="useStars" checked="true" />
<label for="useStars">Use Stars?</label>
<br/>
<label for="langChoice">Language:</label>
<select name="langChoice" id="langChoice">
<option>All</option>
<option>JavaScript</option>
<option selected>C#</option>
<option>JavaScript</option>
<option>Ruby</option>
</select>
<br/>
<input type="submit" value="search" />
</form>
<div id="results" class="bordered-image">
<div id="resultList">This is where results will live...eventually.
</div>
</section>
<section id="secondary">
<div>
<h3>Additional Resources</h3>
<p>Visit the
<span class="highlight">Resources</span> section of our website for additional help.
</p>
<h3>Contact Information</h3>
<p>Please contact the
<span class="highlight">author</span> for additional resources at <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d3e252c3a230d2a243925382f632e2220" rel="noreferrer noopener nofollow">[email protected]</a>.
</p>
</div>
</section <footer>
© 2014 Shawn Wildermuth LLC
</footer>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>最佳答案
是的，第二部分标签未关闭。
另外:
1:您忘记了带有容器类的 div 标签中的“div”。
2:div“resultList”(在 div“results”内)未关闭。
您还可以将脚本标记放在头部并将 JavaScript 代码包装在函数中，以确保代码将在窗口加载后执行，如下所示:
window.onload = function(){
//your index.js code
}
您必须避免多个回车符和 br 标记，因为您还在 DOM 中创建了其他节点。 而不是这个:
<p>Visit the
<span class="highlight">Resources</span> section of our website for additional help.
</p>
你可以这样做:
<p>Visit the <span class="highlight">Resources</span> section of our website for additional help.</p>
如上所述，像 Sublime Text 这样的文本编辑器将帮助您使其更具可读性。 如果您必须共享代码，您应该采用更好的缩进，以使您的代码更加简洁，并且对您或其他人来说更具可读性。它使调试更容易并且更易于维护。
在编码之前，您可以尝试为您的设计和代码考虑更简单的结构，而不是 br 标记。在另一本书的集合中，您可以找到 Dan Cederholm 编写的网页设计师的 CSS3 书，它可以为您的设计和设计提供很好的帮助。你的代码更好。
关于javascript - HTML 和 CSS 部分 ID 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45219845/