文章/答案/技术大牛

发布

问HTML & CSS部分ID问题
EN

Stack Overflow用户

提问于 2017-07-20 16:00:54

回答 3查看 1.9K关注 0票数 2

下面的html代码适用于并发的CSS文件，但是“区段”看起来不对，版权没有显示在白色部分中。我订阅了PLuralsight，因为我不得不等待学术资助，但我已经学会了如何通过youtube和其他场所做作业，比如codepen (顺便说一下，我喜欢这个项目和记事本++)。

“主”节ID应该位于边框和中间，“次要”部分ID应该看起来没有边框，白色应该一直延伸到页眉的边缘和页脚，版权应该显示在整个页脚的白色部分。基本上，我搞不懂他们需要什么才能看上去像他们想要的那样。if优先于类，如果您有两个部分，那么如何使一个部分接管整个过程，而另一个部分看起来就像一个框？

/* 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>

html

css

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-07-20 17:10:00

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

此外：

1:您忘记了div标记中的“div”和容器类。

2: div 'resultList‘(在div’resultList‘中)不是关闭的。

您还可以将脚本标记放在头中，并将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标记。在一本书的集合中，您有designers为网页设计人员编写的CSS3一本书，它可以很好地帮助您更好地设计和编写代码。

票数 1

Stack Overflow用户

发布于 2017-07-20 16:09:43

您没有关闭第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

Stack Overflow用户

发布于 2017-07-20 17:19:34

标记(HTML)和样式表(CSS)都存在许多问题。考虑到不精确的语句以及HTML/CSS本身，很难准确地理解您想要完成的任务，但我将提出一些建议。

首先，无论何时编写HTML，通过W3C提供的验证器运行它，它都会指出标记中的特定错误。

W3C

这里只是我在运行标记时遇到的错误的一个示例

第二，我建议阅读一些关于HTML语义的教程，在使用标签时有很多错误，可以从这里开始

MDN HTML5

在您的代码中有无效的标记，<class="container">是无效的。你在你的</section上遗漏了一个结束角括号。对于编写糟糕的标记和css，浏览器是非常允许的，这既是一件好事(它将尽最大努力填写和修复它认为您想要完成的内容)，也是一件坏事，因为您可以编写不正确的HTML而没有意识到这一点。就像我之前说过的，我不太确定你想要完成什么，但我会尝试把你引向正确的方向。

是的，您正确地说，由于特殊性，“ID”选择器将优先于类属性，但要理解级联样式表是如何工作的还有很多，包括在样式表本身内实现规则的顺序(页面底部实现的规则可以覆盖文档前面设置的规则)。试着从最外层的元素(最上面的元素)向下工作，直到树的嵌套。
如果我正在收集你想要说的关于你的‘主’和‘次要’div的内容，你想把次要的div和页脚放在主div中来完成你的目标。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45219845

复制

相似问题

问HTML & CSS部分ID问题
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML & CSS部分ID问题EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML & CSS部分ID问题
EN