HTML＆amp; CSS部分ID问题

时间：2017-07-20 16:00:54

标签： javascript html css

以下html代码适用于并发CSS文件，但“部分”看起来不正确，版权不会显示在白色部分中。我订阅了PLuralsight，因为我必须等待学术资助，但我已经学会了如何通过youtube和其他场所如codepen（喜欢这个程序btw和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 shawn@github.com.
        </p>
      </div>
    </section <footer>
    &copy; 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>

3 个答案:

答案 0 :(得分：1)

您没有关闭第172行的部分标记。（HTML中的第56行）

立即查看：https://codepen.io/anon/pen/GEVMqL 

<style>
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;
}
</style>
<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 
shawn@github.com.
</p>
</div>
</section>
<footer>
&copy; 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 :(得分：1)

是的，第二部分标签未关闭。

另外：

1：你忘记了＆＃39; div＆＃39; div在带有容器类的div标签中。

2：div＆＃39; resultList＆＃39; （在div＆＃39;结果＆＃39;内）未关闭。

您还可以将脚本标记放在头部并将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>

如上所述，像崇高文本这样的文本编辑器将帮助您使其更具可读性。 如果必须共享它，您应该采用更好的缩进来使您或其他人的代码更干净，更易读。它使调试更加容易，而且更易于维护。

在编码之前，您可以尝试为设计和代码考虑更简单的结构，而不是 br 标记。在书籍的集合中，您可以通过 Dan Cederholm 获得 CSS3 for web designers 这本书可以帮助您进行设计和设计。你的代码更好。

答案 2 :(得分：1)

标记（HTML）和样式表（CSS）存在许多问题。鉴于你的不精确的措辞以及HTML / CSS本身，你很难理解你想要完成什么，但我会提出一些建议。

首先，每当你编写一些HTML时，通过W3C提供的验证器运行它，它会指出你的标记中的特定错误。

W3C HTML Validator
以下是通过它运行标记时出现的错误示例 enter image description here

其次，我建议做一些阅读，也许还有一些关于HTML语义的教程，你的标签使用有很多错误，你可以从这里开始

MDN HTML5

在您的代码中，您有无效标记，<class="container">无效HTML。您在</section上错过了一个结束尖括号。在编写糟糕的标记和CSS时，浏览器是非常允许的，这既是一件好事（它会尽力填写并修复它认为你要完成的事情），也是一件坏事，因为你可以编写错误的HTML并没有意识到这一点。就像我之前说过的那样，我并不是很确定你想要完成什么，但是我会指着你指向正确的方向。

  1. 是的，你说“＆＃39; ID＆＃39;由于特殊性，选择器将优先于类属性，但是理解级联样式表的工作方式还有很多，包括规则在样式表本身中实现的顺序（在底部实现的规则）页面可以覆盖文档中先前设置的规则。尝试从最外面的元素（最上面）向下进入树的嵌套。

  2. 如果我正在收集你想说的关于你的主要内容的话。 div和你的中学＆＃39; div，你想把辅助div和页脚放在

    里面来实现你的目标。

相关问题
最新问题